Un icono de aplicación es un solo dibujo que tiene que llevar 36 tallas distintas, en 5 plataformas, en contextos que van de una pestaña de navegador de 16 píxeles a una subida de tienda de 1024. El Generador de Iconos de App toma una foto, la recorta a un cuadrado por cobertura y exporta la familia completa como un ZIP: 36 PNG en carpetas por plataforma, más un manifest PWA y un manifest de conjunto de iconos iOS. Nada se sube: el recorte, el re-muestreo y el ensamblado del ZIP corren en el lienzo del navegador.
Los 36 tamaños en 5 plataformas
La lista son 12 de iOS, 9 de Android, 5 de web, 6 de macOS y 4 de Windows. iOS va del icono de ajustes de 29 píxeles a la subida de App Store de 1024, con 40, 58, 60, 76, 80, 87, 120, 152, 167 y 180 en medio. Android cubre el icono de Play Store de 512, los 2 tamaños de icono adaptativo (48 y 192) y las 5 densidades de lanzador, de 36 en ldpi a 192 en xxxhdpi. Web guarda la pareja PWA de 192 y 512, el apple-touch-icon de Safari de 180, y los 2 favicons de 32 y 16. macOS sube por 16, 32, 128, 256, 512, 1024; Windows trae baldosas de 44, 71 y 150 más una imagen de tienda de 500 píxeles. El conmutador de plataformas salta grupos enteros: una compilación solo web descarga 5 PNG y un manifest en lugar de los 36 completos. Si solo quieres una dimensión objetivo, el redimensionador de imágenes hace el re-muestreo único con la misma regla de recorte a cobertura.
De una foto de 4000×3000 a un icono de 512
Cada objetivo es cuadrado, así que una foto rectangular tiene que volverse cuadrada antes de escalar. La regla es recorte a cobertura: scale = max(w / iw, h / ih), donde w y h son el objetivo e iw e ih la fuente. Para una foto de 4000×3000 en un objetivo de 512, scale = max(512/4000, 512/3000) = max(0,128, 0,17067) = 0,17067, el cuadrado de la fuente mide 512/0,17067 = 3000 de lado, centrado: sx = (4000 − 3000)/2 = 500, sy = 0. La foto 4:3 entrega su centro de 3000×3000; 500 píxeles de cada lado se cortan. Una foto vertical pierde arriba y abajo. El max es deliberado: el min metería la foto completa dentro del cuadrado y dejaría las esquinas vacías, justo lo que un icono no debe tener. El convertidor de imágenes cambia la codificación sin tocar la geometría, y el recortador de imágenes aplica el mismo cálculo del cuadrado central cuando solo quieres el recorte.
Un re-muestreo por tamaño, no una cadena
Cada una de las 36 salidas se dibuja en una única operación de lienzo directamente de la imagen original, con suavizado activado y calidad en alto. No hay cadena de 1024 a 512 a 256: el favicon de 16 píxeles sale de un solo paso de 0,015625 desde una fuente de 1024, y el icono de macOS de 128 de un solo paso de 0,25 desde 512. Eso tiene una consecuencia visible. Como todos los tamaños comparten el mismo recorte y el mismo re-muestreo, el detalle que se lee bien en 1024 es el mismo que se vuelve ruido en 16, y la fila de vista previa de 32, 48, 64, 128 y 180 es donde un diseño débil se muestra antes de construir el ZIP.
Lo que llega en el ZIP
El archivo guarda hasta 36 PNG en carpetas ios/, android/, web/, macos/ y windows/, más 3 documentos. Si web está seleccionado hay un manifest.json: el nombre de la aplicación, un short_name recortado a los 12 primeros caracteres (My Very Long App se presenta como My Very Long), los 2 iconos PWA con el propósito any maskable, tema y fondo fijados en #ffffff, y display standalone. Si iOS está seleccionado hay un ios/Contents.json con los 14 elementos que Xcode espera, mapeando los tamaños de 20, 29, 40, 60, 76, 83,5 y 1024 puntos a los archivos PNG. Un README.md lista la tabla de tamaño y archivo por plataforma. El nombre de la descarga sale del nombre de la aplicación: todo carácter que no es letra ni dígito se vuelve guion, todo pasa a minúsculas, así que My Cool App produce my-cool-app-icons.zip. Una puntuación final se vuelve un segundo guion (my-cool-app--icons.zip), una de las razones por las que el campo de nombre se corta en 30 caracteres. El PNG es una codificación sin pérdida y el peso de un icono de 1024 lo decide el dibujo; cuando la tienda o el presupuesto web miran los bytes, el compresor de imágenes es donde la re-codificación abarata los mismos píxeles.
Adónde van los iconos: manifest, splash, tienda
Los 2 iconos del manifest son los que el navegador instala: 192 para la pantalla de instalación, 512 para el splash y la tarjeta de compartir. El propósito any maskable le dice al sistema operativo que puede recortar la imagen en un círculo o un squircle, y por eso la zona segura es el centro, alrededor del 80 % del lienzo: deja el sujeto dentro y el marco a cargo de la plataforma. Los 32 y 16 de web/ son hermanos del favicon, el icono de pestaña que el navegador busca antes de leer el manifest. El generador de favicons cubre el resto de esa familia, incluido el ICO multitamaño, el mstile de Windows y las etiquetas HTML de enlace listas para pegar. Las entradas de App Store y Play Store son las que un revisor ve primero, así que 1024 y 512 son los tamaños que valen una segunda mirada.
La misma matemática de re-muestreo en todas partes
El recorte a cobertura más un solo re-muestreo de alta calidad es un trozo pequeño de matemática que aparece por todo el sitio. El redimensionador de imágenes lo aplica a un solo objetivo, el compresor re-codifica los píxeles que salen de él, y el convertidor de tamaño de archivo es donde pesas el resultado: un ZIP de 36 PNG es donde una fuente de 1024 te cuesta en bytes, y los archivos de 16 píxeles casi no cuestan nada. Si el problema es el recorte en sí, el sujeto en la esquina y el corte del cuadrado central lo pierde, la guía de recorte de imagen pasa por la matemática del recorte antes que por la del re-muestreo. El icono es el último artefacto que esa matemática produce: un cuadrado, 36 tamaños, y el mismo centro en todos.