Generador de Favicon
Crea un paquete completo de favicon a partir de tu logo en un solo paso. Sube una imagen cuadrada (se recomienda PNG) y obtén: archivo .ico de múltiples resoluciones (16×16, 32×32, 48×48), iconos PNG desde 16×16 hasta 512×512 para cada caso de uso, Apple Touch Icon para la pantalla de inicio de iOS, iconos de Android Chrome con soporte adaptativo, webmanifest.json para la instalación de PWA y un fragmento HTML listo para pegar. Todo en una sola descarga ZIP.
¿Qué hace esta herramienta?
El Generador de Favicon crea todos los archivos de iconos y el marcado necesarios para una presencia web moderna. Produce el tradicional favicon.ico con múltiples tamaños incrustados para el soporte de navegadores heredados. Para los navegadores modernos, genera iconos PNG en tamaños estándar: 16×16 (pestañas del navegador), 32×32 (Windows), 180×180 (Apple Touch), 192×192 (Android), 512×512 (pantallas de bienvenida). El webmanifest.json habilita la instalación de Progressive Web App en Android y Chrome OS. El fragmento HTML incluye todas las etiquetas link necesarias con los atributos rel y tamaños correctos.
Cómo funciona
Sube una imagen de origen cuadrada (se recomienda 512×512 o mayor, PNG con transparencia si aplica). La herramienta utiliza el muestreo Lanczos para generar todos los tamaños requeridos con alta calidad. Para favicon.ico, incrusta múltiples marcos PNG de 16×16, 32×32 y 48×48 utilizando el formato de contenedor ICO. Se generan PNG individuales para cada tamaño requerido. El webmanifest.json se construye con campos estándar (name, icons, theme_color, background_color). El fragmento HTML utiliza valores de link rel correctos: icon para favicon, apple-touch-icon para iOS y manifest para PWA. Todos los archivos se empaquetan en un ZIP con un README que explica la instalación.
Características
- .ico de múltiples tamaños (16/32/48 anidados)
- PNGs desde 16×16 hasta 512×512 — cada tamaño que los navegadores necesitan
- Apple Touch Icon, iPad, Android, mosaico de Microsoft
- Sitio.webmanifest generado para instalación de PWA
- Fragmento HTML <head> listo para pegar
- Descarga .zip única con todo
- Muestreo Lanczos para calidad
Cómo usar
- 1
Suelta tu logo
Una imagen cuadrada ≥ 512×512 en PNG funciona mejor. El fondo transparente está bien y se recomienda para un uso moderno.
- 2
Haz clic en Generar
Todos los tamaños se producen mediante muestreo Lanczos en segundos. La vista previa muestra los tamaños clave.
- 3
Descarga .zip
Descomprime en tu carpeta /public o /static; pega el fragmento HTML en la sección <head> de tu sitio.
- 4
Personalizar (opcional)
Edita site.webmanifest para ajustar el nombre de la aplicación, el color de tema y el color de fondo de tu marca.
Casos de uso comunes
Lanzamiento de sitio web nuevo
Genera un conjunto completo de favicon al lanzar un nuevo sitio para asegurar una apariencia profesional en todos los dispositivos y plataformas.
Actualización de marca
Actualiza los favicon en todos los tamaños al renovar la marca o actualizar tu logo.
Preparación de PWA
Obtén todos los iconos requeridos y el webmanifest.json necesarios para el soporte de instalación de Progressive Web App.
Modernización de sitio heredado
Reemplaza los antiguos configuraciones de favicon.ico único con paquetes de iconos modernos de múltiples formatos y tamaños.
Consejos y buenas prácticas
- Hay tantos tamaños porque iOS, Android, Windows y varios navegadores solicitan tamaños diferentes para pestañas, pantallas de inicio, pantallas de bienvenida, mosaicos, etc. Un paquete completo asegura un renderizado nítido en todas partes.
- Usa un origen de 512×512 como mínimo. Reducir el tamaño se ve bien; aumentar el tamaño desde una fuente pequeña se ve borroso.
- Los PNG con transparencia funcionan mejor en navegadores modernos, pero incluye una versión con fondo coloreado para contextos que no soportan transparencia.
- El theme_color del webmanifest afecta la interfaz del navegador (barra de direcciones) en Chrome móvil — haz coincidirlo con tu marca.