La etiqueta link rel="icon" explicada
La etiqueta <link rel="icon"> en el <head> de una página le indica al navegador qué archivo usar como favicon. href apunta a la imagen, type da su tipo MIME y sizes lista las dimensiones en píxeles que contiene el archivo para que el navegador pueda elegir la mejor coincidencia. Puedes incluir varias etiquetas link de icono (una por tamaño o formato), y el navegador elige la más adecuada.
Las cuatro cosas que lleva la etiqueta
rel="icon" declara la relación: este archivo es un icono para el documento. href es la ruta a la imagen. type es el tipo MIME (image/x-icon, image/png, image/svg+xml), que permite al navegador saltarse un formato que no puede usar. sizes lista las dimensiones que contiene el archivo, como "32x32", o "any" para un SVG escalable.
El navegador lee cada enlace de icono del head, y luego elige el que mejor encaja con la superficie que está dibujando: la pestaña, un marcador, un mosaico más grande. Por eso un head del mundo real lleva varias de estas etiquetas en vez de una, y por eso todas van en el head, antes del body.
Un conjunto moderno de enlaces de icono
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />Cinco etiquetas, cada una dirigida a un consumidor distinto. El navegador ignora las que no entiende y elige la mejor del resto.
Qué hace cada atributo
| Atributo | Propósito |
|---|---|
| rel | La relación: "icon" para un favicon, "apple-touch-icon" para iOS |
| href | La ruta al archivo de imagen |
| type | El tipo MIME, para que un navegador pueda saltarse formatos que no puede renderizar |
| sizes | Las dimensiones que contiene el archivo, p. ej. "32x32", o "any" para SVG |
Preguntas frecuentes sobre rel="icon"
¿Necesito el atributo type en un enlace de icono?
Es opcional pero útil. type permite al navegador saltarse un formato que no puede usar sin descargarlo primero. Vale la pena incluirlo en los enlaces de PNG y SVG, e inofensivo en todos los demás.
¿Puedo tener más de una etiqueta link de icono?
Sí, y normalmente deberías. Declarar varios tamaños y formatos permite que cada superficie elija la coincidencia más cercana en vez de reducir una imagen grande para la pestaña y ampliarla para la pantalla de inicio.
¿Dónde va la etiqueta link?
En el <head> del documento. El navegador solicita el favicon mientras analiza el head, así que una etiqueta colocada en el body llega demasiado tarde para usarse en la primera carga.