La semana pasada estaba haciendo una auditoría para un cliente en Madrid y me encontré con que tenían seis etiquetas favicon diferentes en su <head>, y ninguna funcionaba en Safari. Resulta que habían ido copiando snippets de cinco respuestas distintas de Stack Overflow, desde 2014 hasta 2024. Si estás buscando ejemplos reales de favicon link rel icon, necesitas ver cómo estructuran estas etiquetas los sitios en producción, no solo copiar y pegar consejos sueltos.

Quiero repasar contigo los patrones exactos de HTML que aguantan el tirón en los navegadores de 2026. Vamos a inspeccionar lo que de verdad shippean las grandes compañías, desglosar por qué eligen esos atributos rel concretos y montar un template limpio que puedas usar ya mismo.

Lo que de verdad shippean los sitios en producción

Echa un vistazo a GitHub. Sirven a millones de developers a diario y su configuración de favicon está testeada a fuego. Si inspeccionas su código fuente, verás un patrón muy deliberado que prioriza SVG para navegadores modernos mientras hace fallback a PNG para los más antiguos.

El enfoque de GitHub es simple: un SVG para navegadores modernos, un ICO para soporte legacy y un Apple Touch Icon para iOS. Ya no shippean 15 tamaños diferentes de PNG. Stripe hace algo muy parecido. Ambas compañías tratan el SVG como la fuente de verdad principal.

El patrón de GitHub: SVG-First

GitHub usa un media query dentro de su SVG para gestionar el dark mode automáticamente. Esto significa que un único fichero se adapta al tema del SO del usuario sin necesidad de JavaScript. Aquí tienes el patrón exacto que usan:

<link rel='icon' href='/favicon.svg' type='image/svg+xml'>
<link rel='icon' href='/favicon.ico' sizes='any'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>

Fíjate en el orden. El SVG va primero porque los navegadores modernos priorizan la primera etiqueta que matchea. El ICO actúa como fallback para motores antiguos como Trident o versiones early de Edge. El atributo sizes='any' en el ICO le dice al parser que contiene múltiples resoluciones, evitando parseo innecesario del DOM.

El patrón de Stripe: Separación estricta

Stripe toma un camino ligeramente distinto. Separan su SVG de dark mode completamente usando una segunda etiqueta <link> con un atributo media. Esto es útil si tu logo necesita un artwork completamente distinto para fondos oscuros en lugar de un simple cambio de color.

<link rel='icon' href='/favicon-light.svg' type='image/svg+xml'>
<link rel='icon' href='/favicon-dark.svg' type='image/svg+xml' media='(prefers-color-scheme: dark)'>

Personalmente prefiero el enfoque de GitHub porque mantener un solo archivo es más fácil que dos. Pero si las guías de marca de tu empresa exigen siluetas distintas para el dark mode, el patrón de Stripe es el que debes seguir.

Paso a paso: Montando tu stack de favicon para 2026

Deja de adivinar qué etiquetas necesitas. Aquí tienes el proceso exacto y ordenado para construir una configuración de favicon a prueba de balas. Vamos a centrarnos en el stack mínimo viable que cubre el 99% de los dispositivos.

Paso 1: Prepara tus archivos

Necesitas exactamente tres archivos. No generes una carpeta enorme de PNGs legacy a no ser que estés construyendo una PWA. Coge tu SVG original y un PNG de alta resolución de 512x512. Pásate por Mzu favicondl para convertir ese PNG en un ICO multi-resolución y un Apple Touch Icon automáticamente.

Paso 2: Escribe las etiquetas HTML

Coloca estas etiquetas lo más arriba posible en tu <head>, idealmente justo después de la declaración charset. Los navegadores parsean los favicons de forma eager, y colocarlos tarde puede provocar un flash del icono por defecto del documento.

<link rel='icon' href='/favicon.svg' type='image/svg+xml'>
<link rel='icon' href='/favicon.ico' sizes='any'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png' sizes='180x180'>

Este stack de tres líneas es todo lo que necesitas para sitios web estándar. Si quieres entender por qué ya no usamos rel='shortcut icon', échale un vistazo a nuestro análisis en profundidad sobre el link rel shortcut icon legacy issue.

Paso 3: Verifica con DevTools

Abre Chrome DevTools y navega a la pestaña Application. Mira en la sección de Manifest e Icons. Si tu SVG no aparece ahí, tienes un problema de path. Usa siempre paths absolutos desde la raíz del sitio (empezando con /) para prevenir bugs de routing en subdirectorios.

Errores comunes al copiar ejemplos

Incluso con el HTML correcto, las cosas se rompen. Aquí tienes los tres problemas más frecuentes que veo cuando los developers copian ejemplos de favicon link rel icon de toda la web.

1. Atributos type en conflicto

Si declaras type='image/png' en un archivo ICO, Safari lo ignorará. Los navegadores confían en la pista del MIME type. Si es incorrecta, descartan la etiqueta silenciosamente. Asegúrate siempre de que tu atributo type coincide con el formato real del archivo.

2. Orden de etiquetas incorrecto

Algunos navegadores antiguos cogen la última etiqueta de favicon que encuentran. Los navegadores modernos suelen coger la primera que pueden renderizar. Si pones un PNG de 16x16 antes que tu SVG, Chrome podría renderizar el PNG borroso en lugar del vector nítido. Pon siempre tu fuente de mayor calidad primero.

3. Falta de hints de tamaño

Si sirves múltiples PNGs, debes declarar el atributo sizes de forma precisa. Los navegadores no se van a descargar todos los archivos para comprobar las dimensiones. Si omites los sizes, el navegador adivina, y suele adivinar mal.

Para un desglose completo de todas las resoluciones que podrías necesitar, lee nuestra favicon sizes guide. Pero siendo sincero, si ya estás shippeando un SVG, puedes ignorar la mayor parte de esa lista.

El enfoque minimalista gana

No necesitas una docena de etiquetas HTML para tener una configuración profesional de favicon. Los ejemplos de GitHub y Stripe demuestran que una estrategia limpia y SVG-first funciona perfectamente. Usa tres archivos, escribe tres líneas de HTML y testea tu implementación de dark mode. Si tu SVG no cambia de color cuando alternas el tema de tu SO, necesitas añadir un CSS media query dentro del propio archivo SVG. Eso es tema para otro día, pero la base de HTML que acabas de construir es sólida.