Un favicon que se adapta al modo oscuro
Solo el SVG puede responder al tema del navegador. Incrusta un <style> con una consulta prefers-color-scheme dentro del propio SVG: el navegador la aplica al renderizar el icono. Así un logo oscuro sigue siendo visible en una barra de pestañas oscura:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
path { fill: #111; }
@media (prefers-color-scheme: dark) { path { fill: #fff; } }
</style>
<path d="…your icon path…"/>
</svg>
Referéncialo como <link rel="icon" href="/icon.svg" type="image/svg+xml">. Mantén un favicon.ico normal junto a él para los navegadores y Google Search, que no ejecutarán la media query.
Icono de pestaña anclada de Safari
Cuando alguien ancla tu pestaña en Safari de escritorio, este usa un SVG aparte, plano y de un solo color (un «mask icon»): solo forma, sin degradados:
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#F0562E">
El atributo color define el tinte del anclaje. Exporta una versión monocroma de tu símbolo para esto; cualquier cosa con detalles finos o varios colores se renderizará como una mancha sólida.
Iconos maskable y la zona segura
Los iconos adaptativos de Android recortan tu imagen en un círculo, un squircle o un cuadrado redondeado según el lanzador. A un icono normal le cortan las esquinas. Marca los iconos del manifest como maskable y mantén el contenido importante dentro de la «zona segura» central: aproximadamente el 80 % central, es decir, un margen de ~10 % en cada lado:
{ "src": "/android-chrome-512x512.png", "sizes": "512x512",
"type": "image/png", "purpose": "any maskable" }
Diseña con un color de fondo a sangre completa y el logo cómodamente dentro de ese margen, para que ninguna forma lo recorte.
theme-color: la barra alrededor del icono
No es el favicon en sí, pero en móviles queda justo al lado: theme-color tiñe la interfaz del navegador y la barra de direcciones. También puede reaccionar al tema:
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#111316" media="(prefers-color-scheme: dark)">
Qué contiene en realidad un .ico de verdad
Un .ico adecuado es un contenedor que alberga varios mapas de bits a la vez, normalmente de 16, 32 y 48 píxeles. El navegador elige el tamaño que necesita para cada superficie (pestaña, barra de marcadores o acceso directo de Windows), así que nunca tiene que ampliar una imagen de 16 px ni reducir una de 512 px. Un «favicon.ico» que en realidad es un único PNG renombrado pierde eso y se ve difuso en algunos tamaños. Este generador escribe un ICO multitamaño de verdad.
Reglas de favicon de Google Search
Para que tu icono aparezca junto a tu resultado, Google exige todo lo siguiente: el favicon reside en una URL constante; es cuadrado y múltiplo de 48×48 (48, 96, 144…); está en el mismo host que el sitio; la página que lo aloja es indexable; y el icono es visualmente claro. Google lo obtiene y lo guarda en caché con su propio rastreador, aparte de la página, así que después de un cambio deja pasar de días a semanas y confirma que /favicon.ico devuelve 200 a Googlebot.
Mantén los archivos pequeños
- SVG: elimina los metadatos y comentarios del editor; un SVG de icono limpio suele pesar menos de 1 KB.
- ICO: solo 16/32/48; resiste la tentación de añadir 64/128/256, que inflan el archivo sin ningún beneficio.
- PNG: el icono de 512 es el más pesado; pásalo por un optimizador sin pérdidas.
Pruébalo donde realmente se ve
No te fíes de un solo navegador. Comprueba: una pestaña normal (clara y oscura), un marcador, un «Añadir a la pantalla de inicio» de iOS, una instalación en Android y el resultado de Google una vez que vuelva a rastrear. Una forma rápida de forzar una lectura limpia mientras pruebas es una ventana privada más un parámetro ?v= en las URL de los iconos.