Prepare una imagen de origen que funcione en todos los tamaños
Un buen icono de aplicación debe seguir siendo reconocible desde un favicon de navegador diminuto de 16 × 16 hasta una imagen grande de ficha de tienda de 512 × 512. Comience con una imagen de origen cuadrada, preferiblemente de 1024 × 1024 píxeles o más, con una marca simple y de alto contraste en el centro.
Evite textos pequeños, contornos finos y detalles visuales que solo funcionen en tamaños grandes. A menudo desaparecen cuando el navegador o el sistema operativo renderiza el icono en dimensiones pequeñas. Si su logotipo es rectangular, colóquelo primero sobre un lienzo cuadrado en lugar de estirarlo.
- Use PNG cuando el diseño original incluya transparencia o bordes de logotipo nítidos.
- Mantenga la marca principal centrada y deje suficiente espacio visible a su alrededor.
- Use un color de fondo sólido si también necesita salida para iOS.
- Previsualice el favicon más pequeño antes de descargar el paquete final.
Favicons web, iconos Apple Touch e iconos de manifiesto PWA
La exportación para Web/PWA cubre los recursos de navegador y aplicaciones web instalables que suelen ser necesarios en una carpeta pública. Incluye tamaños de favicon PNG para navegadores modernos, un favicon.ico opcional para mayor compatibilidad con sistemas antiguos y un icono Apple touch para marcadores de la pantalla de inicio de iOS.
Para las PWA instalables, el paquete también incluye iconos de manifiesto de 192 × 192 y 512 × 512. Al habilitar la opción enmascarable, se añade un icono diseñado para conservar los elementos importantes cuando un dispositivo aplica su propia forma de icono.
Se incluye la configuración del manifiesto, no la implementación completa de PWA
El site.webmanifest y el fragmento de etiquetas head generados aceleran la configuración de iconos. Su aplicación aún necesita el resto de la configuración PWA, como el service worker adecuado y los requisitos de instalación.
Recursos de lanzador e icono adaptativo para Android
Los dispositivos Android usan recursos de lanzador específicos por densidad para que el sistema operativo pueda elegir una imagen adecuada para cada densidad de pantalla. La exportación Android organiza estos archivos en los directorios habituales res/mipmap-* y puede incluir variantes de lanzador redondas y un icono de ficha de Google Play de 512 × 512.
Los iconos adaptativos son recursos nativos de lanzador Android que combinan capas de primer plano y fondo mediante definiciones XML. En el modo de imagen única, este generador crea recursos derivados compatibles a partir de su imagen de origen y del color de fondo seleccionado.
Importante: los iconos adaptativos no separan automáticamente el diseño
Una sola imagen plana no puede dividirse de forma fiable en un primer plano de logotipo realmente editable y una capa de fondo independiente. Para obtener mejores resultados, mantenga el logotipo centrado y con un margen generoso. Para iconos adaptativos totalmente fieles a la marca, use diseños independientes de primer plano y fondo en su proyecto Android.
AppIcon.appiconset para iOS y Xcode
La exportación iOS crea una carpeta AppIcon.appiconset diseñada para un catálogo de recursos de Xcode. Incluye las variantes de imagen necesarias para iPhone, iPad y App Store, junto con un archivo Contents.json que asigna cada imagen generada al tipo de dispositivo, tamaño en puntos y escala esperados.
Los iconos de aplicación iOS se aplanan sobre el color de fondo seleccionado. Esto evita generar iconos transparentes y mantiene el conjunto de recursos alineado con los requisitos habituales de iconos para App Store.
- No redondee el diseño previamente; iOS aplica su propia máscara de icono.
- Use un color de fondo que coincida con la identidad de su producto.
- Arrastre AppIcon.appiconset a Assets.xcassets y selecciónelo como el conjunto de iconos de la aplicación de destino.
- Revise el icono generado en Xcode antes de enviar una compilación.
Iconos PWA enmascarables frente a iconos adaptativos de Android
Estos dos términos se confunden fácilmente porque ambos tratan formas de icono controladas por el sistema. Sin embargo, no son intercambiables.
Un icono enmascarable es un archivo de imagen del manifiesto de una aplicación web que proporciona espacio seguro adicional para las máscaras de lanzador de las PWA instaladas. Un icono adaptativo de Android es un recurso Android nativo formado por capas de primer plano y fondo, además de referencias XML. Habilite ambos si distribuye una PWA y una aplicación Android nativa, pero use cada tipo de archivo en la configuración de su propia plataforma.
Su imagen de origen permanece en el navegador
Este escenario está diseñado para el procesamiento de imágenes en el navegador. La imagen de origen se transforma localmente en el navegador en lugar de cargarse a un servidor remoto de procesamiento de imágenes, algo útil al preparar diseños de productos aún no publicados, logotipos de clientes o recursos internos de aplicaciones.
La página aún carga el código de la aplicación y los recursos de procesamiento desde el sitio web. El procesamiento local significa que los datos de la imagen no necesitan enviarse a un servidor para realizar la conversión.
