html - una - ¿Cuál es actualmente la mejor manera de mostrar un favicon en todos los navegadores compatibles con Favicons?

icono en pestaña de navegador html5 (8)

Favicon debe ser un archivo .ico para funcionar correctamente en todos los navegadores.

Los navegadores modernos también admiten imágenes PNG y GIF.

Descubrí que, en general, la manera más fácil de crear uno es utilizar un servicio web disponible de manera gratuita, como favicon.cc .

¿Cuál es actualmente la mejor manera de mostrar un favicon en todos los navegadores que lo soportan actualmente?

Por favor incluya:

Qué formatos de imagen son compatibles con qué navegadores.
Qué líneas son necesarias en qué lugares para los diversos navegadores.

IE6 no puede manejar PNG correctamente, ten cuidado.

Para apoyar también los iconos táctiles para tabletas y teléfonos inteligentes, prefiero el enfoque de HTML5Boilerplate

Puede encontrar más información sobre los iconos táctiles en mathiasbynens.be/notes/touch-icons .

Con el estado actual de la compatibilidad con el navegador, ni siquiera tiene que agregar la etiqueta HTML para el favicon en su documento. Los navegadores buscarán automáticamente una lista de archivos, consulte este ejemplo para iOS:

Si no se especifican iconos en el HTML, iOS Safari buscará en el directorio raíz del sitio web iconos con el ícono Apple-touch-icon o apple-touch-icon-precomposed prefix. Por ejemplo, si el tamaño de icono apropiado para el dispositivo es de 57 × 57 píxeles, iOS busca los nombres de archivo en el siguiente orden:
apple-touch-icon-57x57-precomposed.png
apple-touch-icon-57x57.png
apple-touch-icon-precomposed.png
apple-touch-icon.png

Mi consejo es no incluir un favicon en su documento, pero tenga una lista de archivos listos en el sitio web raíz:

apple-touch-icon-114x114-precomposed.png
apple-touch-icon-144x144-precomposed.png
apple-touch-icon-57x57-precomposed.png
apple-touch-icon-72x72-precomposed.png
apple-touch-icon-precomposed.png
apple-touch-icon.png (57px*57px)
favicon.ico HiDPI (32x32px)

Cuando descarga una plantilla de html5boilerplate.com estas están todas incluidas, solo tiene que reemplazarlas con sus propios íconos.

También hay un sitio donde puedes verificar cómo se hace el favicon de cualquier página

getfavicon.org

Ahí puedes ver un tutorial sobre cómo hacer favicons, tipos de imágenes y resoluciones, ¡es lindo!

Tener un favicon.* En su directorio raíz es detectado automáticamente por la mayoría de los navegadores. Puedes asegurarte de que se detecte usando:

<link rel="icon" type="image/png" href="/path/image.png" />

Personalmente uso imágenes .png pero la mayoría de los formatos deberían funcionar.

Utilizo el formato .ico y coloco las siguientes dos líneas dentro del elemento <head> :

<link rel="icon" href="/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

Voy por un enfoque de cinturón y abrazaderas aquí.

Creo un icono de 32x32 en los formatos .ico y .png llamados favicon.ico y favicon.png . El nombre del icono realmente no importa a menos que se trate de navegadores más antiguos.

Coloque favicon.ico en la raíz de su sitio para admitir los navegadores más antiguos (opcional y solo relevante para navegadores antiguos).
Coloque favicon.png en mi subdirectorio de imágenes (solo para mantener las cosas ordenadas).
Agregue el siguiente HTML dentro del elemento <head> .

Tenga en cuenta que:

El tipo MIME para archivos .ico se registró como image / vnd.microsoft.icon por IANA .
Internet Explorer ignorará el atributo de type para la relación de icono de acceso directo y este es el único navegador compatible con esta relación, no necesita ser suministrado.

Reference

Wikipedia al rescate