Guía de generación ICO/Favicon: iconos de sitio web e iconos PWA

¿Por qué necesitas un Favicon?

Un favicon es el pequeño icono que se muestra en las pestañas del navegador, barras de marcadores y pantallas de inicio del teléfono. Un sitio web profesional debe tener uno — de lo contrario:

La pestaña del navegador muestra un icono en blanco por defecto, reduciendo el reconocimiento de marca
Los usuarios no pueden encontrar rápidamente tu sitio en los marcadores
Las instalaciones PWA carecen de un icono de aplicación

Especificaciones de tamaño de Favicon

Diferentes plataformas y contextos requieren diferentes tamaños:

Tamaño	Propósito	Formato
16×16	Pestaña del navegador (mínimo)	ICO/PNG
32×32	Pestaña del navegador (estándar)	ICO/PNG
48×48	Barra de tareas de Windows	ICO
180×180	Apple Touch Icon (iOS)	PNG
192×192	Android Chrome	PNG
512×512	Icono de inicio PWA	PNG

Sobre el formato ICO

ICO es un formato contenedor — un solo archivo ICO puede contener múltiples tamaños de icono. El navegador selecciona automáticamente el tamaño más apropiado. Por eso un archivo ICO tiene solo unas pocas decenas de KB pero funciona en todos los escenarios.

Uso de la herramienta de generación ICO

Paso 1: Preparar la imagen fuente

Elige una imagen cuadrada de alta resolución como fuente. Recomendaciones:

Al menos 512×512 (se prefiere 1024×1024)
Gráfico simple que siga siendo reconocible en tamaño pequeño
Evitar texto pequeño — ilegible a 16×16

Paso 2: Subir y generar

Abre el Generador ICO
Sube la imagen fuente (PNG, JPG, SVG soportados)
Selecciona los tamaños necesarios (predeterminado: todos — 16, 32, 48, 180, 192, 512)
Haz clic en "Generar"

Paso 3: Descargar archivos

La herramienta produce dos resultados:

favicon.ico — ICO multi-tamaño que contiene 16×16, 32×32, 48×48
favicon-*.png — archivos PNG individuales para cada tamaño

Referenciar Favicon en HTML

Coloca los archivos en la raíz de tu sitio o carpeta public/, luego añade a <head>:

<!-- ICO (soporte para navegadores antiguos) -->
<link rel="icon" href="/favicon.ico" sizes="any">

<!-- PNG (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">

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">

Configuración por framework

Framework	Cómo configurar
Next.js	Colocar en directorio `app/`, autodetectado
Vite	Colocar en directorio `public/`
Nuxt	Colocar en `public/` o `assets/`
Create React App	Colocar en directorio `public/`

Configuración de iconos PWA

PWA requiere declaraciones de iconos en manifest.json:

{
  "name": "My App",
  "icons": [
    {
      "src": "/favicon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Notas sobre iconos maskable

Los iconos maskable de PWA deben tener todo el contenido dentro de la zona segura (80% interior). El 20% exterior puede ser recortado por el sistema operativo en un círculo u otra forma.

Consejos de diseño

Consejo 1: Simplificar el gráfico

Un favicon tiene solo 16×16 píxeles — los diseños complejos se vuelven un borroso desastre. Conserva solo el elemento central:

❌ Logo completo + texto
✅ Gráfico central o primera letra

Consejo 2: Usar SVG como fuente

Las imágenes fuente vectoriales SVG se mantienen nítidas en cualquier tamaño. Convierte SVG a PNG con Conversión de formato antes de generar ICO.

Consejo 3: Soporte para modo oscuro

Los navegadores modernos soportan el atributo media para favicons en modo oscuro:

<link rel="icon" href="/favicon-light.png" media="(prefers-color-scheme: light)">
<link rel="icon" href="/favicon-dark.png" media="(prefers-color-scheme: dark)">

Problemas comunes

¿El ICO generado no se muestra en el navegador?

Verifica que la ruta del archivo sea correcta
Limpia la caché del navegador (Ctrl+Shift+R para forzar actualización)
Comprueba que las etiquetas link estén dentro de <head>

¿El archivo ICO es más grande que un solo PNG?

ICO contiene múltiples tamaños, por lo que es naturalmente más grande. Un ICO típico de 16+32+48 tiene unos 15-30 KB — perfectamente aceptable.

¿Necesito tanto ICO como PNG?

Sí, proporciona ambos. ICO soporta navegadores antiguos; PNG ofrece mejor calidad de renderizado en navegadores modernos.

Herramientas relacionadas

Generador ICO — ICO multi-tamaño + PNG con un clic
Redimensionar imagen — Ajustar imagen fuente al tamaño objetivo
Conversión de formato — SVG a PNG y otras conversiones de formato

Resumen

Los favicons pueden ser pequeños, pero son una parte crucial de la marca de un sitio web. El Generador ICO te permite producir rápidamente un conjunto completo de archivos ICO y PNG a partir de una sola imagen fuente, cubriendo pestañas del navegador, Apple Touch Icons, Android Chrome e iconos de inicio PWA. Recuerda: imagen fuente simple y de alta resolución, ICO multi-tamaño y referencias HTML completas.