code - favicon html w3schools
¿Es necesario agregar una etiqueta de enlace para favicon.ico? (5)
¿Hay navegadores modernos que no detecten 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 ir con GIF o PNG ...
<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" />
¡Todo depende del formato de imagen que te guste usar!
si tiene un ícono de su sitio web, ¡será mucho mejor para UX!
La conclusión no es que todos los navegadores buscarán realmente su archivo favicon.ico . 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á examinado, debe definirlo.
Podemos agregar para todos los dispositivos con 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">
Para elegir una ubicación o tipo de archivo diferente (por ejemplo, PNG o SVG ) para el favicon:
Una de las razones 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 puede ser incluso una CDN, al igual que SO parece hacer con <link rel="shortcut icon" href="http://cdn.sstatic.net//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 almacenamiento en memoria caché :
Agregue una cadena de consulta a la ruta para fines de prevención del almacenamiento en caché:
<link rel="icon" href="/favicon.ico?v=1.1">
Los favicons están muy almacenados en caché y es una excelente manera de garantizar una actualización.
Nota al pie sobre la ubicación predeterminada:
En cuanto al primer bit de la pregunta: todos los navegadores modernos detectarían un favicon en la ubicación predeterminada, por lo que ese no es un motivo para usar un link .
Nota al pie sobre rel="icon" :
Como se indica mediante la respuesta de @Semanino , usar rel="shortcut icon" es una técnica anterior que era necesaria en versiones anteriores de Internet Explorer, pero en la mayoría de los casos se puede reemplazar por la instrucción rel="icon" más correcta. El artículo @Semanino basó esto en los enlaces adecuados a las especificaciones apropiadas que muestran que un valor rel de shortcut no es una opción válida.
Tenga en cuenta que tanto la especificación HTML5 de W3C como la de WhatWG estandarizan
<link rel="icon" href="/favicon.ico">
¡Tenga en cuenta el valor del atributo "rel"!
El shortcut icon valor para el atributo rel es una extensión específica muy antigua de Internet Explorer y está en desuso .
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