¿Qué iconos necesita una web o una app?
Cada plataforma pide su propio icono en su propio tamaño. Una web necesita el favicon.ico para la pestaña del navegador, versiones PNG de 16 y 32 px y un apple-touch-icon de 180 px para cuando alguien la guarda en la pantalla de inicio del iPhone. Una aplicación web progresiva (PWA) necesita iconos de 192 y 512 px, uno «maskable» que Android puede recortar en círculo y un archivo manifest que los declare. Una app de iOS necesita un icono de 1024 px sin transparencia y una app de Android, los iconos de lanzador en cinco densidades.
Este generador crea todo eso a partir de una sola imagen, mejor un SVG o un PNG cuadrado de al menos 512 px. Eliges qué paquetes quieres, el nombre de la app, el color de fondo y el margen, y descargas un ZIP ordenado en carpetas: los archivos de la web en la raíz, el AppIcon.appiconset listo para arrastrar a Xcode y las carpetas mipmap listas para copiar en Android Studio.
Los iconos que no pueden ser transparentes, como el de Apple, el de iOS, el maskable y el de Google Play, se rellenan con el color de fondo que elijas; el resto puede mantener la transparencia. Además, la herramienta te da el código HTML para pegar en el <head> de tu web. Todo ocurre en tu navegador, sin subir tu logo. Con ToolStudio Pro puedes generar los iconos de varios logos a la vez.
¿Cómo generar los iconos de tu app?
- Arrastra tu logo (SVG o PNG cuadrado) a la herramienta.
- Marca qué iconos quieres: favicon para web, PWA, iOS y Android.
- Escribe el nombre de la app, elige el color de fondo y ajusta el margen.
- Pulsa «Generar iconos», revisa la vista previa y descarga el ZIP.
- Sube los archivos web a la raíz de tu sitio y pega el código en el <head>.
¿Cuándo usar esta herramienta?
- Poner el favicon y el icono de iPhone a una web nueva en un minuto.
- Convertir una web en PWA instalable con su manifest e iconos.
- Preparar el icono de una app de iOS para Xcode.
- Generar los iconos de lanzador de una app de Android en todas las densidades.
- Actualizar todos los iconos a la vez después de un cambio de logo.
Qué incluye el ZIP
- Web: favicon.ico (16, 32 y 48 px), favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png (180 px) y favicon.svg si subes un SVG.
- PWA: android-chrome-192x192.png, android-chrome-512x512.png, maskable-icon-512x512.png y site.webmanifest.
- iOS: ios/AppIcon.appiconset con el icono de 1024 px y su Contents.json (Xcode 14 o posterior).
- Android: android/mipmap-mdpi a mipmap-xxxhdpi con ic_launcher.png e ic_launcher_round.png, y el icono de 512 px para Google Play.
- head-snippet.html con las etiquetas <link> y <meta> para tu web.
Formatos
- Entrada: SVG, PNG, JPG, WebP, GIF, BMP, AVIF o ICO. Lo ideal es un SVG o un PNG cuadrado de 512 px o más.
- Salida: un ZIP con PNG, ICO, el manifest JSON y el código HTML.
Preguntas Frecuentes
¿Se sube mi logo a algún servidor?
No. Todos los iconos se generan en tu navegador y tu logo no sale de tu dispositivo.
¿Qué tamaño debe tener mi imagen?
Lo mejor es un SVG o un PNG cuadrado de al menos 512 px, o de 1024 px si también quieres el icono de iOS. Una imagen más pequeña funciona, pero los iconos grandes se verán menos nítidos.
¿Por qué algunos iconos tienen fondo aunque mi logo sea transparente?
Apple rellena de negro las zonas transparentes del apple-touch-icon, el App Store rechaza iconos de iOS con transparencia y los iconos maskable deben ocupar todo el cuadrado. Por eso esos iconos usan el color de fondo que elijas.
¿Qué es un icono maskable?
Es un icono para PWA que Android puede recortar en círculo, cuadrado redondeado u otras formas. La herramienta deja un margen de seguridad para que el logo no quede cortado.
¿Cómo añado los iconos a mi web?
Sube los archivos de la raíz del ZIP a la carpeta raíz de tu web y pega el código de head-snippet.html (o el que muestra la herramienta) dentro de la etiqueta <head>.
¿Puedo generar iconos de varios logos a la vez?
Sí, con ToolStudio Pro. Cada logo tiene su propia carpeta dentro del ZIP. La prueba gratis es de un logo.
¿Es gratis?
Puedes probarla gratis con un logo y cambiar los ajustes las veces que quieras. Para usarla sin límite y por lotes, ToolStudio Pro cuesta 1,99 € al mes e incluye todas las herramientas.