Generador de Favicon: La Guía Completa del .ICO (2026)

El favicon, ese icono de 16×16 píxeles junto al título de la pestaña, es uno de los detalles más ignorados de la web. La mayoría de sitios o no llevan favicon (mostrando el icono genérico del navegador, la señal universal de un sitio sin terminar) o suben un JPEG renombrado a .ico (que no funciona de forma consistente entre navegadores).

Esta guía cubre cómo se ve una implementación de favicon en condiciones para 2026: los formatos que necesitas, los tamaños que importan, el soporte de modo oscuro y cómo instalarlo correctamente. Todo generado en local, tu logo nunca sube a un servidor.

Por qué los favicons importan más de lo que crees

Un favicon hace tres cosas a la vez:

1. Identifica tu sitio en pestañas, marcadores e historial.
2. Refuerza el reconocimiento de marca cuando el usuario tiene varias pestañas abiertas.
3. Señala profesionalidad. Los sitios sin favicon decente parecen sin terminar, hasta marcas grandes fallan en esto.

Hay estudios que muestran que usuarios con 10+ pestañas abiertas identifican un sitio por su favicon antes de leer el título. Tu favicon es una parcela que merece tomarse en serio.

ICO vs PNG vs SVG

ICO (favicon.ico)

El formato original de favicon, introducido por Microsoft en 1999. Su superpoder: es un contenedor. Un único archivo .ico aloja varias imágenes codificadas como PNG en distintas resoluciones (típicamente 16×16, 32×32, 48×48). El navegador o el sistema operativo elige la correcta según el contexto.

Úsalo para: máxima compatibilidad, sobre todo accesos directos de escritorio en Windows y firmas de email en Outlook.

PNG (favicon-32x32.png, favicon-192x192.png, etc.)

Los navegadores modernos (Chrome, Firefox, Safari, Edge) prefieren PNG. Renderizado más nítido, soporte de canal alfa, archivo más pequeño que ICO con la misma calidad.

Úsalo para: navegadores modernos, Apple Touch Icons (iOS), iconos PWA de Android Chrome, tiles de Windows.

SVG (favicon.svg)

Formato vectorial. Nítido a cualquier resolución, soporta CSS y rellenos sensibles al modo oscuro, mucho más pequeño que PNG para iconos simples.

Úsalo para: prepararte para el futuro. Los navegadores modernos (90%+) soportan favicons SVG. Acompáñalo con un fallback PNG para los antiguos.

Buena práctica: envía los tres

<!-- Los navegadores modernos prefieren esto si está disponible -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- Fallback para navegadores modernos -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- Heredado/Windows -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- Pantalla de inicio iOS -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Android PWA + theme color -->
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#c59a6d">

Generador de Favicon emite exactamente este conjunto de archivos más el snippet, listo para desplegar.

Los tamaños que de verdad importan

Tamaño	Nombre de archivo	Usado por
16×16	dentro de favicon.ico	Pestaña del navegador, barra de direcciones
32×32	favicon-32x32.png + dentro de favicon.ico	Pestaña high-DPI, barra de tareas
48×48	dentro de favicon.ico	Acceso directo de escritorio en Windows
180×180	apple-touch-icon.png	Pantalla de inicio iOS, watchOS
192×192	android-chrome-192x192.png	Pantalla de inicio Android
512×512	android-chrome-512x512.png	Splash screen Android, PWA
150×150	mstile-150x150.png	Tile de Inicio de Windows 10/11
infinito	favicon.svg	Navegadores modernos, retina

No necesitas todos para un sitio básico, pero un generador que los produzca todos no cuesta nada extra y te deja a prueba de futuro.

Favicons en modo oscuro (buena práctica 2026)

Los navegadores modernos soportan favicons sensibles al modo oscuro vía SVG con CSS:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    path { fill: #000; }
    @media (prefers-color-scheme: dark) {
      path { fill: #fff; }
    }
  </style>
  <path d="M..."/>
</svg>

El favicon se adapta al tema del sistema operativo del usuario, negro en claro, blanco en oscuro. Algunos usuarios (desarrolladores, defensores de la accesibilidad) buscan activamente este detalle.

Buenas prácticas para la imagen fuente

Antes de generar, prepara la fuente:

1. Cuadrada. Mínimo 512×512, idealmente 1024×1024. Las fuentes no cuadradas se recortan o se rellenan.
2. Simple. A 16×16 píxeles, los logos complejos se vuelven una papilla ilegible. Prueba bizqueando tu logo sobre una rejilla de 16 píxeles: ¿lo reconoces?
3. Alto contraste. El icono tiene que leerse contra cualquier color de pestaña (claro u oscuro). Apunta a una ratio de contraste interno de al menos 4.5:1.
4. Fondo transparente (PNG/SVG). Los fondos sólidos quedan acartonados en las tiras de pestañas que tienen padding.

Si tu logo completo es demasiado detallado, haz una marca simplificada para el favicon, una sola letra, un icono, una forma abstracta. Muchas marcas lo hacen (la manzana de Apple, el pájaro de Twitter, los círculos de Spotify).

Privacidad: por qué la generación local importa

El secreto sucio de los generadores de favicon online: la mayoría sube el logo fuente a su servidor, genera los iconos y te manda un enlace por email.

Eso significa que la identidad de tu marca aún no lanzada está en hardware ajeno. Para una startup en stealth, un proyecto de cliente bajo NDA o el lanzamiento de un producto, eso es inaceptable.

La alternativa: generación local con HTML5 Canvas + WebAssembly para codificar ICO. Generador de Favicon de DuneTools hace exactamente eso, tu logo nunca sale del navegador, la generación tarda unos cientos de milisegundos, te descargas un ZIP con las 12 variantes de archivo más el snippet HTML.

Checklist de despliegue

1. ✅ Coloca todos los archivos generados en la raíz de tu sitio (/favicon.ico, /favicon.svg, etc.). La mayoría de navegadores miran ahí automáticamente.
2. ✅ Añade las etiquetas <link> y <meta> del generador dentro de <head>.
3. ✅ Añade <link rel="manifest" href="/site.webmanifest"> y crea site.webmanifest con las definiciones de icono (el generador lo crea por ti).
4. ✅ Prueba en pestaña Chrome, Safari, Firefox. Recarga forzada (Cmd+Shift+R o Ctrl+F5), los favicons se cachean con saña.
5. ✅ Añade a la pantalla de inicio del iPhone (Safari, Compartir, Añadir a pantalla de inicio), verifica que el apple-touch-icon se ve.
6. ✅ Prueba en modo oscuro (sistema, cambia tema), verifica que el SVG se adapta.

Errores comunes

1. Renombrar un JPEG a .ico. ICO tiene su propio formato. Renombrar no convierte. Usa un generador.
2. Solo un PNG 16×16. Bien en pestañas, mal en cualquier otro sitio (barra de tareas, pantalla de inicio móvil, splash PWA).
3. Olvidarse del Apple Touch Icon. Cuando los usuarios añaden tu sitio a la pantalla de inicio del iPhone y falta el icono, iOS usa una captura de pantalla. Queda fatal.
4. Sin meta theme-color. Añadir <meta name="theme-color"> hace que Chrome/Safari móvil use el color de tu marca en la barra de direcciones, detalle pequeño, gran impacto.
5. No probar el modo oscuro. Un logo invisible sobre fondos oscuros es un logo que falta en las pestañas de millones de usuarios.

Checklist del mundo real

Antes de lanzar:

• Generado favicon.ico (multi-tamaño 16/32/48)
• Generado favicon.svg con CSS de modo oscuro
• Generados favicon-16x16.png y favicon-32x32.png
• Generado apple-touch-icon.png (180×180)
• Generados android-chrome-192x192.png y 512x512
• Creado site.webmanifest con definiciones de icono
• Añadidas todas las etiquetas <link> dentro de <head>
• Añadido <meta name="theme-color"> que case con la marca
• Recarga forzada y verificado que todos los tamaños se ven bien
• Añadido a la pantalla de inicio iOS, verificado el apple-touch-icon
• Probado modo oscuro, verificado que el SVG se adapta

Resumen

Una implementación completa de favicon para 2026 son 8-12 archivos, se generan en 5 minutos con la herramienta correcta y mejoran de forma notable la profesionalidad percibida de tu sitio. No te saltes ningún formato, no hay buena razón para hacerlo en 2026, y el coste es una sola subida a Generador de Favicon.