La primera impresión de 16 píxeles
Los favicons son la superficie de marca más pequeña que posees (16×16 píxeles en una pestaña del navegador) y una de las más visibles. Los usuarios identifican tu sitio entre 30 pestañas abiertas por ese diminuto cuadrado. Un favicon ausente o borroso señala discretamente «inacabado». La buena noticia: hacerlo bien toma unos dos minutos.
¿Qué tamaños necesitas realmente en 2026?
- 16×16 y 32×32: pestañas del navegador y marcadores (dentro del archivo .ico)
- 48×48: accesos directos de la barra de tareas de Windows (dentro del archivo .ico)
- 180×180: icono táctil de Apple para la pantalla de inicio de iOS
- 192×192 y 512×512: iconos de manifiesto de Android / PWA
- SVG (opcional pero recomendable): infinitamente nítido en navegadores modernos con un solo archivo diminuto
El clásico favicon.ico es en realidad un contenedor con las versiones de 16, 32 y 48 px: los navegadores eligen la adecuada. Nuestro generador de favicons construye el ICO multitamaño correcto más todos los PNG a partir de una sola imagen de origen.
Empieza con la imagen de origen correcta
Aquí es donde fallan la mayoría de los favicons. No reduzcas tu logotipo completo y detallado: a 16 px se convierte en barro. En su lugar:
- Usa una marca simplificada: solo la parte de icono de tu logotipo, o incluso una sola letra sobre un fondo del color de marca
- Parte de un PNG cuadrado de 512×512 o más con la marca centrada y con relleno (mantén ~15 % de margen para que no toque los bordes)
- Diseña pensando en tamaño pequeño: formas contundentes, alto contraste, sin líneas finas ni texto pequeño
Prueba a 16 px temprano y a menudo: si no es legible ahí, simplifica más.
Pestañas en modo oscuro: el truco
La interfaz del navegador ahora sigue el modo oscuro del sistema, así que un favicon oscuro sobre un fondo de pestaña oscuro desaparece. Dos soluciones: añade un fondo claro sutil o un cuadrado redondeado detrás de tu marca, o proporciona un favicon SVG que responda a prefers-color-scheme. Como mínimo, previsualiza tu favicon contra barras de pestañas claras y oscuras antes de publicarlo.
Genera el tuyo de una vez
Sube tu imagen de origen a nuestro generador de favicons: produce el ICO multitamaño, todos los tamaños PNG y una vista previa en vivo a tamaños reales de pestaña. Descarga individualmente o toma todo como ZIP, coloca los archivos en la raíz de tu sitio y añade las etiquetas link. Dos minutos, bien hecho.
Preguntas frecuentes
- ¿ICO sigue siendo necesario o basta con PNG?
- ICO sigue siendo la opción predeterminada más segura: cada navegador lo admite, incluidos los antiguos, y agrupa varios tamaños en una solicitud. Sirve los tamaños PNG junto a él para móvil/PWA. Cinturón y tirantes, costo insignificante.
- ¿Por qué mi favicon se ve borroso?
- Casi siempre una de dos causas: ampliaste una imagen de origen pequeña (parte de 512 px o más) o el navegador está estirando tu icono de 16 px a 32 px en una pantalla retina (envía el ICO multitamaño para que elija correctamente).
- ¿Cómo añado el favicon a mi sitio?
- Coloca
favicon.icoen la raíz de tu sitio (los navegadores lo buscan allí automáticamente) y añade etiquetas<link rel="icon">para los tamaños PNG másapple-touch-icon. Si usas Next.js, la convenciónapp/icon.pngmaneja la mayor parte por ti.