¿Cuál es actualmente la mejor manera de hacer que un favicon se muestre en todos los navegadores compatibles con Favicons?

83

¿Cuál es actualmente la mejor manera de hacer que un favicon se muestre en todos los navegadores que lo admiten actualmente?

Por favor incluya:

  1. Qué formatos de imagen son compatibles con qué navegadores.

  2. Qué líneas se necesitan en qué lugares para los distintos navegadores.

html standards favicon Fred
fuente
1
También podría valer la pena incluir aquí los 'favicons' para el iPhone; es decir, si el usuario elige agregar su sitio web a su pantalla de inicio. El código utilizado en este caso es el siguiente: <link rel = "apple-touch-icon" href = "touch.png" /> Las dimensiones deben ser 57x57 píxeles. Alternativamente, puede omitir la etiqueta del enlace y simplemente poner un archivo llamado 'apple-touch-icon.png' en el directorio raíz de su sitio web.
diferente
Mientras lo hace, lea esto: mathiasbynens.be/notes/touch-icons
Zach Lysobey
Tenga en cuenta que necesitará iconos más grandes para las pantallas de iPad y iPhone con retina. Consulte las pautas de Apple: developer.apple.com/library/IOs/#documentation/…
Mike Ottum

Respuestas:

108

Me acerco a un cinturón y tirantes aquí.

Creo un icono de 32x32, tanto en el .icoy .pngformatos llamados favicon.icoy favicon.png. El nombre del icono realmente no importa a menos que se trate de navegadores antiguos.

  1. Colóquelo favicon.icoen la raíz de su sitio para admitir los navegadores más antiguos (opcional y solo relevante para los navegadores más antiguos.
  2. Coloque favicon.png en mi subdirectorio de imágenes (solo para mantener las cosas ordenadas).
  3. Agregue el siguiente HTML dentro del <head>elemento.
<link rel = "icon" href = "/ images / favicon.png" type = "image / png" />
<link rel = "icono de acceso directo" href = "/ favicon.ico" />

Tenga en cuenta que:

  • El tipo MIME de los .icoarchivos se registró como image / vnd.microsoft.icon por IANA .
  • Internet Explorer ignorará el typeatributo de la relación del icono de acceso directo y este es el único navegador que admite esta relación, no es necesario proporcionarlo.

Referencia

Brian Matthews
fuente
2
Bien, estoy teniendo un día de 'Microsoft me está poniendo de los nervios'. No puedo hacer que esto funcione en Internet Explorer, a pesar de que muestra el favicon para el sitio de stackoverflow. ¿Hay alguna otra configuración que afecte a esto, como doctype?
belugabob
1
FYI - Encontré la respuesta. Si consulta el sitio a través de localhost: 8080 / index.html , no funciona; si usa el nombre real de la máquina ( machineName: 8080 / index.html ), todo funciona como es de esperar. Ni siquiera puedo empezar a entender este comportamiento, ¿alguien quiere intentarlo?
belugabob
2
Actualización: el comportamiento se debe a que el navegador almacena en caché el icono. Limpiar los archivos temporales de Internet solucionará esto, si se siente feliz de perder su caché.
belugabob
2
¿Sería mejor poner la versión de IE del enlace en un comentario condicional de IE?
EoghanM
9
32x32 ¿No es 16x16 la norma?
Eduardo Molteni
10

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

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

Para admitir también 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 este artículo .

Con el estado actual de 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, vea este ejemplo para iOS:

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

  1. apple-touch-icon-57x57-precomposed.png
  2. apple-touch-icon-57x57.png
  3. apple-touch-icon-precomposed.png
  4. apple-touch-icon.png

Mi consejo es no incluir un favicon en su documento, sino tener una lista de archivos lista 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 , todas están incluidas, solo tiene que reemplazarlas con sus propios iconos.

Willem de Wit
fuente
El primer enlace está desactualizado, debe ir a github.com/h5bp/html5-boilerplate/blob/master/src/doc/… ahora. Me editaría yo mismo, pero no se han cambiado suficientes caracteres: / ¡Gracias por tu respuesta!
Brendan
4

IE6 no puede manejar archivos PNG correctamente, tenga en cuenta.

nimish
fuente
3

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 forma más fácil de crear uno es utilizar un servicio web disponible gratuitamente como favicon.cc .

Antti Kissaniemi
fuente
3

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

getfavicon.org

Allí puedes ver un tutorial sobre cómo crear favicons, tipos de imágenes y resoluciones, ¡es bueno!


fuente
Ya no está operativo.
Roman Starkov
2

Tener un favicon.*en su directorio raíz es detectado automáticamente por la mayoría de los navegadores. Puede asegurarse de que se detecte utilizando:

 <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.

Ross
fuente
No, no es "favicon. *", Solo funcionan muy pocos formatos: ico, png, gif, jpeg y SVG. Consulte en.wikipedia.org/wiki/Favicon#File_format_support .
WhyNotHugo