Sobre Generador de tamaños de favicon
El generador de tamaños de favicon de Zyff crea todos los tamaños de una vez a partir de una sola imagen: las imágenes clásicas de 16, 24, 32, 48, 64, 128 y 256 px dentro de un único favicon.ico, PNG sueltos de 16, 32, 48, 64, 96, 128, 144, 192, 256 y 512, los iconos apple-touch de 120, 152, 167 y 180, los tamaños de Android y PWA de 48 hasta 512, un icono enmascarable, el manifiesto web que los referencia y el XML de mosaico de Windows. Todo llega con el fragmento del head ya escrito, y puedes descargar el conjunto entero en un zip. La generación corre en los servidores de Zyff desde un maestro de 1024 px, en memoria, y lo que subes nunca se conserva.
Cómo generar todos los tamaños de favicon
Sube una imagen maestra
Suelta la versión cuadrada más grande que tengas. Un origen de 512 px es el mínimo práctico y 1024 px o un vector es mejor: todos los tamaños de abajo se reducen a partir de un único render maestro en vez de remuestrearse unos de otros, y eso es lo que mantiene legible la versión de 16 px.
Revisa la selección de tamaños
Esta página arranca con todos los tamaños marcados. Desmarca los que sepas que no necesitas — el de 128 y el de 384 se piden pocas veces — o déjalos todos y que el zip se lleve el lote.
Mira la vista previa de 16 px
El icono más pequeño es el que decide si el conjunto funciona. El detalle que se lee a 512 px se convierte en barro a 16, y este es el momento de simplificar el original y no después de haber pegado las etiquetas.
Descarga el zip
Un solo archivo comprimido con todos los ficheros en las rutas que referencia el fragmento generado, para que el HTML funcione en cuanto los archivos estén en su sitio.
Pega el fragmento del head
Copia las etiquetas link generadas en tu <head>. Cada una lleva un atributo sizes explícito, que es lo que le permite a un navegador o a un rastreador elegir el archivo correcto en vez de adivinar.
Qué hace Generador de tamaños de favicon
Todos los tamaños en una pasada
ICO de 16 a 256, PNG de 16 a 512, apple-touch en cuatro tamaños, Android y PWA de 48 a 512, además de un icono enmascarable. Sin una segunda subida y sin volver a generar cada tamaño.
Un maestro y luego reducciones
El origen se genera una vez a 1024 px y todos los elementos se reducen a partir de ahí. Encadenar reducciones — de 512 a 256 a 128 — acumula error de remuestreo, y eso se nota primero a 16 px.
Atributos sizes escritos por ti
En el estilo de marcado completo, cada enlace PNG declara su propio valor de sizes, así que el navegador puede elegir el archivo adecuado sin descargar el resto, y los tamaños declarados siempre coinciden con los archivos del ZIP.
Manifiesto y XML de mosaico incluidos
El manifiesto web que referencia los tamaños de Android y el XML de browserconfig para los mosaicos antiguos de Windows se generan junto a las imágenes, apuntando a las mismas rutas.
Descarga en zip
Todo el conjunto en un único archivo comprimido, ordenado para que encaje con el fragmento, así que no hay nada que renombrar.
At a glance
| Tamaños ICO disponibles | 16, 24, 32, 48, 64, 128 y 256 px, en un único archivo con varias imágenes |
|---|---|
| Tamaños PNG disponibles | 16, 32, 48, 64, 96, 128, 144, 192, 256 y 512 px |
| Tamaños apple-touch | 120, 152, 167 y 180 px (el de 180 es el único que necesita el iOS actual) |
| Tamaños de Android y PWA | 48, 72, 96, 144, 192, 256, 384 y 512 px, más un enmascarable de 512 px |
| Render maestro | 1024 px, con todos los elementos reducidos a partir de él |
| Entrada | PNG, JPG, WebP, AVIF o SVG de hasta 25 MB y 100 megapíxeles |
| Archivos de texto generados | site.webmanifest y browserconfig.xml |
Frequently asked questions
¿Qué tamaños de favicon necesito de verdad en 2026?
Un mínimo práctico es un PNG de 32 px, un apple-touch-icon de 180 px, uno de 192 px y otro de 512 px para Android y el manifiesto, y un favicon.ico con 16 y 32 para lo antiguo. Para el icono que Google muestra junto a tu resultado de búsqueda vale cualquier cuadrado de 8x8 o más, y Google recomienda más de 48x48, algo que el de 180 y el de 192 ya cubren. El resto de la matriz es un seguro y no un requisito.
¿Necesita Google un favicon cuyo tamaño sea múltiplo de 48 px?
Ya no. La documentación de Google pedía antes un múltiplo de 48 px, y muchos generadores aún lo repiten, pero las directrices actuales solo piden un cuadrado de al menos 8x8 px y recomiendan uno de más de 48x48. Una web que solo publica iconos de 16 y 32 px es elegible, aunque menos nítida; si un favicon aparece en la pestaña pero no en la búsqueda, comprueba que tu página de inicio lo enlaza y que Google puede rastrear ambos.
¿Qué tamaño pide cada navegador o sistema operativo?
Los navegadores de escritorio cogen el PNG más pequeño que les sirva para la pestaña, normalmente el de 16 o el de 32. iOS usa apple-touch-icon a 180 y lo reduce para dispositivos más pequeños. Android y las PWA instaladas leen el manifiesto y cogen el de 192 para el lanzador y el de 512 para la pantalla de inicio. Los mosaicos anclados de Windows leen browserconfig.xml. El .ico es el respaldo que probará cualquier cosa no listada.
¿Un favicon más grande es siempre mejor?
No, y aquí es donde se tuercen casi todos los juegos de iconos. Un icono de 512 px reducido a 16 px por el navegador se ve peor que un archivo de 16 px dibujado a propósito, porque la reducción del navegador es rápida y no cuidadosa. Publicar los tamaños pequeños como archivos de verdad es toda la razón de que exista la matriz en vez de un único PNG grande.
¿Tengo que usar todos los archivos del zip?
No. Publica lo que tu web necesite y borra el resto: un PNG de 384 px sin usar no cuesta nada más que desorden. Lo que importa es que todos los archivos que referencia el fragmento del head existan de verdad en la ruta que nombran; una etiqueta link que apunta a un icono que falta es peor que ninguna etiqueta.
¿Dónde van los archivos?
La raíz del sitio es el lugar convencional y el que da por hecho el fragmento predeterminado, porque /favicon.ico se pide desde la raíz lo declares o no. Si sirves los iconos desde un subdirectorio, fija la ruta base antes de copiar el fragmento para que todos los href coincidan.