¿Cuál es la sintaxis óptima del enlace html para usar para los iconos/faviones del sitio?

Question

cuál debería usar:

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

O:

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

que he visto tanto en uso y ambos trabajan en una gran cantidad de navegadores actuales - pero que está soportado de forma más consistente por las mayoría de los navegadores ?

Answer 1

bien, cuenta de esto por mí mismo ...

rel

<link rel="icon" funcionará en Internet Explorer 8, 9, FX y Chrome, pero no en IE6 o 7. El rel="shortcut icon" es apoyado por IE6 & 7.

Los estándares W3C indican una lista delimitada por espacios y la clave es solo icon. Esto significa que shortcut icon funciona en todos los navegadores, manejado incorrectamente por IE y como clave compuesta en todo lo demás.

tipo

Todos los navegadores parecen aceptar y manejar el formato de icono de Windows para el archivo.

IE espera que se sirva como tipo MIME image/vnd.microsoft.icon pero solo parece funcionar de forma consistente si el tipo de contenido es image/x-icon.

Todo lo demás espera image/ico pero prácticamente lo ignora.

---

Así que el mejor formato es:

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

Sin embargo, si el IE tiene problemas para manejar el archivo o el servidor no está pasando el tipo image/x-icon contenidos en los encabezados que puede ayudar a especificar el tipo de IE espera :

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

Answer 2

estaba cansado de cambiar el tamaño de iconos de página manualmente, y luego tener que crear varios <meta> y <link> etiquetas para cada tamaño , y también usando las etiquetas de plantilla correctas para el marco web que estaba usando actualmente.

Así que escribí una pequeña herramienta gratuita para generar todos los tamaños correctos, y también para generar el marcado requerido. Échale un vistazo al https://favicongenerator.co