¿Cuál es la mejor práctica para crear un favicon en un sitio web?

103

Pregunta

  • ¿Cuál es la mejor práctica para crear un favicon en un sitio web?
  • y ¿es mejor un archivo .ico con imágenes de 16x16 y 32x32 que un archivo .png solo con 16x16?
  • ¿Es posible que el método correcto que se prefiere hoy en día no funcione en navegadores relativamente antiguos?

Método 1

Colocar un archivo nombrado favicon.icoen el directorio principal es una forma. El navegador siempre solicita ese archivo. Puede ver eso en los archivos de registro de Apache.

Método 2

Etiqueta HTML en la <head>sección:

<link rel="shortcut icon" href="/images/favicon.png (or ico?)" type="image/x-icon" />
html favicon bytecode77
fuente

Respuestas:

153

Hay varias formas de crear un favicon. La mejor manera para usted depende de varios factores:

  • El tiempo que puede dedicar a esta tarea. Para muchas personas, esto es "lo más rápido posible".
  • Los esfuerzos que está dispuesto a hacer. Por ejemplo, dibujar un ícono de 16x16 a mano para obtener mejores resultados.
  • Restricciones específicas, como admitir un navegador específico con especificaciones extrañas.

Primer método: usa un generador de favicon

Si desea hacer el trabajo bien y rápidamente, puede usar un generador de favicon . Éste crea las imágenes y el código HTML para todos los principales navegadores de escritorio y móviles. Divulgación completa: soy el autor de este sitio.

Ventajas de esta solución: es rápida y ya se han abordado todas las consideraciones de compatibilidad.

Segundo método: cree un favicon.ico (solo navegadores de escritorio)

Como sugiere, puede crear un favicon.icoarchivo que contenga imágenes de 16x16 y 32x32 (tenga en cuenta que Microsoft recomienda 16x16, 32x32 y 48x48 ).

Luego, declare en su código HTML:

<link rel="shortcut icon" href="/path/to/icons/favicon.ico">

Este método funcionará con todos los navegadores de escritorio, antiguos y nuevos. Pero la mayoría de los navegadores móviles ignorarán el favicon.

Acerca de su sugerencia de colocar el favicon.icoarchivo en la raíz y no declararlo: tenga cuidado, aunque esta técnica funciona en la mayoría de los navegadores, no es 100% confiable. Por ejemplo, Windows Safari no puede encontrarlo (concedido: este navegador está obsoleto de alguna manera en Windows, pero entiendes el punto). Esta técnica es útil cuando se combina con iconos PNG (para navegadores modernos).

Tercer método: cree un favicon.ico, un icono PNG y un icono de Apple Touch (todos los navegadores)

En su pregunta, no menciona los navegadores móviles. La mayoría de ellos ignorará el favicon.icoarchivo. Aunque su sitio puede estar dedicado a los navegadores de escritorio, es probable que no desee ignorar por completo los navegadores móviles.

Puede lograr una buena compatibilidad con:

  • favicon.ico, véase más arriba.
  • Un icono PNG de 192x192 para Android Chrome
  • Un ícono de Apple Touch de 180x180 (para iPhone 6 Plus; otro dispositivo lo reducirá según sea necesario).

Declararlos con 

<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-192x192.png" sizes="192x192">
<link rel="apple-touch-icon" sizes="180x180" href="/path/to/icons/apple-touch-icon-180x180.png">

Esta no es la historia completa, pero es suficientemente buena en la mayoría de los casos.

philippe_b
fuente
9
En realidad, el <link rel = "shortcut icon" href = "/ path / to / icons / favicon.ico"> que todavía se usa con frecuencia no es una opción válida. Ni siquiera es estándar y solo IE lo admite. Y a partir de IE 9, IE admite el método predeterminado "mirar a la raíz". Por lo tanto, no es una forma de admitir todos los navegadores, sino solo una manera de admitir IE <9. Confíe en el método 'colocar en la raíz' (ahora estándar) o, si insiste, agregue: <link rel = "icon" href = "/ favicon.ico"> (Aunque esto tampoco es estándar)
HappyMe
7
El mecanismo de favicon definitivamente ha evolucionado a lo largo de los años. Hoy noté que la especificación en MDN ahora dice: El tipo de enlace de acceso directo a menudo se ve antes del ícono, pero este tipo de enlace no es conforme, se ignora y los autores web no deben usarlo más. Significado uso en <link ref="icon" ...>lugar de <link ref="shortcut icon" ...> developer.mozilla.org/en-US/docs/Web/HTML/Link_types
broc.seib
1
Gracias @ broc.seib por los comentarios. Al momento de escribir este comentario, perdí la noción de por qué era "icono de acceso directo" y no "icono". Claro, Mozilla tiene su voz en esta historia. Pero no debemos olvidar por qué esta declaración está aquí en primer lugar: para admitir navegadores heredados, como IE 8. Los navegadores más recientes usan íconos PNG, que son más limpios y livianos que ICO. Mi plan para RealFavicon es eliminar esta declaración por completo. Antes de esto, necesito ejecutar pruebas en IE 7, 8 y 9.
philippe_b
Sin mencionar que si "ve la fuente" en esta página, en Stack Overflow, ref="shortcut icon"es exactamente lo que usan.
Steven Ventimiglia
1
@laggingreflex /favicon.icoes el método preferido. Esto es lo que obtienes al visitar www.google.com. Sin embargo, es posible que no desee contaminar su directorio raíz con un icono. En ese caso, el marcado funciona bien.
philippe_b
2
  1. puedes trabajar con este sitio web para generar favin.ico
  2. Recomiendo usar el formato .ico porque el png no funciona con el método 1 e ico podría tener más detalles.
  3. Ambos métodos funcionan con todos los navegadores, pero cuando funciona automáticamente, ¿qué desea escribir un código? entonces creo que el método 1 es mejor.
a828h
fuente
2

Usé https://iconifier.net Cargué mi imagen, descargué el archivo zip de imágenes, agregué imágenes a mi servidor, seguí las instrucciones en el sitio, incluida la adición de enlaces a mi index.html y funcionó. Mi favicon ahora se muestra en mi iPhone en Safari cuando 'Agregar a la pantalla de inicio'

Hblegg
fuente