Casi todos los navegadores ya cuentan con un soporte extenso de diferentes formatos de imágenes para mostrar el favicon de una página siendo Internet Explorer y Safari (los sospechosos de siempre) los que cuentan con menor soporte. Aquí la lista.
Edge: .ico
, .png
, .gif
Firefox: .ico
, .png
, .gif
, .gif
animado, .jpg
, .png
animado, .svg
Chrome: .ico
, .png
, .gif
, .gif
animado, .jpg
IE: .ico
, .png
, .gif
Opera: .ico
, .png
, .gif
, .gif
animado, .jpg
, .png
animado, .svg
Safari: .ico
, .png
, .gif
, .jpg
Como verás casi siempre el factor común es ico
, png
y gif
. Resulta que este último no es precisamente muy bueno haciendo transparencias ni imágenes de calidad como puedes leer en la misma Wikipedia lo cual nos deja con sólo dos tipos ideales para este propósito; ico
y png
.
Los íconos pueden tener tamaños de 16×16, 32×32, 48×48, o 64×64 píxeles y 8 bits, 24 bits o 32 bits de profundidad de color. Personalmente he usado png
de dimensiones enormes y no proporcionales (a manera de experimento) y el navegador los ha renderizado sin problemas lo que convierte este formato en el ideal (en mi opinión).
Puedes usar ambos formatos a la vez y también los navegadores intentarán obtenerlo de la raíz del sitio por defecto. Este proceso se hace siguiendo este algoritmo.
Si vínculos para ambos favicons en formato PNG y ICO son encontrados los navegadores compatibles con PNG seleccionan que formato y tamaño usar de la siguiente manera:
Firefox y Safari usarán el favicon que venga de último.
Chrome para Mac usará cualquiera que sea en formato ICO, de lo contrario usará el que tenga 32×32 píxeles.
Chrome para Windows usará el favicon que venga primero si es 16×16 píxeles de tamaño, de lo contrario el ICO.
Si ninguna de las opciones anteriores son posibles, ambos Chromes usarán cualquier favicon venga primero, exactamente el opuesto de Firefox y Safari. De hecho, Chrome para Mac ignorará el de 16×16 y usará el de 32×32 para luego escalarlo a 16x16 en dispositivos no-retina.
Opera escogerá el icono completamente al azar.
Recuerda que el atributo rel
esta relacionado con el elemento link que puede usarse para muchas cosas más como cargar estilos y su sintáxis es:
<link rel="[tipo enlace][espacio][tipo enlace]..."/>
Los tipos de enlaces a los que te refieres son icon
y shorcut
.
icon
: Define un recurso para representar la página en la interfaz de usuario, usualmente un icono (audible or visual).
Básicamente es una imagen que identifica tu página.
shorcut
: No forma parte del estándar.
Se usa por razones históricas.
Por razones históricas, la palabra clave icon puede ir precedida por la palabra clave "shortcut". Si "shortcut" está presente debe venir seguida inmediatamente por icon y ambas deben ir separadas por un sólo caracter U+0020 SPACE.
Básicamente con icon
es suficiente a menos que pretendas soportar navegadores antiguos en tu sitio.