Cómo añadir un favicon en HTML
Añadir un favicon a una página HTML simple es un cambio de una línea — pero la configuración moderna completa son seis líneas y cubre iOS, Android, modo oscuro e instalación PWA.
La etiqueta única que todos los navegadores respetan es <link rel="icon" href="/favicon.ico">. Coloca favicon.ico en la raíz de tu sitio y tendrás el 80 % resuelto.
El 20 % restante — apple-touch-icon, variantes PNG, SVG con soporte de modo oscuro y un webmanifest — es lo que separa un icono por defecto de una experiencia de marca cuidada.
Cómo funciona
- 1
Genera tu paquete de favicon
Usa el generador de paquetes de FetchFavicon — produce todos los archivos que necesitas más el código listo para pegar.
- 2
Coloca los archivos en la raíz del sitio
favicon.ico, apple-touch-icon.png, android-chrome-192/512.png, site.webmanifest.
- 3
Pega el fragmento en <head>
Seis etiquetas <link> + una <meta name="theme-color">.
Pruébalo ahora
Obtén el fragmento HTML
Generador de FaviconPreguntas frecuentes
¿Dónde van las etiquetas <link>?+
Dentro de <head>, en cualquier posición — el orden no importa siempre que aparezcan antes de </head>.
¿Necesito tanto .ico como PNG?+
Sí. .ico es el respaldo universal; PNG se ve más nítido en pantallas de alta densidad.
¿Qué hay del modo oscuro?+
Publica una variante SVG que incluya una media query prefers-color-scheme dentro de su bloque <style>.