Imagen → Icono

Genera favicon e iconos PWA

El .zip incluye:

favicon-16.png16×16
favicon-32.png32×32
favicon-48.png48×48
apple-touch-icon.png180×180
icon-192.png192×192
icon-512.png512×512
manifest.jsonPWA
head-snippet.html<head>

Cómo funciona

Imagen → Icono — Genera favicon e iconos PWA. Todo el procesamiento ocurre en tu navegador — sin subida, sin registro, sin email. Gratis para siempre.

Última actualización: 2026-05-06

Editor's note

Construimos esto porque cada framework quiere un tamaño de favicon distinto, Apple sigue inventando nuevos, y el manifest de PWA necesita sus propias variantes de 192 y 512 px. La mañana en que contamos veintiocho archivos de icono separados en el proyecto Multilities decidimos que nunca más lo haríamos a mano. El ZIP que escupe esta herramienta es exactamente el paquete que soltamos en public/ en un sitio nuevo: cualquier cosa más pequeña deja un 404 en el manifest de alguien dos meses después y un icono de home-screen de iOS que sale borroso en capturas.

La vista previa con recorte centrado está ahí porque seguíamos pasándole a la herramienta logos verticales y nos sorprendía cuando el 16×16 perdía la parte superior de la tipografía. Ahora ves el recorte antes de confirmar. Bajamos a propósito de añadir eliminación de fondo o máscara de esquinas redondeadas: son decisiones de diseño que deberían vivir en tu archivo fuente, no adivinarlas una utilidad. Trae un PNG cuadrado limpio y lo demás es mecánico.

Acerca de Imagen → Icono

Imagen → Icono convierte un único PNG de origen en un set completo de favicons e iconos PWA, incluyendo el manifest.json y el snippet HTML que necesitas para conectarlo todo. Es un generador de favicon de un solo clic y un generador de iconos PWA pensado para desarrolladores que prefieren saltarse el baile manual con ImageMagick.

Sube tu logo y la herramienta lo recorta centrado en cuadrado, genera cada tamaño necesario (16, 32, 48, 180, 192, 512), empaqueta todo junto al manifest y te entrega un snippet HTML listo para pegar en tu <head>.

La generación se hace en el navegador, así que tu marca aún sin lanzar nunca abandona tu equipo. La salida es un .zip limpio que puedes commitear directamente en la carpeta public/ de tu proyecto.

Cómo usar Imagen → Icono

Arrastra un PNG cuadrado al área de subida: las imágenes cuadradas funcionan mejor, idealmente con fondo transparente.
Revisa la previsualización recortada al centro para asegurarte de que el logo no queda cortado; las fuentes no cuadradas se recortan automáticamente.
Pulsa Generate icon set & download .zip y espera mientras se renderiza cada tamaño.
Descomprime el archivo en la carpeta public/ (o static/) de tu proyecto.
Pega el snippet HTML incluido dentro de tu <head> y referencia manifest.json desde el <link> correspondiente.
Haz un hard-refresh en una ventana privada para confirmar que aparecen el nuevo favicon y el icono de instalación PWA.

Casos de uso comunes

Arrancar una web nueva cuando tienes un logo en PNG pero no tiempo para exportar manualmente 8 tamaños distintos.
Añadir soporte PWA a una app existente: los iconos de 192 y 512 px cubren los requisitos del manifest sin más.
Refrescar el favicon tras un rebrand sin pedir a diseño que vuelva a exportar todo.
Producir Apple touch icons (180 px) para que los accesos directos en iOS se vean nítidos.
Generar sets de iconos consistentes para varios entornos (staging, producción) a partir de un único archivo fuente.

Consejos y errores comunes

Parte de una fuente de alta resolución (al menos 512×512) para que los tamaños reducidos se mantengan nítidos.
Usa fondo transparente: los fondos opacos quedan extraños dentro de las máscaras redondeadas de iOS.
Prueba el favicon visitando tu sitio en una ventana de incógnito; los navegadores cachean los favicons de forma muy agresiva.
Si tu logo tiene trazos muy finos, pueden desaparecer a 16×16: diseña una marca simplificada para tamaños diminutos si hace falta.

Preguntas frecuentes

¿Qué tamaños incluye el set generado?

16, 32, 48 (favicons), 180 (Apple touch icon), 192 y 512 (PWA). Más un manifest.json y un snippet HTML para pegar en tu proyecto.

¿Y si mi origen no es cuadrado?

Lo recortamos automáticamente al centro como cuadrado. Para mejor resultado, usa una imagen cuadrada con el contenido principal centrado.

¿Qué formato funciona mejor como origen?

PNG con fondo transparente. Si tienes SVG, conviértelo antes con nuestra herramienta SVG → PNG.

¿Sigo necesitando un .ico aparte en 2026?

Los navegadores modernos usan sin problema los favicons PNG referenciados con <link rel="icon" type="image/png">. El clásico /favicon.ico solo es necesario si tienes que dar soporte a versiones muy antiguas de IE. Aun así, muchos equipos lo conservan por precaución.

¿Por qué mi icono PWA aparece con fondo blanco en vez de transparente?

Algunas plataformas (en especial iOS) aplanan la transparencia a blanco. Diseña el icono asumiendo que aparecerá un fondo sólido o aporta una variante de icono maskable en tu manifest con la zona segura adecuada.

¿Puedo generar los iconos a partir de un SVG?

Convierte primero el SVG a un PNG de alta resolución con nuestra herramienta SVG → PNG (prueba 1024 px de ancho) y luego pasa ese PNG a Imagen → Icono. Pasar por PNG garantiza que cada tamaño se rasterice de forma idéntica.