¿Cuál es actualmente la mejor manera de hacer que un favicon se muestre en todos los navegadores que admiten favicons?
https://stackoverflow.com/questions/37073
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
¿Cuál es actualmente la mejor manera de hacer que un favicon se muestre en todos los navegadores que lo admiten actualmente?
Por favor incluya:
Qué formatos de imagen son compatibles con qué navegadores.
Qué líneas se necesitan y en qué lugares para los distintos navegadores.
Solución
Prefiero un cinturón y tirantes aquí.
Creo un ícono de 32x32 tanto en el .ico y .png formatos llamados favicon.ico y favicon.png.El nombre del icono realmente no importa a menos que se trate de navegadores más antiguos.
- Lugar
favicon.icoen la raíz de su sitio para admitir navegadores más antiguos (opcional y solo relevante para navegadores más antiguos). - Coloque favicon.png en mi subdirectorio de imágenes (solo para mantener todo ordenado).
- Agregue el siguiente HTML dentro del
<head>elemento.
<link rel="icon" href="/images/favicon.png" type="image/png" /> <link rel="shortcut icon" href="/favicon.ico" />
Tenga en cuenta que:
- El tipo MIME para
.icoLos archivos fueron registrados como image/vnd.microsoft.icon por el IANA. - Internet Explorer ignorará el
typeatributo para la relación del icono de acceso directo y este es el único navegador que admite esta relación, no es necesario proporcionarlo.
Otros consejos
Utilizo el formato .ico y pongo las siguientes dos líneas dentro del <head> elemento:
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
Para admitir también íconos táctiles para tabletas y teléfonos inteligentes, prefiero el enfoque de HTML5 repetitivo
Puede encontrar más información sobre los iconos táctiles en Este artículo.
Con el estado actual de compatibilidad con el navegador, ni siquiera es necesario agregar la etiqueta HTML para el favicon en su documento.Los navegadores buscarán automáticamente una lista de archivos, vea este ejemplo para iOS:
Si no se especifican íconos en el HTML, iOS Safari buscará en el directorio raíz del sitio web en busca de iconos con el prefijo Apple-Touch-Icon o Apple-Touch-Icon Prefijo.Por ejemplo, si el tamaño de icono apropiado para el dispositivo es de 57 × 57 píxeles, iOS busca nombres de archivo en el siguiente orden:
- icono-toque-de-manzana-57x57-precompuesto.png
- icono-toque-de-manzana-57x57.png
- icono-toque-de-apple-precompuesto.png
- icono-toque-de-manzana.png
Mi consejo es no incluir un favicon en su documento, pero tener una lista de archivos lista en el sitio web raíz:
- icono-toque-de-manzana-114x114-precompuesto.png
- icono-toque-de-manzana-144x144-precompuesto.png
- icono-toque-de-manzana-57x57-precompuesto.png
- icono-toque-de-manzana-72x72-precompuesto.png
- icono-toque-de-apple-precompuesto.png
- icono-toque-de-manzana.png
(57px*57px) - favicon.ico
HiDPI (32x32px)
Cuando descargas una plantilla de html5boilerplate.com Todos estos están incluidos, sólo tienes que reemplazarlos con tus propios íconos.
IE6 no puede manejar archivos PNG correctamente, tenga cuidado.
Favicon debe ser un archivo .ico para funcionar correctamente en todos los navegadores.
Los navegadores modernos también admiten imágenes PNG y GIF.
Descubrí que, en general, la forma más sencilla de crear uno es utilizar un servicio web disponible gratuitamente, como favicon.cc.
También hay un sitio donde puedes comprobar cómo se hace el favicon de cualquier página.
Allí puedes ver un tutorial sobre cómo hacer favicons, tipos de imágenes y resoluciones, ¡está bueno!
Teniendo un favicon.* en su directorio raíz es detectado automáticamente por la mayoría de los navegadores.Puede asegurarse de que se detecte utilizando:
<link rel="icon" type="image/png" href="/path/image.png" />
Personalmente uso imágenes .png pero la mayoría de los formatos deberían funcionar.
