17

Normalmente incluía un favicon en mis páginas web con un icono .ico, haciendo algo como esto:

<link rel="icon" href="./favicon.ico" />

Pero he visto que bastante sitios web lo hacen con imágenes con extensión .png, y con diferentes valores para el atributo rel (como "shortcut icon" o "apple-touch-icon").

¿Qué formato de imagen es más apropiado para favicon en los navegadores modernos? ¿Cuáles son las ventajas de usar uno sobre el otro? Y lo mismo para el atributo rel: ¿hay alguna diferencia entre "icon" o "shortcut icon"? (asumiendo que "apple-touch-icon" es específico para dispositivos Apple)

2 respuestas 2

14

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.

5

Yo seguiría usando .ico ya que es el formato mas soportado en todos los navegadores. Ahora, según recuerdo eso lo vi en una de mis clases en la Universidad, que el atributo rel="shortcut icon" de un favicon fue definido por Internet Explorer y era para hacer mención de la relación entre ícono y página, no fue hasta la aparición de HTML5(No se realmente que año fue xD) fue cuando declaró que icon sería el identificador estandarizado, eso si, según yo solo en navegadores que no sean basados en IE pueden usar el favicon sin la necesidad del shortcut .

Chrome, Firefox, Opera y Safari aceptan favicons PNG ...Peeeeroooo Chrome y Safari siempre optarán por el .ico si es que existen ambos

 <!-- Chrome, Safari, IE -->
<link rel="shortcut icon" href="path/to/favicon.ico">

<!-- Firefox, Opera  -->
<link rel="icon" href="path/to/favicon.png">

Desde que apareció el uso de PNG, no se incluyen múltiples resoluciones, habría que escribirlos manualmente :.

<link rel="icon" href="favicon-16.png" sizes="16x16">
<link rel="icon" href="favicon-32.png" sizes="32x32">
<link rel="icon" href="favicon-48.png" sizes="48x48">
<link rel="icon" href="favicon-64.png" sizes="64x64">
<link rel="icon" href="favicon-128.png" sizes="128x128">

Por lo tanto, no sería pregunta ¿Cuál es el formato mas apropiado? ya que siempre será la prioridad el .ico xD

En cuanto a los “Touch icons” son favicons para dispositivos móviles y tablets, iOS añade automáticamente algunos efectos visuales, esto para coordinar con los íconos incorporados a la pantalla de inicio (como lo hace con los íconos de aplicaciones). En concreto, el IOS añade:

Esquinas redondeadas

gota de sombra

brillo reflectante

A partir de iOS 2.0, se puede evitar la adición de estos efectos mediante el uso de la precompose:

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

En realidad tiene muchas propiedades, aquí está muy bien explicado:

https://mathiasbynens.be/notes/touch-icons

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.