¿Cómo agregar un ícono de pestaña del navegador (favicon) para un sitio web?
He estado trabajando en un sitio web y me gustaría agregar un pequeño ícono a la pestaña del navegador.
¿Cómo puedo hacer esto en HTML y en qué parte del código necesitaría colocarlo (por ejemplo, encabezado)? Tengo un .pngarchivo de logotipo que me gustaría convertir en un icono.
Relacionado: Imagen configurada HTML en la pestaña del navegador .
En realidad, existen dos formas de agregar un favicon a un sitio web.
<link rel="icon">
Simplemente agregue el siguiente código al <head>elemento:
<link rel="icon" href="http://example.com/favicon.png">
Los favicons PNG son compatibles con la mayoría de los navegadores, excepto IE <= 10 . Para compatibilidad con versiones anteriores, puede utilizar favicons de ICO.
Tenga en cuenta que ya no es necesario anteponer iconel relatributo conshortcut . De los tipos de enlaces MDN :
El
shortcuttipo de enlace se ve a menudo antesicon, pero este tipo de enlace no es conforme, se ignora y los autores web no deben usarlo más .
favicon.icoen el directorio raíz
De otra respuesta SO (por @mercator ):
Todos los navegadores modernos (probados con Chrome 4, Firefox 3.5, IE8, Opera 10 y Safari 4) siempre solicitarán un
favicon.icoa menos que hayas especificado un icono de acceso directo a través de<link>.
Entonces todo lo que tienes que hacer es hacer que la /favicon.icosolicitud a tu sitio web te devuelva tu favicon. Lamentablemente, esta opción no le permite utilizar un icono PNG.
Consulte también favicon.png vs favicon.ico: ¿por qué debería usar PNG en lugar de ICO?
- Utilice una herramienta para convertir su png a un archivo ico. Puede buscar "generador de favicon" y encontrará muchas herramientas en línea.
Coloque la dirección ico con
headunalinketiqueta:<link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">
