Por qué importa el favicon
El favicon es el iconito que aparece en la pestaña del navegador, en los favoritos y en la pantalla de inicio cuando alguien guarda tu sitio. Es la primera señal visual que un usuario asocia con tu marca, y un sitio sin favicon transmite descuido. Aun siendo pocos píxeles, una identidad clara en ese cuadradito mejora la recordación, la confianza y el reconocimiento.
Por qué un favicon de texto funciona
Las letras escalan mejor que las ilustraciones complejas a tamaños chicos. Un favicon basado en una inicial, dos letras o un símbolo plano es legible incluso a 16 píxeles. Stripe, Linear, Vercel y Notion usan esta lógica: una marca tipográfica monocroma sobre fondo sólido. Como regla: si tu logo no se lee a 16x16, usá una versión simplificada sólo para favicon.
Tamaños y formatos recomendados
- 16x16 y 32x32: pestañas de escritorio.
- 180x180: apple-touch-icon para iOS y Safari.
- 192x192 y 512x512: Android, PWAs y manifest web.
- SVG: si tu icono es vectorial, un SVG cubre todos los tamaños.
Siempre partí de un master de 512x512. Escalar para abajo es seguro; escalar para arriba pixela. Este generador exporta un PNG de 512 que sirve como ese master.
Cómo lo instalás
Subí el archivo al root del proyecto y agregá las tags dentro del <head>:
<link rel="icon" type="image/png" href="/favicon.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />Los frameworks modernos (Astro, Next, Nuxt) tienen una carpeta public/ donde podés tirar el archivo y se sirve automáticamente. Importante: hacé hard refresh, los navegadores cachean los favicons de manera muy agresiva.
Errores comunes
- Demasiado detalle: los gradientes finos desaparecen a 16 px. Usá colores planos.
- Bajo contraste: si fondo y texto son parecidos, el icono se pierde contra la barra del navegador.
- Trazos finos: usá pesos bold o black. Regular se ve débil al escalar.
- Olvidar el modo oscuro: probá tu favicon en temas oscuros de Chrome y Firefox.
Buenas prácticas de diseño
Mantené coherencia con tu paleta principal: el favicon es una versión condensada del logo, no una ilustración separada. Si tenés un símbolo o monograma, es el candidato ideal. Si no, una inicial en una tipografía con carácter alcanza. Probá el resultado sobre fondos claros y oscuros antes de publicar, y verificá la legibilidad en pestañas reales después del deploy.