Generador de favicons

Qué archivos de favicon necesita una web en 2026

Durante años, los generadores de favicons producían más de 20 archivos: decenas de tamaños para cada versión de iOS, iconos para Windows 8, browserconfig.xml… Hoy casi todo eso sobra. Los navegadores y sistemas actuales se apañan con cinco archivos, que son los que genera esta herramienta:

Además se incluye el site.webmanifest con el nombre, los colores y las rutas de los iconos, y un favicon-32x32.png por si no tienes SVG.

Cómo crear tu favicon paso a paso

1. Sube tu logo. Lo ideal es un SVG o un PNG cuadrado de 512 px o más. Si no es cuadrado, se centra y se encaja sin deformarlo.
2. Elige el fondo. Transparente queda bien en pestañas, pero en iOS y en el icono maskable siempre hace falta un fondo sólido, así que la herramienta usa blanco o el color que elijas.
3. Ajusta el margen y las esquinas. Un margen del 5-10 % evita que el logo toque los bordes. Las esquinas redondeadas solo se aplican si hay color de fondo.
4. Revisa la vista previa en la pestaña del navegador (modo claro y oscuro) y en la pantalla de inicio de iOS y Android.
5. Descarga el ZIP, copia los archivos a la carpeta pública de tu web y pega el código en el <head>.

El código que tienes que pegar

Para una web HTML normal, este es todo el marcado necesario:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

El orden importa: los navegadores que entienden SVG prefieren icon.svg, y el resto usa el ICO. El atributo sizes="48x48" en el ICO evita un error de Chrome que hacía que eligiera el ICO aunque hubiera un SVG.

En Next.js (App Router) tienes dos opciones. La más sencilla es copiar favicon.ico, icon.svg y apple-icon.png (renombrando apple-touch-icon.png) a la carpeta app/: Next.js genera las etiquetas automáticamente. La otra es dejarlos en /public y declararlos en metadata.icons, que es el código que te da la pestaña Next.js del generador.

En WordPress, ve a Apariencia → Personalizar → Identidad del sitio → Icono del sitio y sube icon-512.png; WordPress genera el resto de tamaños.

Por qué cada tamaño

• 16 y 32 px son los que se ven en las pestañas: 16 en pantallas normales y 32 en pantallas Retina. A ese tamaño los detalles finos desaparecen, así que si tu logo tiene texto pequeño considera usar solo el símbolo o la inicial.
• 48 px lo usan Windows en accesos directos y Google en los resultados de búsqueda. Google pide que el favicon sea múltiplo de 48 px y que se pueda rastrear.
• 180 px es el tamaño que pide iOS para el icono de la pantalla de inicio. iOS no admite transparencia aquí: la rellena con negro, por eso la herramienta siempre le pone fondo.
• 192 y 512 px son los mínimos que exige Chrome para considerar instalable una PWA. El de 512 se usa también en la pantalla de bienvenida.
• Maskable 512 px: Android aplica una máscara con la forma que elija el fabricante. Todo lo importante debe quedar dentro de un círculo que ocupe el 80 % central del icono; por eso esta versión lleva un margen mínimo del 12 %.

Errores comunes con los favicons

• Usar un PNG renombrado a .ico. Algunos navegadores lo aceptan y otros no. El favicon.ico de esta herramienta es un contenedor ICO real con tres PNG dentro.
• Logo demasiado detallado. Un logotipo horizontal con texto se convierte en una mancha a 16 px. Diseña o recorta una versión cuadrada.
• Olvidar el modo oscuro. Un icono negro con fondo transparente desaparece en pestañas oscuras. Revisa la vista previa en ambos modos, o usa un SVG con @media (prefers-color-scheme: dark) dentro.
• Caché del navegador. Los favicons se cachean de forma muy agresiva. Si no ves el cambio, abre directamente /favicon.ico y recarga con Ctrl+F5, o prueba en una ventana privada.
• Iconos sin optimizar. Un icon-512.png exportado desde un editor puede pesar 100 KB. La herramienta los optimiza con OxiPNG sin pérdida, normalmente un 30-60 % menos.

Preguntas frecuentes

¿Necesito todavía un favicon.ico?

Sí. Aunque los navegadores modernos usan SVG o PNG, muchas herramientas, lectores RSS y clientes de correo piden /favicon.ico directamente en la raíz del dominio. Es el archivo con mayor compatibilidad.

¿Qué tamaño debe tener la imagen original?

Lo ideal es un SVG. Si usas PNG o JPG, al menos 512 × 512 px para que el icono de la PWA no se vea borroso. Imágenes menores de 180 px generan iconos grandes pixelados.

¿Por qué mi favicon no aparece en Google?

Google necesita que el favicon esté enlazado en la página de inicio, que sea rastreable (no bloqueado en robots.txt) y que sea cuadrado y múltiplo de 48 px. Puede tardar días o semanas en actualizarse en los resultados.

¿Qué es un icono maskable?

Es una versión del icono con margen de seguridad para que Android pueda recortarla con la forma que use cada fabricante sin cortar el logo. Se declara en el manifest con "purpose": "maskable".

¿Se sube mi logo a algún servidor?

No. Los iconos se dibujan con canvas y se optimizan con WebAssembly en tu navegador. Nada sale de tu dispositivo.

¿Puedo usar un SVG con colores que cambien en modo oscuro?

Sí. Si subes un SVG se incluye tal cual como icon.svg, así que puedes editarlo y añadir una regla @media (prefers-color-scheme: dark) dentro para cambiar sus colores.