w3schools made icon code html html5 favicon

html - made - "/favicon.ico" vs<link rel="icono de acceso directo"/>



made favicon (3)

Pregunta

  • ¿Cuál es la mejor práctica para crear un favicon en un sitio web?
  • y es un archivo .ico con imágenes 16x16 y 32x32 mejor que un archivo .png con 16x16 solamente?
  • ¿Podría el método correcto preferido hoy no funcionar en navegadores razonablemente antiguos?

Método 1

Colocar un archivo llamado favicon.ico en el directorio principal es de una sola manera. El navegador siempre solicita ese archivo. Puedes ver eso en los archivos de registro de Apache.

Método 2

Etiqueta HTML en la sección <head> :

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

  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 funcionan automáticamente, ¿qué tipo de código quieres? entonces creo que el método 1 es mejor.

Hay varias formas de crear un favicon. La mejor manera para ti 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ás dispuesto a hacer. Me gusta dibujar un ícono de 16x16 a mano para obtener mejores resultados.
  • Restricciones específicas, como apoyar un navegador específico con especificaciones extrañas.

Primer método: usar un generador de favicones

Si quiere hacer el trabajo bien y rápidamente, puede usar un generador de favicones . Este 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 tal solución: es rápido y todas las consideraciones de compatibilidad ya fueron tratadas para usted.

Segundo método: crear un favicon.ico (navegadores de escritorio solamente)

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

Luego, declararlo en tu código HTML:

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

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

Acerca de su sugerencia de colocar el archivo favicon.ico 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á de alguna manera desaprobado en Windows, pero entiendes el punto). Esta técnica es útil cuando se combina con iconos PNG (para navegadores modernos).

Tercer método: crear un favicon.ico, un ícono PNG y un ícono Apple Touch (todos los navegadores)

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

Puede lograr una buena compatibilidad con:

  • favicon.ico , ver arriba.
  • Un icono PNG 192x192 para Android Chrome
  • Un ícono 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 lo suficientemente buena en la mayoría de los casos.

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