¿Es necesario agregar una etiqueta de enlace para favicon.ico?

153

¿Hay algún navegador moderno que no detecte el favicon.ico automáticamente? ¿Hay alguna razón para agregar la etiqueta de enlace para favicon.ico?

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

Supongo que solo es necesario incluirlo en el documento HTML si decides utilizar GIF o PNG ...

html favicon html-head usuario1087110
fuente
Nunca he visto que ningún navegador lo haya necesitado. ¿Tienes algún ejemplo?
shark555
Puedo nombrar algunos navegadores que tienen configuraciones de preferencias para buscarlos favicon.icoautomáticamente o no . Entonces, si desea asegurarse de que su icono aparezca, mejor incluya un enlace en su HTML. Por cierto, los archivos .png suelen ser más pequeños que los archivos .ico comparables.
Sr. Lister el
Por favor, nombre algunos Sr. Lister :) No shark555, no puedo nombrar a ninguno ...
user1087110
55
Firefox (y otros navegadores basados ​​en Gecko como SeaMonkey) tiene varias configuraciones para ajustar su comportamiento. browser.chrome.faviconsestablecido en verdadero buscará favicon.ico en la raíz; si es falso, solo cargará un ícono si se especifica en la página HTML. Ver kb.mozillazine.org/Browser.chrome.favicons y páginas relacionadas.
Sr. Lister el
Posible duplicado de ¿Tiene que incluir <link rel = "icon" href = "favicon.ico" type = "image / x-icon" />?
Dan Dascalescu

Respuestas:

253

Para elegir una ubicación o tipo de archivo diferente (por ejemplo, PNG o SVG ) para el favicon:
Una razón puede ser que desee tener el icono en una ubicación específica, tal vez en la carpeta de imágenes o algo similar. Por ejemplo:

<link rel="icon" href="_/img/favicon.png">

Esta ubicación diferente incluso puede ser una CDN, al igual que SO parece hacer con <link rel="shortcut icon" href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">.

Para obtener más información sobre el uso de otros tipos de archivos como PNG, consulte esta pregunta .

Para fines de eliminación de caché :
agregue una cadena de consulta a la ruta para fines de eliminación de caché:

<link rel="icon" href="/favicon.ico?v=1.1">

Los favicons están muy almacenados en caché y esta es una excelente manera de garantizar una actualización.

Nota al pie sobre la ubicación predeterminada: en
cuanto a la primera parte de la pregunta: todos los navegadores modernos detectarían un favicon en la ubicación predeterminada, por lo que esa no es una razón para usar un linkpara ello.

Nota al pie sobre rel="icon":
Como lo indica la respuesta de @ Semanino , el uso rel="shortcut icon"es una técnica antigua que era requerida por las versiones anteriores de Internet Explorer, pero en la mayoría de los casos puede ser reemplazada por la rel="icon"instrucción más correcta . El artículo @Semanino basa esto en enlaces adecuados a la especificación apropiada que muestra que el relvalor de shortcutno es una opción válida.

Jeroen
fuente
¿Debería esto ir en la <head>etiqueta?
Max Williams
1
@MaxWilliams Sí. (Consulte "Elementos principales permitidos" en los documentos MDN o "Contextos" en la especificación W3 ).
Jeroen
1
Es 2016, y Chrome todavía (¿o de nuevo?) No reconoce el favicon.ico predeterminado en la raíz si especifica también otros íconos ...
Sebastian G. Marinescu
52

Tenga en cuenta que tanto la especificación HTML5 de W3C como WhatWG se estandarizan

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

¡Tenga en cuenta el valor del atributo "rel"!

El valor shortcut icondel relatributo es una extensión específica de Internet Explorer muy antigua y obsoleta .

Por lo tanto, considere no usarlo más y actualizar sus archivos para que cumplan con los estándares y se muestren correctamente en todos los navegadores.

También es posible que desee echar un vistazo a esta gran publicación: rel = "icono de acceso directo" considerado perjudicial

Semanino
fuente
1
No del todo "en desuso" (nunca fue parte de ninguna especificación). Sin embargo, la especificación HTML5 establece: "Por razones históricas, la palabra clave de icono puede ir precedida por la palabra clave" acceso directo ". Si la palabra clave" acceso directo "está presente, debe aparecer inmediatamente antes de la palabra clave de icono y las dos palabras clave deben estar separadas por un solo carácter U + 0020 SPACE ". También tenga en cuenta que, "No hay un tipo predeterminado para los recursos dados por la palabra clave de icono".
DocRoot
12 
<link rel="icon" type="image/x-icon" href="http://example.com/favicon.ico" />
<link rel="icon" type="image/png" href="http://example.com/favicon.png" />
<link rel="icon" type="image/gif" href="http://example.com/favicon.gif" />
<link rel="icon" type="image/jpeg" href="http://example.com/favicon.jpeg" />
<link rel="icon" type="image/webp" href="http://example.com/favicon.webp" />

¡Todo depende del formato de imagen que te guste usar!
Si tiene un icono de su sitio web, ¡será mucho mejor para UX!

manifestación

mostrar logo en la pestaña del navegador

ingrese la descripción de la imagen aquí

xgqfrms
fuente
iconhandbook.co.uk/reference/examples/favicons links: mathiasbynens.be/notes/rel-shortcut-icon#comments links: html.spec.whatwg.org/multipage/semantics.html#rel-icon links:
xgqfrms
UX no tiene nada que ver con esto.
Paddotk
@paddotk, lo que quiero decir es que el usuario puede decir fácilmente qué pestaña pertenece al sitio web de destino cuando se abren varias pestañas en el navegador si aparece un icono de favicon en la pestaña.
xgqfrms
1

Podemos agregar para todos los dispositivos con un tamaño específico de plataforma

<link rel="apple-touch-icon" sizes="57x57" href="fav_icons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="fav_icons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="fav_icons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="fav_icons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="fav_icons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="fav_icons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="fav_icons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="fav_icons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="fav_icons/apple-icon-180x180.png">

<link rel="icon" type="image/png" sizes="192x192"  href="fav_icons/android-icon-192x192.pn">
<link rel="icon" type="image/png" sizes="32x32" href="fav_icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="fav_icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="fav_icons/favicon-16x16.png">
Abhilash
fuente
0

La conclusión es que no todos los navegadores va a mirar realmente para su favicon.ico archivo. Algunos navegadores permiten a los usuarios elegir si deben verse automáticamente o no. Por lo tanto, para asegurarse de que siempre aparecerá y será visto, debe definirlo.

animuson
fuente
66
Gracias por tu comentario animuson. ¿Puedes nombrar algunos navegadores que no se vean automáticamente?
user1087110
11
@ user1087110: no sé nada de mi cabeza, y honestamente a quién le importa. El punto es que no puedes asumir que lo hará y debes dar cuenta de aquellos que no lo harán.
animuson
Como ya no es relevante, puede eliminar su respuesta para limpiar la página.
pollos