Orden de múltiples etiquetas link de favicon: guía para devs

Subiste un favicon SVG, dos PNG de respaldo y un ICO para navegadores antiguos, y Safari sigue mostrando el ICO en tu pestaña. Los archivos están bien. El problema es el orden de tus link tags de favicon.

Los navegadores no toman la primera etiqueta <link> que ven. Según la especificación HTML de WHATWG, el user agent elige el icono más apropiado a partir de los atributos sizes, media y type. Cuando varios iconos empatan en idoneidad, el navegador puede recurrir al último declarado. Eso convierte el orden de tus link tags en una palanca real, no en una decisión puramente estilística.

Requisitos previos

Necesitas acceso al <head> de tu sitio y al menos dos archivos de favicon listos (SVG, PNG o ICO). Una comprensión básica de las etiquetas link de HTML ayuda; si necesitas repasar, consulta nuestro cheatsheet de favicon HTML code examples.

Paso a paso: ordenar varios link tags de favicon

Paso 1: entiende las reglas de selección del navegador

Los navegadores puntúan cada icono declarado según el contexto actual: densidad de pantalla, tamaño de pestaña, modo oscuro y formatos compatibles. Gana el mejor ajuste. En caso de empate, gana la última declaración coincidente. Una pila mal ordenada puede hacer que los navegadores modernos se salten tu SVG nítido y recurran a un PNG borroso, incluso cuando soportan vectores sin problema.

Paso 2: ordena de más específico a más general

Coloca tu formato más capaz primero y tu fallback universal al final:

&lt;link rel='icon' type='image/svg+xml' href='/icon.svg'&gt;
&lt;link rel='icon' type='image/png' sizes='32x32' href='/icon-32.png'&gt;
&lt;link rel='icon' type='image/png' sizes='16x16' href='/icon-16.png'&gt;
&lt;link rel='icon' href='/favicon.ico'&gt;

El SVG va primero porque escala a cualquier densidad de píxeles. Los PNG de respaldo van después para navegadores que no admiten favicons SVG. El ICO queda al final como red de seguridad universal para sistemas heredados que no declaran un formato.

Paso 3: añade atributos type para eliminar ambigüedad

Sin type, el navegador puede asumir formato ICO (el valor histórico por defecto) y saltarse tu PNG o SVG por completo. Añadir type='image/svg+xml' o type='image/x-icon' le indica exactamente qué esperar, así puede descartar archivos incompatibles sin descargarlos.

Paso 4: usa sizes para ajustarte a contextos reales

El atributo sizes describe a qué contextos de renderizado apunta cada icono. Un PNG de 16×16 encaja en las pestañas del navegador. Un PNG de 32×32 sirve para barras de tareas y barras de marcadores de alta densidad. Para la pantalla de inicio de iOS, declara un Apple Touch Icon aparte:

&lt;link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'&gt;

Los Apple Touch Icon siguen un camino de selección distinto y no compiten con los favicons normales por el slot de la pestaña, así que colócalos después de tu pila principal de favicons.

Paso 5: coloca los SVG de modo oscuro arriba

Si soportas modo oscuro, el atributo media te permite declarar dos variantes SVG:

&lt;link rel='icon' type='image/svg+xml' href='/icon-light.svg' media='(prefers-color-scheme: light)'&gt;
&lt;link rel='icon' type='image/svg+xml' href='/icon-dark.svg' media='(prefers-color-scheme: dark)'&gt;
&lt;link rel='icon' type='image/svg+xml' href='/icon.svg'&gt;

Solo una media query coincide en cada entorno, así que el navegador se queda con esa. El SVG sin filtro actúa como último fallback para navegadores que no respetan las media queries en absoluto.

Errores comunes

Poner el ICO primero. Los navegadores modernos pueden hacer match con el tipo ICO y tomarlo antes de evaluar tu SVG. Pon siempre el ICO al final.
Omitir los atributos type. El navegador recurre al ICO como suposición por defecto, lo que puede ocultar tu PNG o SVG por completo.
Usar rel='shortcut icon'. Es un atributo heredado de la era IE. La especificación de WHATWG define rel='icon' como el estándar. La mayoría de los navegadores todavía interpretan la forma antigua, pero no aporta nada y puede confundir la selección en edge cases.
Mezclar tamaños sin agrupar. No disperses un PNG de 16×16 después de un PNG de 32×32 si ambos apuntan al mismo slot de renderizado. Agrupa los tamaños que sirven al mismo contexto.
Olvidar el cache busting. Los navegadores cachean los favicons de forma agresiva. Si reordenas las etiquetas y el icono no se actualiza, añade una cadena de versión como ?v=2: consulta nuestra favicon cache busting guide para ver el flujo completo.

Cierre

El orden importa porque los navegadores eligen el icono más adecuado de tu pila, y los empates se resuelven con la última declaración. Pon tu mejor formato primero, tus fallbacks después y añade los atributos type y sizes para eliminar cualquier ambigüedad. Si tu icono sigue sin actualizarse tras reordenar, el siguiente sospechoso suele ser la caché. Usa Mzu favicondl para generar un paquete de iconos limpio y con el tamaño correcto y sáltate los pasos manuales de redimensionado.