Favicon & App Icon Generator
Subí una imagen y obtené un favicon.ico real, apple-touch-icon e íconos de Android Chrome, más un site.webmanifest. Nada sale de tu navegador.
Imagen de origen
Arrastrá una imagen acá, o
Set de íconos generado
Genera exactamente los tamaños que necesita un sitio hoy: 16×16 y 32×32 (empaquetados en favicon.ico), 180×180 (apple-touch-icon.png) y 192×192 y 512×512 (android-chrome, también usados por los manifests de PWA). Sin los tamaños de tile de Windows 8 ni browserconfig.xml.
Cómo usar Favicon & App Icon Generator
- Arrastrá una imagen o logo al panel Imagen de origen, o hacé clic en elegí un archivo (o en Ejemplo).
- Si la imagen no es cuadrada, elegí Recortar al cuadrado central o Rellenar hasta cuadrado, y elegí un color de fondo para el relleno o dejalo transparente.
- Opcionalmente configurá un Color de tema, usado en el site.webmanifest y la etiqueta meta generados.
- Hacé clic en Descargar todo para guardar todos los íconos de una vez, o descargá cada archivo (y el manifest) por separado.
Qué genera esta herramienta
Un sitio moderno necesita varios archivos de ícono, cada uno leído por un navegador o sistema operativo distinto: un pequeño archivo .ico multi-tamaño para compatibilidad heredada y pestañas del navegador, un PNG de 180×180 para íconos de pantalla de inicio en iOS, y PNGs de 192×192/512×512 referenciados desde un site.webmanifest para Android y los prompts de instalación de PWA. Esta herramienta genera todos estos a partir de una sola imagen de origen, usando redimensionado con <canvas> enteramente en tu navegador — sin servidor, sin subir nada.
Cómo se arma realmente el archivo favicon.ico
Un archivo .ico es un contenedor binario pequeño y bien documentado, no un códec de imagen especial. Su encabezado (ICONDIR) indica cuántas imágenes contiene; cada imagen recibe una entrada de directorio de 16 bytes (ICONDIRENTRY) que describe su ancho, alto, profundidad de color, tamaño en bytes y — de forma crítica — el offset exacto del archivo donde empiezan sus datos. Los lectores de íconos modernos (todos los navegadores y sistemas operativos actuales) aceptan un archivo PNG completo como esos datos embebidos, así que esta herramienta nunca toca la codificación de bitmap crudo:
ICONDIR (6 bytes): reserved=0, type=1, count=2 ICONDIRENTRY #1 (16 bytes): 16x16, 32bpp, size=<longitud del PNG de 16px>, offset=38 ICONDIRENTRY #2 (16 bytes): 32x32, 32bpp, size=<longitud del PNG de 32px>, offset=38 + <longitud del PNG de 16px> [bytes del PNG de 16x16][bytes del PNG de 32x32]
El campo offset es la parte con más probabilidad de estar mal: el offset de la entrada #2 debe ser igual al offset de la entrada #1 más la longitud real y medida del PNG de la entrada #1 — no un valor redondeado o asumido. La matemática de offsets de esta herramienta se verificó a mano en un test de Node que chequea cada campo del encabezado, el offset de cada entrada, y confirma que los bytes en cada offset declarado realmente empiezan con el número mágico de PNG (0x89 0x50 0x4E 0x47) antes de publicarse.
Cómo se manejan las imágenes que no son cuadradas
Estirar un logo no cuadrado para forzarlo a un cuadrado lo distorsionaría, así que esta herramienta nunca lo hace en silencio. Elegí Recortar al cuadrado central para conservar la parte central cuadrada de la imagen, o Rellenar hasta cuadrado para achicar toda la imagen y que entre dentro del cuadrado, rellenando el espacio sobrante con un color de fondo (o dejándolo transparente) — la vista previa cuadrada se actualiza al instante para que veas exactamente cuál vas a obtener antes de descargar.
Preguntas frecuentes
¿Esta herramienta recorta o estira las imágenes que no son cuadradas?
Nunca estira una imagen para forzarla a ser cuadrada, porque eso la distorsionaría. Elegí recorte centrado (conserva la parte central cuadrada) o relleno (achica toda la imagen para que entre, rellenando el espacio sobrante con un color de fondo o dejándolo transparente).
¿El favicon.ico generado es un archivo de ícono real que funciona?
Sí. Es un contenedor ICONDIR genuino, construido byte a byte, con una imagen de 16x16 y otra de 32x32 comprimidas como PNG adentro, siguiendo el mismo formato que leen los navegadores y sistemas operativos modernos — no es un PNG renombrado.
¿Puedo subir un logo en SVG?
Sí. Las fuentes SVG se rasterizan en tu navegador usando un canvas en cada tamaño de destino, así que un logo vectorial sale nítido en cualquier resolución.
¿Mi imagen se sube a algún lado?
No. Cada redimensionado y el armado de los archivos ocurre localmente usando la API de Canvas y typed arrays en tu navegador — tu imagen nunca sale de tu equipo.