Generador de favicon

¿Qué es un generador de favicons?#

Un favicon es el icono diminuto que aparece en una pestaña del navegador, en una lista de marcadores, en la vista previa de «añadir a pantalla de inicio» del teléfono y en un tile de Windows. Lo incómodo es que «un favicon» no es un archivo: distintas plataformas esperan distintos tamaños y nombres de archivo distintos. Un navegador de escritorio quiere el clásico favicon.ico, iOS quiere un apple-touch-icon.png de 180×180, una PWA instalable quiere 192 y 512 en un site.webmanifest, y los navegadores modernos también recogen PNG independientes. Generar todo eso a mano, más las etiquetas <head> que lo cablean, es justo el tipo de tarea tediosa que nunca deberías hacer dos veces a mano.

Esta página produce el conjunto completo a partir de una sola fuente: o una imagen que suministres, o una letra sobre un fondo sólido (útil para una marca rápida de «primera letra»). Elige los tamaños que necesites y lo empaqueta todo en un único .zip: ICO multi-imagen, PNG independientes, el webmanifest y un fragmento HTML que lista las etiquetas exactas <link> y <meta> a pegar. Toda la rasterización ocurre en tu navegador.

Cómo se usa#

1. Elige un Origen:
   • Imagen — arrastra (o elige) cualquier imagen aproximadamente cuadrada. Se dibuja en cada tamaño seleccionado.
   • Letra — escribe uno o dos caracteres (por defecto A), elige un Color de fondo (por defecto azul cielo) y un Color del texto (por defecto blanco). La letra se centra sobre el fondo en cada tamaño.
2. Marca los Tamaños que quieras de entre 16, 32, 48, 180, 192, 512. Los seis están activados por defecto. El 48 solo vive dentro de favicon.ico (sin PNG independiente), así que se empaqueta automáticamente cuando 16 y 32 lo están.
3. Mira el canvas de Vista previa: renderiza el mayor tamaño seleccionado sobre un tablero de transparencia para que puedas ver cualquier zona transparente.
4. Haz clic en Descargar .zip. El archivo contiene, para la selección por defecto de todos los tamaños:
   • favicon.ico — un ICO multi-imagen que empaqueta 16, 32 y 48 como PNG incrustados (el formato Vista+ que todo navegador moderno acepta).
   • favicon-16x16.png, favicon-32x32.png — PNG independientes.
   • apple-touch-icon.png — el icono iOS de 180×180.
   • android-chrome-192x192.png, android-chrome-512x512.png — iconos del manifest PWA.
   • site.webmanifest — referenciando los iconos 192/512, con los colores de tema y de fondo.
   • html-snippet.html — las etiquetas <link rel="icon">, <link rel="apple-touch-icon">, <link rel="manifest"> y <meta name="theme-color">.
5. Descomprime en la raíz de tu sitio, pega el fragmento HTML en tu <head> y los iconos se resuelven desde /.

Características clave#

• Un conjunto completo con nombres convencionales en un zip. Los nombres de archivo (favicon.ico, apple-touch-icon.png, android-chrome-512x512.png, site.webmanifest) coinciden con lo que los navegadores y las herramientas de build buscan en la raíz del sitio por defecto.
• Codificador ICO de autoría propia. Un ICO Vista+ multi-imagen adecuado (ICONDIR + tabla ICONDIRENTRY + cargas útiles PNG incrustadas), escrito desde cero: no un stub de 32×32 de una sola imagen.
• Modo letra para marcas instantáneas. Dos caracteres, dos selectores de color, listo; útil para herramientas internas y demos que necesitan un icono reconocible en treinta segundos.
• Solo los archivos que de verdad necesitas. Quita la marca de un tamaño y ni su PNG ni su entrada en el manifest se emiten; el fragmento HTML se regenera para coincidir.
• Fragmento head listo para pegar. Las líneas exactas <link> y <meta>, limitadas a solo los recursos presentes, así que no pegas referencias a archivos que no generaste.
• 100 % local. La imagen o letra de origen se rasteriza en el navegador; el zip se ensambla en el navegador. Sin subida.

Ejemplo práctico#

Quieres un favicon para un proyecto paralelo llamado «Glide». Elige Origen: Letra, escribe G, pon el Color de fondo en #0ea5e9 y el Color del texto en #ffffff, deja los seis tamaños marcados y haz clic en Descargar .zip. Al descomprimir obtienes:

favicon.ico
favicon-16x16.png
favicon-32x32.png
apple-touch-icon.png
android-chrome-192x192.png
android-chrome-512x512.png
site.webmanifest
html-snippet.html

El html-snippet.html contiene exactamente:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0ea5e9">

Suelta esos ocho archivos en la raíz de tu sitio, pega las seis líneas en tu <head> y cada plataforma (pestaña del navegador, pantalla de inicio iOS, PWA Android) resuelve el icono correcto.

Preguntas frecuentes#

¿Por qué no hay un PNG independiente de 48×48?#

El 48 solo se consume dentro de favicon.ico (algunas herramientas heredadas leen la entrada 48 del ICO). Emitir un favicon-48x48.png independiente sería lastre muerto que ningún navegador recupera, así que la herramienta empaqueta el 48 dentro del ICO y omite el archivo independiente.

¿De verdad necesito los seis tamaños?#

Para cobertura completa, sí. Si solo te importa la pestaña del navegador y no iOS ni PWA, quita la marca a 180, 192 y 512 y obtienes solo el ICO más los PNG de 16/32: un paquete mucho más pequeño. El fragmento contendrá entonces solo los enlaces icon, sin líneas manifest ni apple-touch.

El ICO se describe como «PNG incrustado». ¿Eso es válido?#

Sí. Desde Windows Vista, un ICO puede incrustar cargas útiles PNG (en vez del antiguo formato BMP), y todo navegador moderno lee esta forma. Evita un codificador BMP aparte y produce archivos más pequeños para el tamaño 48.

Mi letra se ve descentrada en algún tamaño.#

La letra se centra en el canvas en cada tamaño usando una fuente consistente; las letras muy cuadradas (como la M) y las letras con ascendentes o descendentes pueden verse ligeramente altas o bajas por la métrica de la fuente. Si el centrado perfecto al píxel importa, renderiza la marca en un editor de imagen y usa Origen: Imagen en su lugar.