Docs ejecutables de HTML: Favicon

Q: ¿Cómo pongo un favicon en HTML?

Sube el archivo del icono a tu sitio y añade (o la ruta de un PNG o SVG) dentro de . Los navegadores lo muestran entonces en la pestaña, en los marcadores y en el historial.

Q: ¿Qué tamaño debe tener un favicon?

Incluye un favicon.ico (o PNG) de 32×32 para las pestañas, un SVG que escala a cualquier tamaño y un PNG apple-touch-icon de 180×180 para la pantalla de inicio del iPhone. Las aplicaciones web con manifiesto también listan PNG de 192×192 y 512×512.

Q: ¿Por qué no se muestra mi favicon?

Las causas habituales son una ruta equivocada en href, el fuera de , o que el navegador sigue mostrando un icono antiguo en caché. Abre la URL del icono directamente para comprobar la ruta, y luego recarga borrando la caché o añade una versión como ?v=2 a la URL.

Q: ¿Puedo usar un SVG o un PNG como favicon?

Sí. Usa o . El SVG funciona en Chrome, Edge y Firefox; mantén también un ICO o PNG para los navegadores que no lo admiten.

Q: ¿Necesito rel="shortcut icon"?

No. rel="icon" es el valor estándar. La palabra shortcut es un resto del antiguo Internet Explorer y no hace nada en los navegadores actuales.

Cómo poner un favicon

Guarda tu icono en el sitio y apunta a él desde una etiqueta <link rel="icon"> en <head>:

<link rel="icon" href="/favicon.ico">

Esa es toda la respuesta para un sitio básico. El href puede apuntar a un archivo .ico, .png o .svg. El ejemplo de abajo usa un SVG escrito directamente en el href como data URI, así que no necesita un archivo aparte. Una vista previa dentro de otra página no puede cambiar la pestaña de tu navegador, así que el script dibuja el mismo icono en una pestaña simulada y en tres tamaños:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bake Club</title>
  <link rel="icon" type="image/svg+xml"
    href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%232563eb'/%3E%3Ctext x='16' y='23' font-size='20' font-family='Arial' font-weight='700' fill='white' text-anchor='middle'%3EB%3C/text%3E%3C/svg%3E">
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .bar { background: #e5e7eb; padding: 8px 8px 0; border-radius: 8px 8px 0 0; }
    .tab { display: inline-flex; align-items: center; gap: 8px; background: #fff; border-radius: 8px 8px 0 0; padding: 8px 14px; font-size: 13px; }
    .sizes { display: flex; align-items: end; gap: 16px; margin-top: 16px; font-size: 12px; color: #6b7280; }
    .sizes div { text-align: center; }
  </style>
</head>
<body>
  <div class="bar"><div class="tab"><img id="tab-icon" width="16" height="16" alt=""><span id="tab-title"></span></div></div>
  <div class="sizes" id="sizes"></div>
  <script>
    const href = document.querySelector('link[rel="icon"]').href;
    document.getElementById('tab-icon').src = href;
    document.getElementById('tab-title').textContent = document.title;
    for (const size of [16, 32, 64]) {
      const box = document.createElement('div');
      box.innerHTML = '<img width="' + size + '" height="' + size + '" alt=""><br>' + size + 'px';
      box.querySelector('img').src = href;
      document.getElementById('sizes').append(box);
    }
  </script>
</body>
</html>

A 16 píxeles hay sitio para una letra gruesa o una forma sencilla, y el detalle fino desaparece. Diseña el icono primero para el tamaño más pequeño. Cambia fill='%232563eb' por otro color (%23 es el # codificado como URL) y todas las copias se actualizan.

Qué archivos incluir

Los navegadores, los teléfonos y los lanzadores de aplicaciones buscan iconos distintos. Un pequeño conjunto los cubre todos:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

Archivo	Tamaño	Se usa para
`favicon.ico`	32×32	Pestañas del navegador, y herramientas que solo buscan `/favicon.ico`
`icon.svg`	Cualquiera (vectorial)	Pestañas nítidas en cualquier densidad de pantalla, en Chrome, Edge y Firefox
`apple-touch-icon.png`	180×180	El icono cuando alguien añade tu sitio a la pantalla de inicio de un iPhone o iPad
Iconos del manifiesto	PNG de 192×192 y 512×512	Pantalla de inicio de Android y aplicaciones web instaladas

La mayoría de los navegadores también piden /favicon.ico a la raíz del sitio por su cuenta cuando una página no tiene enlace de icono, así que poner ahí un favicon.ico es una buena opción por defecto. El atributo sizes le dice al navegador el tamaño de cada archivo, para que elija el que mejor encaje. Usa rel="icon"; el antiguo rel="shortcut icon" solo funciona porque los navegadores ignoran la palabra extra.

Un favicon con emoji

Para un prototipo o una página personal, un emoji es un favicon rápido. Ponlo dentro de un elemento <text> de SVG:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Emoji favicon</title>
  <link rel="icon"
    href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E%F0%9F%8D%AA%3C/text%3E%3C/svg%3E">
</head>
<body style="font-family: system-ui, sans-serif;">
  <p>The icon at tab size and larger:</p>
  <img id="a" width="16" height="16" alt="">
  <img id="b" width="48" height="48" alt="">
  <script>
    const href = document.querySelector('link[rel="icon"]').href;
    document.getElementById('a').src = href;
    document.getElementById('b').src = href;
  </script>
</body>
</html>

%F0%9F%8D%AA es el emoji de galleta codificado como URL. El emoji lo dibuja la fuente de emojis del sistema operativo, así que se ve distinto en Windows, macOS y Android, y para un producto real es mejor un icono diseñado.

Un icono que sigue el modo oscuro

Un favicon SVG puede llevar su propio CSS, incluida una media query prefers-color-scheme, así que un icono oscuro puede volverse claro cuando el navegador usa un tema oscuro:

<!-- icon.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    circle { fill: #111827; }
    @media (prefers-color-scheme: dark) { circle { fill: #f9fafb; } }
  </style>
  <circle cx="16" cy="16" r="14"/>
</svg>

Cambiar el favicon con JavaScript

Los sitios usan un favicon cambiante para un punto de notificación o un color de estado. Dibuja el nuevo icono en un <canvas> y pon como href del enlace la imagen del canvas:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dynamic favicon</title>
  <link rel="icon" id="icon" href="data:,">
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    button { font: inherit; padding: 6px 12px; margin-inline-end: 6px; }
    img { vertical-align: middle; margin-inline-start: 8px; }
  </style>
</head>
<body>
  <button id="on">New message</button>
  <button id="off">Clear</button>
  Current icon: <img id="preview" width="32" height="32" alt="">
  <script>
    function draw(withDot) {
      const canvas = document.createElement('canvas');
      canvas.width = canvas.height = 32;
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = '#2563eb';
      ctx.fillRect(2, 2, 28, 28);
      if (withDot) {
        ctx.fillStyle = '#dc2626';
        ctx.beginPath();
        ctx.arc(24, 8, 7, 0, Math.PI * 2);
        ctx.fill();
      }
      const url = canvas.toDataURL('image/png');
      document.getElementById('icon').href = url;
      document.getElementById('preview').src = url;
    }
    document.getElementById('on').onclick = () => draw(true);
    document.getElementById('off').onclick = () => draw(false);
    draw(false);
  </script>
</body>
</html>

En una página real en Chrome o Firefox, el icono de la pestaña cambia cada vez que se asigna href, en el mismo momento en que cambia aquí la imagen de la vista previa.

Errores comunes

Una ruta equivocada. href="favicon.ico" es relativa a la página actual, así que falla en /blog/post. Usa una ruta desde la raíz: href="/favicon.ico".
Esperar que un cambio se vea al instante. Los navegadores guardan los favicons en caché con mucha insistencia. Recarga borrando la caché, o cambia la URL (/favicon.ico?v=2) cuando reemplaces el icono.
Un logo detallado reducido a 16 píxeles. Simplifícalo: una letra o una forma con mucho contraste.
Solo un SVG. Mantén también un ICO o PNG para los navegadores sin soporte de favicon SVG, y añade el apple-touch-icon para iOS.
Poner el enlace en <body>. Déjalo en <head> junto a la etiqueta title y los demás metadatos.

Preguntas frecuentes

¿Cómo pongo un favicon en HTML?

Sube el archivo del icono a tu sitio y añade <link rel="icon" href="/favicon.ico"> (o la ruta de un PNG o SVG) dentro de <head>. Los navegadores lo muestran entonces en la pestaña, en los marcadores y en el historial.

¿Qué tamaño debe tener un favicon?

Incluye un favicon.ico (o PNG) de 32×32 para las pestañas, un SVG que escala a cualquier tamaño y un PNG apple-touch-icon de 180×180 para la pantalla de inicio del iPhone. Las aplicaciones web con manifiesto también listan PNG de 192×192 y 512×512.

¿Por qué no se muestra mi favicon?

Las causas habituales son una ruta equivocada en href, el <link> fuera de <head>, o que el navegador sigue mostrando un icono antiguo en caché. Abre la URL del icono directamente para comprobar la ruta, y luego recarga borrando la caché o añade una versión como ?v=2 a la URL.

¿Puedo usar un SVG o un PNG como favicon?

Sí. Usa <link rel="icon" href="/icon.svg" type="image/svg+xml"> o <link rel="icon" href="/icon.png" type="image/png">. El SVG funciona en Chrome, Edge y Firefox; mantén también un ICO o PNG para los navegadores que no lo admiten.

¿Necesito rel="shortcut icon"?

No. rel="icon" es el valor estándar. La palabra shortcut es un resto del antiguo Internet Explorer y no hace nada en los navegadores actuales.

¿Puedo usar un emoji como favicon?

Sí, envolviéndolo en un SVG: un data URI SVG con un elemento <text> que contiene el emoji. Es práctico para prototipos, pero el emoji se ve distinto en cada sistema operativo.

Conceptos relacionados