Generador de Favicon Online — PNG a ICO con Todos los Tamaños
Sube un PNG, JPG o SVG — obtén un favicon.ico listo para usar, todos los tamaños PNG, apple-touch-icon, webmanifest y el fragmento HTML. Todo se ejecuta en tu navegador, sin subir archivos.
PNG, JPG, SVG, WebP
Arrastra y suelta tu archivo aquí o haz clic para seleccionar
Sobre el generador de favicon
Un favicon moderno no es un solo archivo — es un conjunto: ICO para navegadores antiguos y accesos directos de Windows, PNG en varios tamaños para Chrome/Firefox modernos, un apple-touch-icon para la pantalla de inicio de iOS y un webmanifest para PWA. Esta herramienta genera todo el paquete a partir de una sola imagen con un clic.
La conversión se ejecuta en el cliente: Canvas renderiza tu imagen de origen en cada tamaño necesario, y luego empaquetamos los bytes PNG en el contenedor ICO (PNG-en-ICO, compatible desde Windows Vista, funciona en todos los navegadores). Tu archivo nunca se sube.
El ZIP resultante contiene favicon.ico, PNG 16/32/96/192/512, apple-touch-icon (180×180), site.webmanifest y un fragmento HTML con etiquetas link listas para pegar. Coloca los archivos en la raíz de tu sitio y pega el fragmento en el head.
Cuándo necesitarás un generador de favicon
Lanzar un sitio nuevo
Sube tu logo — obtén un paquete listo que funciona correctamente en Chrome, Safari, Firefox, Edge y navegadores móviles. Sin Photoshop, sin tener que memorizar las especificaciones de Apple.
Aplicación de escritorio o acceso directo
¿Necesitas favicon.ico para un acceso directo de Windows, un recurso EXE o el antiguo Internet Explorer? Descarga solo el ICO — multirresolución 16/32/48 en un único archivo.
PWA / Añadir a pantalla de inicio en iOS
Si tu sitio admite 'Añadir a pantalla de inicio', necesitas apple-touch-icon (180×180) y un webmanifest con PNG 192/512. El generador los crea automáticamente.
Sustituir un icono anticuado
¿Favicon borroso, sin soporte retina o modo oscuro? Regenéralo a partir de un SVG limpio con el conjunto moderno adecuado de tamaños.
Preguntas frecuentes
¿Qué formatos puedo subir?
PNG, JPG, JPEG, WebP, GIF y SVG. Los mejores resultados se obtienen con un PNG o SVG cuadrado: se escalan sin perder nitidez. Si tu imagen de origen es rectangular, elige un modo de ajuste (cubrir / contener / estirar).
¿Cuál es la diferencia entre los modos de ajuste?
Cubrir — recorta los bordes para que la imagen llene el cuadrado (bueno para logos con un elemento centrado). Contener — encaja la imagen completa, rellenando los bordes con un fondo (bueno para logos complejos). Estirar — distorsiona las proporciones (raramente necesario).
¿Qué hay dentro de favicon.ico?
ICO es un contenedor. Dentro contiene imágenes PNG en tres tamaños: 16×16, 32×32 y 48×48. El navegador elige la adecuada según el contexto. Es el formato 'PNG-en-ICO', compatible desde Windows Vista (2007) y en todos los navegadores modernos.
¿Por qué tantos archivos PNG?
Cada tamaño tiene su propósito: 16/32 — pestaña del navegador; 96 — pestaña nueva de Chrome; 180 — pantalla de inicio de iOS (apple-touch-icon); 192 — Android Chrome; 512 — pantalla de bienvenida de PWA. Los navegadores eligen la adecuada mediante el atributo sizes de la etiqueta link.
¿Qué es site.webmanifest?
Un archivo JSON con la lista de iconos y los parámetros de la PWA. Necesario para 'Añadir a pantalla de inicio' en Android / Chromium para que el icono y el título se vean correctamente. Si no estás creando una PWA, el archivo es inofensivo.
¿Por qué el apple-touch-icon lleva fondo aunque esté activado Transparente?
iOS añade un fondo negro a los PNG transparentes por defecto. Eso se ve mal, así que lo rellenamos con el color elegido (blanco por defecto). El resto de los PNG y el ICO permanecen transparentes si lo activaste.
¿Dónde coloco los archivos?
En la raíz del sitio: ejemplo.com/favicon.ico, ejemplo.com/favicon-32x32.png y así sucesivamente. Luego pega el fragmento HTML en el head de cada página — lo mejor es hacerlo desde una plantilla compartida. El navegador detectará el favicon en la siguiente carga de página.