Cómo crear un favicon para tu web (guía completa 2026)

Qué es un favicon y por qué importa

Un favicon es el pequeño icono que aparece en las pestañas del navegador, los marcadores, los resultados de búsqueda y la pantalla de inicio del móvil. Es uno de los primeros elementos visuales que la gente asocia con tu marca.

Pese a su tamaño (normalmente de 16×16 a 512×512 píxeles), un favicon tiene un impacto importante:

• Reconocimiento de marca: la gente recorre decenas de pestañas; tu icono les ayuda a encontrar tu web al instante
• Profesionalidad: una web sin favicon parece inacabada o poco profesional
• SEO: Google muestra los favicons en los resultados de búsqueda en móvil, lo que mejora la tasa de clics

Formatos y tamaños de favicon

El favicon ha evolucionado mucho desde el archivo ICO original de 16×16. Esto es lo que esperan hoy los navegadores y las plataformas:

Archivos necesarios

Archivo	Tamaño	Uso
favicon.ico	16×16, 32×32, 48×48	Navegadores antiguos, alternativa universal
favicon-16x16.png	16×16	Navegadores modernos (icono de pestaña)
favicon-32x32.png	32×32	Navegadores modernos (pantallas de alta densidad)
apple-touch-icon.png	180×180	Acceso directo en la pantalla de inicio de iOS
android-chrome-192x192.png	192×192	Pantalla de inicio de Android, PWA
android-chrome-512x512.png	512×512	Pantalla de carga de Android, PWA
site.webmanifest	—	Metadatos PWA para Android/Chrome

El formato ICO

El formato .ico es especial: puede contener varios tamaños de imagen en un solo archivo. El navegador elige automáticamente el más adecuado. Un buen favicon.ico incluye las variantes 16×16, 32×32 y 48×48.

Cómo diseñar un favicon eficaz

Hazlo sencillo

Tu favicon se mostrará a tamaños de solo 16×16 píxeles. Los logotipos complejos con detalles finos no funcionan. Céntrate en:

• Una o dos letras del nombre de tu marca
• Un símbolo o icono sencillo
• Colores con mucho contraste, que destaquen tanto sobre fondo claro como oscuro

Pruébalo en varios tamaños

Un favicon que se ve perfecto a 512×512 puede ser irreconocible a 16×16. Previsualiza siempre el diseño en los tamaños reales en los que se usará, sobre todo 16×16 y 32×32.

Piensa en el modo oscuro

Más del 80 % de los usuarios activan el modo oscuro en su navegador o sistema. Un favicon con fondo oscuro puede desaparecer sobre una barra de pestañas oscura. Elige colores que funcionen sobre fondos claros y oscuros.

Crea tu favicon en 3 pasos

Con el generador de favicons de AwesomeToolkit puedes crear un paquete de favicon completo en menos de un minuto:

1. Elige el origen: sube una imagen, escribe una letra o elige un emoji
2. Personaliza: ajusta la forma, el color de fondo, el margen, los bordes y las sombras
3. Descarga: obtén un ZIP completo con todos los archivos necesarios y el código HTML para pegar

Todo funciona 100 % en tu navegador: tus imágenes nunca salen de tu dispositivo.

Añadir los favicons a tu web

Cuando tengas tu paquete de favicons, añade estas líneas en la sección <head> de cada página:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">

Instrucciones según el framework

Next.js (App Router): coloca los archivos del favicon en la carpeta app/. Next.js los sirve automáticamente.

WordPress: la mayoría de los temas tienen una opción de favicon en Apariencia → Personalizar → Identidad del sitio. También puedes colocar los archivos en la raíz de tu tema.

HTML estático: coloca todos los archivos en la raíz de tu web y añade las etiquetas HTML de arriba.

Errores frecuentes con los favicons

Usar el logotipo completo

El logotipo de tu empresa a 200×80 píxeles no se reduce bien a 16×16. Crea una versión simplificada: normalmente solo el símbolo o la primera letra.

Olvidar el Apple Touch Icon

Sin apple-touch-icon.png, iOS genera una miniatura poco atractiva a partir de una captura cuando alguien añade tu web a la pantalla de inicio. Este PNG de 180×180 es imprescindible.

No incluir el webmanifest

El archivo site.webmanifest indica a Android y Chrome cómo mostrar tu icono como PWA. Sin él, tus iconos de 192×192 y 512×512 no se usan.

Olvidarse de la caché

Los navegadores guardan los favicons en caché de forma muy agresiva. Después de cambiar el tuyo, puede que tengas que vaciar la caché del navegador o añadir un parámetro para forzar la recarga: href="/favicon.ico?v=2".

Comparativa de generadores de favicon

Función	AwesomeToolkit	favicon.io	RealFaviconGenerator
Desde una imagen	Sí	Sí	Sí
Desde un texto	Sí (25 fuentes)	Sí	No
Desde un emoji	Sí (más de 180)	Sí	No
Personalizar la forma	Control de superelipse	Solo círculo/cuadrado	No
Fondos degradados	Sí	No	No
ICO multitamaño	48, 32, 16	48, 32, 16	48, 32, 16
Apple Touch Icon	Sí	Sí	Sí
Webmanifest	Sí	Sí	Sí
Privacidad	100 % en el navegador	100 % en el navegador	Subida a servidor
Precio	Gratis	Gratis	Gratis (API de pago)

Conclusión

Un favicon bien hecho se crea en unos minutos, pero aporta valor cada vez que alguien visita tu web. Refuerza tu marca en las pestañas del navegador, los resultados de búsqueda, los marcadores y la pantalla de inicio del móvil.

Lo que debes recordar:

• Genera todos los tamaños necesarios: no te limites a subir un único PNG
• Mantén un diseño sencillo: tiene que funcionar a 16×16 píxeles
• Pruébalo sobre fondo claro y oscuro: el modo oscuro está en todas partes
• Usa una herramienta que genere el paquete completo: ICO, PNG, Apple Touch Icon y webmanifest