Generador de iconos de app
Elige una imagen cuadrada grande y obtenla en todos los tamaños habituales de icono: los de iOS con nombres al estilo de Xcode y el icono de 1024 px para la App Store, los iconos de launcher de Android para cada densidad de pantalla más el de 512 px para Google Play, o los iconos del manifest de una web app y el Apple touch icon. Descarga cada PNG o todos a la vez.
Funciona en tu navegador: nada de lo que escribes se envía a ningún sitio.
Cómo se usa
- Elige o suelta el diseño del icono, a ser posible un PNG cuadrado de 1024 × 1024 píxeles o más.
- Elige la plataforma: iOS, Android o web app.
- Decide qué hacer con una imagen no cuadrada y añade margen si el dibujo toca los bordes.
- Elige el color de fondo; en los iconos de Android y web puedes mantener la transparencia.
- Descarga los iconos uno a uno o pulsa Descargar todos para guardar todos los PNG de la plataforma seguidos.
Cómo funciona
Cada icono se dibuja en un lienzo de su tamaño exacto en píxeles, con suavizado de alta calidad, y se guarda como PNG. Con un margen p, el dibujo se coloca en un cuadrado interior de lado × (1 − 2p). «Recortar para llenar» usa el cuadrado centrado de la imagen: una de 800 × 600 se recorta a 600 × 600 empezando a 100 píxeles del borde izquierdo. «Encajar entera» ajusta el lado largo al cuadrado interior: la misma imagen en un icono de 100 px queda en 100 × 75, a 12,5 px del borde superior.
Los nombres de iOS siguen el tamaño en puntos y la escala (Icon-60@3x.png son 60 pt × 3 = 180 px). Los archivos de Android llevan la densidad en el nombre (ic_launcher-xxhdpi.png); renómbralos a ic_launcher.png dentro de cada carpeta mipmap.
Ejemplo
Un logo de 2048 × 2048 con un margen del 10 % en Android: el icono xxxhdpi de 192 px lleva el logo en un cuadrado de 153,6 px, a 19,2 px de cada borde; el icono mdpi de 48 px, en un cuadrado de 38,4 px. El icono de 512 px para Google Play lo lleva en un cuadrado de 409,6 px.
Consejos
- Diseña a 1024 px y revisa también cómo se ve a 40 px: las líneas finas y el texto pequeño desaparecen en los tamaños pequeños.
- Aleja de las esquinas lo importante; los launchers que usan círculos las cortan.
- En el conjunto web, desactiva la transparencia si tu diseño tiene fondo transparente: el iPhone y el iPad muestran en negro las zonas transparentes del Apple touch icon.
- Para el favicon.ico de un sitio web y sus etiquetas HTML, usa el generador de favicon.
Preguntas frecuentes
¿Qué tamaños obtengo para iOS?
1024 × 1024 para la App Store y el conjunto clásico del asset catalog: 180 y 120 px para la pantalla de inicio del iPhone (60 pt a 3× y 2×), 167 px para el iPad Pro, 152 y 76 px para el iPad, 120 y 80 px para Spotlight, 87 y 58 px para Ajustes y 60 y 40 px para notificaciones. Las versiones recientes de Xcode también pueden compilar una app solo con el icono de 1024 px.
¿Qué tamaños obtengo para Android?
El icono del launcher mide 48 dp: 48 px en mdpi, 72 px en hdpi, 96 px en xhdpi, 144 px en xxhdpi y 192 px en xxxhdpi, más el icono de 512 × 512 px para la ficha de Google Play. Pon cada archivo del launcher en su carpeta mipmap con el nombre ic_launcher.png. Aquí no se crean iconos adaptativos con capas de primer plano y fondo separadas.
¿Por qué los iconos de iOS nunca son transparentes?
La App Store no acepta iconos de app con transparencia, así que el conjunto de iOS siempre se dibuja sobre el color de fondo que elijas. En los iconos de Android y web puedes mantener la transparencia.
¿Tengo que redondear las esquinas?
No. iOS y la mayoría de launchers de Android recortan el icono con su propia forma, así que entrega un cuadrado completo. Si tu imagen ya tiene esquinas redondeadas, detrás se verá el color de fondo.
¿Qué hacen «Recortar para llenar» y «Encajar entera»?
«Recortar para llenar» toma el mayor cuadrado centrado de una imagen no cuadrada y llena el icono con él. «Encajar entera» conserva toda la imagen y rellena el resto con el color de fondo (o con transparencia). El margen añade espacio por todos los lados, algo útil cuando el launcher recorta los iconos en círculo.
¿Se sube mi imagen a algún servidor?
No. Tu navegador dibuja y guarda cada icono en tu dispositivo.
