Favicon Link Tags Order: How to Stack Multiple Icons
You uploaded an SVG favicon, two PNG fallbacks, and an ICO for legacy browsers — and Safari keeps showing the ICO in your tab. The files are fine. The problem is the order of your favicon link tags.
Browsers don't grab the first <link> tag they see. According to the WHATWG HTML specification, the user agent picks the most appropriate icon based on the sizes, media, and type attributes. When multiple icons match equally, the browser may use the last one declared. That makes the order of your link tags a real lever, not a stylistic choice.
Prerequisites
You need access to your site's HTML <head> and at least two favicon files ready (SVG, PNG, or ICO). A basic grasp of HTML link tags helps — for a refresher, see our favicon HTML code examples cheat sheet.
Step-by-step: ordering multiple favicon link tags
Step 1: Understand browser selection rules
Browsers score each declared icon against their current context: display density, tab size, dark mode preference, and supported formats. The best match wins. Ties default to the last matching declaration. A poorly-ordered stack can cause modern browsers to skip your crisp SVG and grab a blurry PNG — even when they fully support vectors.
Step 2: Order from most specific to most general
Place your most capable format first and your universal fallback last:
The SVG goes first because it scales to any pixel density. PNG fallbacks follow for browsers that don't support SVG favicons. The ICO sits at the end as a universal safety net for legacy systems that don't declare a format.
Step 3: Add type attributes to remove ambiguity
Without type, the browser may assume ICO format (the historical default) and skip your PNG or SVG entirely. Adding type='image/svg+xml' or type='image/x-icon' tells the browser exactly what to expect, so it can skip incompatible files without downloading them.
Step 4: Use sizes to match real-world contexts
The sizes attribute describes which rendering contexts each icon targets. A 16×16 PNG is right for browser tabs. A 32×32 PNG fits taskbars and high-DPI bookmark bars. For iOS home screens, declare a separate Apple Touch Icon:
Apple Touch Icons follow a different selection path and don't compete with regular favicons for the tab slot — so order them after your main favicon stack.
Step 5: Place dark mode SVGs at the top
If you support dark mode, the media attribute lets you declare two SVG variants:
Only one media query matches in any given environment, so the browser picks that one. The unfiltered SVG acts as a final fallback for browsers that don't honor media queries at all.
Common pitfalls
Putting the ICO first. Modern browsers may match the ICO type and grab it before they ever evaluate your SVG. Always put the ICO last.
Omitting type attributes. The browser falls back to ICO as the default assumption, which can hide your PNG or SVG entirely.
Using rel='shortcut icon'. This is a legacy IE-era attribute. The WHATWG spec defines rel='icon' as the standard. Most browsers still parse the old form, but it adds nothing and can confuse selection in edge cases.
Mixing sizes without grouping. Don't scatter a 16×16 PNG after a 32×32 PNG if both target the same rendering slot. Group sizes that serve the same context together.
Forgetting cache busting. Browsers cache favicons aggressively. If you reorder tags and the icon doesn't update, append a version query string like ?v=2 — see our favicon cache busting guide for the full workflow.
Wrap-up
Order matters because browsers pick the best-matching icon from your stack, and ties go to the last declaration. Put your best format first, your fallbacks after, and add type and sizes attributes to remove all ambiguity. If your icon still doesn't update after reordering, the next suspect is usually the cache. Use Mzu favicondl to generate a clean, correctly-sized icon package and skip the manual resize steps entirely.
浏览器并不会直接抓取它们看到的第一个 <link> 标签。根据 WHATWG HTML 规范，用户代理会根据 sizes、media 和 type 属性来挑选最合适的图标。当多个图标匹配度相同时，浏览器可能会使用最后声明的那个。这意味着 link 标签的顺序是一个真正起作用的关键开关，而不是单纯的风格选择。
前置条件
你需要能访问站点的 HTML <head>，并且至少准备两个 favicon 文件（SVG、PNG 或 ICO）。具备 HTML link 标签的基础知识会有帮助——如果需要复习，可以参考我们的 favicon HTML 代码示例速查表。
SVG favicon, 두 개의 PNG fallback, 그리고 레거시 브라우저용 ICO를 업로드했는데 Safari 탭에서는 계속 ICO가 표시됩니다. 파일은 문제없습니다. 문제는 favicon link 태그의 순서입니다.
브라우저는 보이는 첫 번째 <link> 태그를 그대로 가져가지 않습니다. WHATWG HTML 명세에 따르면 user agent는 sizes, media, type 속성을 기준으로 가장 적합한 아이콘을 선택합니다. 여러 아이콘이 동일하게 매치될 경우 브라우저는 마지막에 선언된 항목을 사용할 수 있습니다. 따라서 link 태그의 순서는 단순한 스타일 선택이 아니라 실제로 작동하는 레버입니다.
Prerequisites
사이트의 HTML <head>에 접근할 수 있어야 하며, 최소 두 개 이상의 favicon 파일(SVG, PNG, ICO)이 준비되어 있어야 합니다. HTML link 태그에 대한 기본적인 이해가 도움이 됩니다. 복습이 필요하면 favicon HTML code 예제 cheat sheet를 참고하세요.
Step-by-step: ordering multiple favicon link tags
Step 1: Understand browser selection rules
브라우저는 현재 컨텍스트(디스플레이 밀도, 탭 크기, 다크 모드 preference, 지원 포맷)를 기준으로 선언된 각 아이콘에 점수를 매깁니다. 가장 잘 맞는 아이콘이 선택됩니다. 동점일 경우 마지막에 선언된 항목이 기본값이 됩니다. 순서가 잘못되면 최신 브라우저가 벡터를 완전히 지원함에도 불구하고 선명한 SVG를 건너뛰고 흐릿한 PNG를 가져갈 수 있습니다.
SVG가 가장 먼저 오는 이유는 모든 픽셀 밀도에 맞춰 스케일링되기 때문입니다. SVG favicon을 지원하지 않는 브라우저를 위해 PNG fallback이 그 뒤를 따릅니다. ICO는 포맷을 선언하지 않는 레거시 시스템을 위한 범용 안전망으로 마지막에 둡니다.
Step 3: Add type attributes to remove ambiguity
type이 없으면 브라우저가 ICO 포맷(역사적인 기본값)으로 가정하고 PNG나 SVG를 완전히 건너뛸 수 있습니다. type='image/svg+xml' 또는 type='image/x-icon'을 추가하면 브라우저가 무엇을 기대해야 할지 정확히 알 수 있어, 호환되지 않는 파일을 다운로드하지 않고 건너뛸 수 있습니다.
Step 4: Use sizes to match real-world contexts
sizes 속성은 각 아이콘이 어떤 렌더링 컨텍스트를 대상으로 하는지 설명합니다. 16×16 PNG는 브라우저 탭에 적합합니다. 32×32 PNG는 작업 표시줄과 high-DPI 북마크 바에 맞습니다. iOS 홈 화면용으로는 별도의 Apple Touch Icon을 선언합니다.
주어진 환경에서는 하나의 media query만 매치되므로 브라우저는 그 항목을 선택합니다. media query를 전혀 지원하지 않는 브라우저를 위한 최종 fallback으로 media 조건이 없는 SVG가 역할을 합니다.
Common pitfalls
ICO를 가장 먼저 두는 경우. 최신 브라우저가 ICO type을 매치하고 SVG를 평가하기도 전에 ICO를 가져갈 수 있습니다. ICO는 항상 마지막에 두세요.
type 속성을 누락하는 경우. 브라우저는 기본값으로 ICO를 가정하여 PNG나 SVG를 완전히 가릴 수 있습니다.
rel='shortcut icon'을 사용하는 경우. 이것은 IE 시대의 레거시 속성입니다. WHATWG 명세는 rel='icon'을 표준으로 정의합니다. 대부분의 브라우저는 여전히 옛 형식을 파싱하지만, 아무런 이점도 없고 엣지 케이스에서 선택 로직을 혼동시킬 수 있습니다.
그룹화 없이 sizes를 섞는 경우. 동일한 렌더링 슬롯을 대상으로 한다면 32×32 PNG 뒤에 16×16 PNG를 흩어 두지 마세요. 같은 컨텍스트를 위한 sizes는 함께 묶어 두세요.
cache busting을 잊는 경우. 브라우저는 favicon을 적극적으로 캐시합니다. 태그 순서를 바꿨는데 아이콘이 갱신되지 않으면 ?v=2처럼 버전 쿼리 스트링을 추가하세요. 전체 workflow는 favicon cache busting 가이드를 참고하세요.
Wrap-up
브라우저가 스택에서 가장 잘 매치되는 아이콘을 선택하고 동점일 때 마지막 선언으로 결정하기 때문에 순서가 중요합니다. 최상의 포맷을 먼저 두고, fallback을 그 뒤에 배치하며, type과 sizes 속성을 추가해 모든 모호함을 제거하세요. 순서를 재배치한 뒤에도 아이콘이 갱신되지 않는다면 다음 의심 대상은 보통 cache입니다. Mzu favicondl을 사용해 깔끔하고 올바른 크기의 icon package를 생성하고 수동 리사이즈 단계를 건너뛸 수 있습니다.
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:
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:
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:
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.
Generate a perfect favicon stack in seconds
Mzu favicondl builds ICO, PNG, and SVG files in the right sizes so you can focus on your link tag order.