Icono de app: canal alfa y tamaños para App Store y Play

Tienes un logo y dos tiendas de aplicaciones, y el archivo que satisface a Apple no es el que Google quiere. El problema aparece en el peor momento: la build está terminada y la subida sigue fallando por un canal alfa.

Apple quiere un icono cuadrado de 1024x1024 con fondo opaco. Play quiere un PNG de 32 bits de 512x512 que técnicamente admite alfa pero que, según la propia especificación de diseño de Google, no debería usarlo. Y ninguna de las dos tiendas quiere un archivo con aspecto terminado — ambas aplican sus propias esquinas y efectos después de la subida. Esto es lo que pide cada una, y cómo sacar los dos archivos de un solo logo.

Apple: 1024 píxeles, cuadrado y nada transparente

Las Human Interface Guidelines de Apple fijan el tamaño de diseño del icono de la app para iOS, iPadOS y macOS en 1024x1024 px, cuadrado, en sRGB, Gray Gamma 2.2 o Display P3. La vía preferida de Apple es ahora Icon Composer, donde importas las capas del primer plano y defines el fondo en la propia herramienta, pero una imagen aplanada sigue estando permitida: las capas dan más control, no son obligatorias.

Lo que frena a quien publica por primera vez es el fondo. La instrucción de Apple para una capa de fondo importada es tajante: hazla a sangre, cubriendo todo el lienzo, y opaca. Un PNG de 1024px con fondo transparente no es un icono válido para el App Store — sube uno y App Store Connect devuelve ITMS-90717: el icono del App Store no puede ser transparente ni contener un canal alfa. La variante para apariencia oscura es la única excepción: Apple pide entregarla con fondo transparente para que se vea el fondo que aporta el sistema. En todo lo demás, decide qué color queda detrás de tu marca y déjalo incrustado en el archivo.

Las demás plataformas de Apple cambian el tamaño de diseño: watchOS 1088x1088 y visionOS 1024x1024, ambos con máscara circular, y tvOS un 800x480 horizontal. También cambian el método: los iconos de tvOS y visionOS se montan como pilas de capas (layered image stacks) en Xcode, no en Icon Composer.

Google Play: 512 píxeles, alfa permitido, la transparencia sigue siendo un error

El icono de la ficha de Play Store es un PNG de 32 bits con alfa, 512x512 px, sRGB, máximo 1024KB. Leído así, sin más, el recorte transparente que ya tienes parece servir.

La especificación de diseño de iconos de Google cierra esa puerta: los recursos transparentes muestran el color de fondo de la interfaz de Google Play. Tu marca queda entonces flotando sobre la superficie que Play decida renderizar, y un logo oscuro desaparece en modo oscuro. El consejo de Google: elige un color de fondo apropiado para tu marca.

Dos reglas más de Play: nada de insignias ni texto que sugiera ranking, precio o categorías de Play, y el icono de la ficha es independiente del icono del lanzador en el dispositivo. Ese icono adaptativo usa capas de 108x108 dp, de las que solo los 66x66 dp interiores tienen garantizado no quedar recortados por la máscara de cada fabricante (OEM).

Sacar los dos archivos de un solo logo

Los dos archivos parten de lo mismo: tu marca, separada con limpieza de aquello sobre lo que estaba. Si tu logo solo existe como un JPEG que envió un proveedor o como foto de papelería impresa, recórtalo primero para que la forma quede aislada con un canal alfa de verdad. remover.bg despega la marca de su fondo y te deja soltarla sobre un color sólido o un color de marca personalizado en el editor — el paso de aplanado que Apple exige.

El orden que funciona:

1. Quita el fondo para que el logo quede solo. Revisa los bordes contra un color oscuro, no contra blanco — los trazos finos y las serifas esconden sus defectos en una vista previa blanca.
2. Pon de fondo tu color de marca y exporta un PNG. Guarda también la versión transparente, para kits de prensa y favicons.
3. En tu herramienta de diseño, coloca ese PNG en un lienzo cuadrado y exporta a 1024x1024 para Apple y a 512x512 para Play. El dimensionado va ahí, no en la herramienta de eliminación de fondo.

Para un logo escaneado o fotografiado, cómo quitar el fondo de un logo cubre los casos difíciles, y la guía del PNG transparente explica por qué merece la pena conservar ese archivo maestro.

Deja que las tiendas dibujen las esquinas y la sombra

Play es explícita en esto: redondea ella misma las esquinas con un radio del 30% del tamaño del icono, añade su propia sombra proyectada después de la subida y te pide omitir ambas cosas. Apple enmascara tu cuadrado en el rectángulo redondeado del sistema y aplica sus propios brillos, refracción y translucidez, y avisa de que las capas ya enmascaradas estropean esos efectos y dejan los bordes dentados.

Así que: nada de esquinas redondeadas de antemano, ni sombra proyectada, ni bisel, ni resplandor. Esa contención es específica de los iconos — en una foto de producto, una sombra de contacto realista es justo lo que evita que el artículo parezca pegado.

Como ambas tiendas aplican máscara, mantén centrada la parte importante de la marca. La pauta de Apple es centrar el contenido principal para que el enmascarado no pueda truncarlo. La cuadrícula de keylines de Play funciona distinto de lo que la gente supone: es una guía de posicionamiento, no un límite. La instrucción de Google es llenar todo el recurso con el diseño cuando puedas, y recurrir a las keylines solo cuando la forma alrededor del logo sea esencial para la marca. Añade margen al cuadrado por precaución y tu icono se verá más pequeño que el de todas las fichas de al lado.

Lo que el radio del 30% se come en realidad son las esquinas, así que un logotipo (wordmark) empujado hasta ellas pierde los extremos. En las máscaras circulares de watchOS y visionOS, un wordmark de borde a borde pierde directamente la primera y la última letra.

Antes de subir

• Apple: PNG de 1024x1024, cuadrado, totalmente opaco, con las esquinas sin redondear.
• Play: PNG de 32 bits de 512x512, máximo 1024KB, fondo en color de marca en vez de transparencia, esquinas sin redondear.
• El mismo diseño y los mismos colores en las dos tiendas: los usuarios deben reconocer una app, no dos.
• Previsualiza ambos a tamaño de miniatura. El detalle que se lee a 1024 desaparece a 40 píxeles.

Arregla el icono una vez y quedará arreglado para todas las versiones que publiques después de esta.