¿Tiene que incluir <link rel = “icon” href = “favicon.ico” type = “image / x-icon” />?

205

No incluí la siguiente línea de código en mi etiqueta principal, sin embargo, mi favicon todavía aparece en mi navegador:

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

¿Cuál es el propósito de incluirlo?

html favicon usuario784637
fuente

Respuestas:

174

Si no llama al favicon, favicon.icopuede usar esa etiqueta para especificar la ruta real (en caso de que la tenga en un images/directorio). El navegador / página web busca favicon.icoen el directorio raíz de forma predeterminada.

Brian Graham
fuente
3
o si no tiene el favicon.ico en la carpeta raíz pero, por ejemplo, en una carpeta de activos
Voto a favor del
122

De hecho, debe hacer ambas cosas, para que todos los navegadores encuentren el icono.

Nombrar el archivo "favicon.ico" y ponerlo en la raíz de su sitio web es el método "desalentado" por W3C:

Método 2 (desalentado): poner el favicon en un URI predefinido
Un segundo método para especificar un favicon se basa en usar un URI predefinido para identificar la imagen: "/ favicon", que es relativa a la raíz del servidor. Este método funciona porque algunos navegadores han sido programados para buscar favicons usando ese URI.
W3C - Cómo agregar un favicon a su sitio

Entonces, para cubrir todas las situaciones, siempre hago eso además del método recomendado de agregar un atributo "rel" y señalarlo al mismo archivo .ico.

siburb
fuente
8
Sí, esta es una respuesta más correcta. No hay estándares relacionados con simplemente poner un favicon.icoen la raíz, pero la mayoría de los navegadores solicitarán dicho archivo automáticamente por razones históricas.
Fabrício Matté
10
La razón adecuada para hacer esto no es porque funcione en algunas situaciones , sino porque el mejor método no funciona en algunas situaciones
Jasper
2
Curiosamente, realFaviconGenerator recomienda no declarar el favicon en el encabezado HTML.
Dan Dascalescu
77
Internet Explorer inventó el favicon y lo buscó en la raíz. AFAIK, todos los navegadores hacen esto. Es por eso que recomiendo poner un favicon.ico en la raíz, porque de lo contrario devolverá 404 y la mayoría de los sistemas no almacenan en caché eso ... así que sigue solicitándolo. Coloque un icono allí y se almacenará en caché correctamente.
Stijn de Witt
50

Lo uso por dos razones:

  1. Puedo forzar una actualización del icono agregando un parámetro de consulta, por ejemplo ?v=2. Me gusta esto: <link rel="icon" href="https://stackoverflow.com/favicon.ico?v=2" type="image/x-icon" />

  2. En caso de que necesite especificar la ruta.

nilsi
fuente
¡Impresionante, finalmente descubrí por qué no se mostraba!
whamsicore
Estoy seguro de que esto fue solo un error tipográfico, pero tiene un href relativo allí, lo que significa que no funcionará a menos que todas sus páginas estén en el nivel superior o tenga un archivo favicon.ico en cada subdirectorio.
Chris Cogdon
Para su información para los lectores posteriores, el comentario de Chris Cogdon se corrigió en la edición "9 de septiembre de 16 a las 5:05", por lo que ya no es un problema
Daryn
13

Simplemente agregarlo a la carpeta raíz funciona de una manera, pero descubrí que si necesito cambiar el favicon, puede llevar días actualizarlo ... incluso una actualización de caché no funciona.

Nicole
fuente
No olvides Ctrl-C y Reconstruir.
Jason Glass
9

Muchas personas configuran su ruta de cookies a /. Eso hará que cada solicitud de favicon envíe una copia de las cookies de los sitios, al menos en cromo. Dirigir su favicon a su dominio sin cookies debería corregir esto.

<link rel="icon" href="https://cookieless.MySite.com/favicon.ico" type="image/x-icon" />

Dependiendo de cuánto tráfico obtenga, esta puede ser la razón más práctica para agregar el enlace.

Información sobre cómo configurar un dominio sin cookies:

http://www.ravelrumba.com/blog/static-cookieless-domain/

usuario3907900
fuente