Checklist de favicon: las etiquetas link que necesita un sitio y cómo comprobarlas

Dos etiquetas link son el núcleo de un favicon, una para favicon.ico y otra para un apple-touch-icon. Suma una para el manifest de la aplicación web si quieres que el sitio sea instalable, y una para un icono SVG si quieres un vectorial. Todo lo demás de las listas largas es o un valor por defecto que el navegador ya aplica o una plataforma que ya no existe. Qué tamaños en píxeles van dentro de esos archivos es otra pregunta, que responde la guía de tamaños de favicon; esta página trata del markup que los rodea.

¿Qué etiquetas link van en el head?

Este es el conjunto que escribe el generador de favicon, con la línea del SVG presente solo cuando partes de una letra:

<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">

Cuatro líneas, cada una con su trabajo. La primera apunta al .ico. La segunda ofrece un icono vectorial a los navegadores que pueden usarlo. La tercera es lo que lee iOS para la pantalla de inicio, porque, como señala MDN, iOS ignora para ese fin la relación estándar icon y el atributo sizes. La cuarta es donde Android encuentra los PNG de 192 y 512 px. Si solo publicas un .ico y un apple-touch-icon, el sitio sigue teniendo un icono que funciona en todos los lugares que importan para una pestaña del navegador.

Las rutas empiezan con una barra. Una ruta relativa como icons/favicon.ico se resuelve respecto a la página actual, así que funciona en la página de inicio y se rompe en /blog/algun-post/, que es como un sitio acaba con el icono correcto en una sección y uno genérico en el resto.

¿Importa el orden de las etiquetas?

Solo cuando dos iconos son candidatos igual de buenos. La descripción de MDN de rel="icon" dice que, cuando hay varios, el navegador usa media, type y sizes para elegir el más apropiado, que si varios son igual de apropiados gana el último, y que si la mejor opción resulta inutilizable, por ejemplo por un formato no admitido, el navegador pasa a la siguiente mejor. Esa es la razón para listar primero el .ico y después el SVG: un navegador que entiende los dos termina en el SVG, y uno que no, vuelve al .ico.

Eso es lo que dice la especificación, no una prueba en cada navegador. Los navegadores han diferido en cómo pesan un .ico frente a un SVG, y el sizes="32x32" de la línea del .ico es la precaución habitual: le dice al navegador para qué sirve mejor ese archivo en lugar de dejar que lo adivine. Después de cualquier cambio, mira la pestaña en los navegadores que te importan en vez de fiarte del razonamiento.

¿Qué etiquetas viejas puedes dejar fuera?

• rel="shortcut icon". MDN llama a la palabra clave shortcut no conforme y dice que los autores ya no deben usarla. Google todavía la acepta, pero icon a secas hace el mismo trabajo.
• apple-touch-icon-precomposed. La documentación de Google todavía la lista para versiones anteriores de iOS. Un apple-touch-icon actual de 180 px es el que hay que conservar.
• Un atributo sizes en cada línea de apple-touch-icon. Con un solo archivo basta, así que la versión de seis líneas son seis sitios donde olvidarse de actualizar.
• Las etiquetas de mosaicos de Windows y el mask-icon de las pestañas ancladas de Safari, que la guía de tamaños trata como formatos que ya envejecieron.
• El manifest, si no te importa que el sitio sea instalable. Es la única línea que puedes quitar sin perder el icono de la pestaña, porque la pestaña nunca lo lee.

Conserva el archivo favicon.ico en la raíz del sitio aunque la etiqueta apunte a otro lado. Los navegadores piden /favicon.ico sin que nadie se lo indique, así que cubre las páginas donde falta el head o lo eliminan.

¿Cómo compruebas que una página publicada sirve el icono correcto?

Cuatro comprobaciones, ordenadas por la frecuencia con la que encuentran el problema:

1. Abre cada archivo por su URL. Pega /favicon.ico, /icon.svg y los demás en la barra de direcciones. Deberías ver una imagen. Si ves tu página 404, el archivo no está en la raíz; si ves tu página de inicio, una regla general responde con un 200 por un archivo que falta, y el navegador tratará ese HTML como un icono roto.
2. Lee el head de la página que realmente se sirve. Mira el código fuente de una página anidada, no solo de la de inicio, y busca rel="icon". Las plantillas que arman el head de forma distinta según el tipo de página son una causa común de un icono que aparece solo en algunas páginas.
3. Recarga sacando la caché del camino. Los favicons viven en una caché separada de la de la página, así que una recarga forzada muchas veces no cambia nada. Una ventana privada, o el archivo del icono abierto directamente y recargado, muestra lo que el servidor envía ahora.
4. Comprueba que nada bloquee los archivos. Google dice que Googlebot-Image debe poder rastrear el archivo del icono y Googlebot la página de inicio. Una regla de robots.txt que cubra una carpeta de assets puede ocultar el icono de la búsqueda sin que se note en la pestaña del navegador.

Las herramientas de desarrollo del navegador ayudan con las dos primeras. En el panel de red, recarga y filtra por imágenes, y busca la petición del icono y su código de estado. Los navegadores basados en Chromium también muestran el manifest y sus iconos en el panel de aplicación, con los errores incluidos.

¿Qué necesita Google para el icono junto a tu resultado?

A octubre de 2026, la documentación de favicon de Google pide una etiqueta link en el head de la página de inicio, una imagen cuadrada en una URL estable y acceso de rastreo tanto para el archivo como para la página. Solo se admite un favicon por nombre de host: un subdominio puede tener el suyo, pero un subdirectorio como /news/ no. Los formatos que lista la página son BMP, GIF, ICO, PNG, JPEG, PPM y TIFF, y SVG no está entre ellos, así que conserva un icono raster aunque la pestaña de tu navegador muestre un SVG. El tamaño recomendado es mayor de 48 px, y un cambio puede tardar de varios días a varias semanas en verse. Google también dice que cumplir todas las pautas no garantiza que el icono se muestre. Solicitar la indexación de la página de inicio en Search Console es la única palanca que documenta, y no vuelve el proceso instantáneo.

Lo que el generador no hace por ti

El generador dibuja los archivos y escribe las etiquetas. No publica nada, así que los archivos todavía hay que subirlos a la raíz del sitio. El manifest que escribe tiene un nombre de relleno, Your site name, que debes reemplazar, y sus entradas de iconos no llevan campo purpose, así que Android no las tratará como arte maskable. El fragmento de etiquetas supone que los archivos están en la raíz; un sitio servido desde una subcarpeta necesita cambiar las rutas. Y nada en la herramienta comprueba un sitio publicado: las cuatro comprobaciones de arriba siguen siendo tuyas.

Última actualización 26 de octubre de 2026