Cómo cambiar el ícono de la aplicación en Flutter (Launcher)

Cambiar el ícono de la aplicación en Flutter es de esas tareas que parecen simples, pero que si no sigues el proceso exacto pueden convertirse en un dolor de cabeza: íconos que no cambian, recursos borrosos, errores raros en iOS… Por suerte, existe una forma estandarizada y ampliamente utilizada: el paquete flutter_launcher_icons.

Cuando creé mi primer proyecto, Flutter traía su clásico ícono azul por defecto. Y claro, para publicar en Google Play o App Store necesitaba uno propio. Ahí fue cuando empecé a usar este paquete por primera vez, y desde entonces lo uso siempre porque evita una buena cantidad de configuraciones manuales.

A continuación te explico paso a paso cómo cambiar el ícono del launcher tanto en Android como en iOS, con consejos prácticos, errores comunes y configuraciones que uso en mis proyectos.

Cuando creamos un proyecto de Flutter, viene con el ícono predeterminado de Flutter. Para que la aplicación se publique en tiendas como Google Play Store, Apple App Store, etc., se puede cambiar el ícono predeterminado.

El paquete se explica así mismo

Una herramienta de línea de comandos que simplifica la tarea de actualizar el ícono de inicio de su aplicación Flutter. Totalmente flexible, lo que le permite elegir la plataforma para la que desea actualizar el ícono del iniciador y, si lo desea, la opción de mantener su antiguo ícono del iniciador en caso de que desee volver atrás en el futuro.

¿Por qué cambiar el ícono predeterminado de Flutter?

El ícono de la aplicación es la primera impresión que tendrá el usuario al buscar tu app. Si no lo cambias, verán el mismo ícono azul que traen todas las apps recién creadas con Flutter.

Además:

• Las tiendas de apps requieren un ícono final y válido.
• Los íconos predeterminados no se aceptan en producción.
• Ayuda a la identidad visual de tu marca o proyecto.
• En mi caso, lo primero que noté fue que tener el ícono por defecto no solo daba mala imagen, sino que también me complicaba pruebas internas porque tenía varias apps con el mismo ícono.

Requisitos previos y preparación del archivo de ícono

Antes de tocar código, prepara tu imagen:

• Formato recomendado: PNG.
• Fondo: iOS exige que ocupe toda la imagen (evita transparencias).
• Tamaño mínimo sugerido: 512×512 px.
• Evita bordes delgados o detalles demasiado finos, porque Android usa versiones muy pequeñas (36–192 px).

En varios proyectos me pasó que el ícono se veía borroso en dispositivos Android económicos. La causa casi siempre era un PNG con baja resolución. Dale prioridad a un archivo grande y nítido.

Instalar flutter_launcher_icons en tu proyecto

El uso del paquete es bastante simple.

Primero agreguemos el paquete a pubspec.yaml:

dependencies:
  flutter_launcher_icons: ^0.9.2

Luego, todo lo que necesita hacer es proporcionar la ruta de su icono como se muestra y eso es todo. También puede proporcionar diferentes rutas para Android e IOS.

flutter_icons:
 android: true
 ios: true
 image_path: "assets/tiger.png" 
 #adaptive_icon_background: "assets/logo.png"
 #adaptive_icon_foreground: "assets/logo.png" 

A continuación se muestra la lista completa de atributos que puede especificar dentro de la configuración de los iconos de Flutter Launcher.

android: y iOS:

1. true: anula el icono predeterminado del iniciador de Flutter existente para la plataforma especificada
2. false: ignorar la creación de íconos de inicio para esta plataforma
3. icon/path/here.png: esto generará un nuevo ícono de aplicación para la plataforma con el nombre que especifiques, sin eliminar el antiguo ícono de inicio predeterminado de Flutter.
4. image_path:

Consideraciones sobre tamaños y formatos del ícono

Flutter Launcher Icons se encarga de generar automáticamente todas las dimensiones, pero tú debes entregar una imagen base con buena calidad.

• Usa PNG sin compresión.
• Evita fondos transparentes para iOS.
• Puedes tener imágenes distintas para cada plataforma si lo necesitas.

La ubicación del archivo de imagen del icono que desea utilizar como icono del iniciador de aplicaciones

image_path_android: la ubicación del archivo de imagen del icono específico para la plataforma Android (opcional; si no se define, se usa image_path)

image_path_ios: la ubicación del archivo de imagen del icono específico para la plataforma IOS (opcional; si no se define, se usa image_path)

Nota: los iconos de iOS deben ocupar toda la imagen y no contener bordes transparentes.

Iconos adaptativos en Android: background y foreground

Los siguientes dos atributos solo se usan cuando se genera el ícono del iniciador de Android

1. adaptive_icon_background: el color (por ejemplo, "#ffffff") o recurso de imagen (por ejemplo, "assets/logo.png") que se usará para completar el fondo del icono adaptable.
2. adaptive_icon_foreground: el recurso de imagen que se usará para el icono de primer plano del icono adaptable

adaptive_icon_background: "#ffffff"
adaptive_icon_foreground: "assets/logo.png"

Después de editar el archivo pubspec.yaml como este, todo lo que necesita hacer es ir a su terminal y ejecutar este código.

 ejecutar flutter pub flutter_launcher_icons:principal

Y esto es todo.

En mi caso, emplee la siguiente imagen:

Y obtuve:

Consideraciones especiales para iOS (sin bordes transparentes)

iOS es más estricto:

• La imagen debe ocupar todo el lienzo.
• No uses transparencias.
• Evita el estilo “círculo dentro de cuadrado”, porque lo recortará.

Cuando usé mi primera imagen, tuve que ajustarla porque tenía un pequeño borde transparente que hacía que el ícono se viera encogido en pantalla de inicio.

Ejecutar el comando para generar el nuevo ícono

Una vez que tengas el pubspec.yaml listo, ejecuta:

$ flutter pub run flutter_launcher_icons:main

Yo siempre reviso la consola para asegurarme de que generó correctamente los recursos. Si ves advertencias sobre tamaños, cámbialos antes de compilar.

Cuando hice esto la primera vez, me tranquilizó ver el mensaje de generación exitosa porque significa que Flutter creó todas las variantes para Android y iOS sin conflicto.

Problemas comunes y cómo solucionarlos

El ícono no cambia en Android

• Borra la carpeta build/.
• Ejecuta flutter clean.
• Vuelve a correr el comando del paquete.

A veces Android Studio cachea íconos viejos.

El ícono no aparece en iOS

• Abre el proyecto en Xcode.
• Revisa Assets.xcassets → AppIcon.
• Limpia y reconstruye: flutter clean.

El simulador de iOS es conocido por cachear íconos, así que prueba en un dispositivo físico si dudas.

Íconos borrosos o recortados

La imagen base tiene baja resolución.

• El borde es muy delgado y se pierde al escalar.
• En iOS puede estar recortándose por un padding no intencional.

En mi caso, la mayor parte de los problemas se debieron a usar un PNG demasiado pequeño. Desde entonces, nunca uso menos de 1024×1024 px.

Conclusión

Cambiar el ícono de la aplicación en Flutter es muy sencillo si sigues el proceso con orden:

• Preparas un buen ícono,
• Configuras el paquete,
• Ejecutas el comando correcto.

Gracias a flutter_launcher_icons, no tienes que modificar manualmente carpetas de Android o iOS, y puedes mantener coherencia visual sin dolores de cabeza.

Si quieres un resultado profesional desde el primer intento, usa un archivo de buena calidad, evita transparencias en iOS y no olvides limpiar el proyecto si el ícono no cambia.

Preguntas frecuentes

• ¿Qué tamaño debe tener el ícono para Flutter?
  • Idealmente 512×512 o 1024×1024 px, siempre en PNG.
• ¿Puedo usar SVG?
  • No directamente. Debes exportarlo a PNG.
• ¿Cómo regenero los íconos si cambio la imagen?
  • Modifica el archivo fuente y vuelve a ejecutar:
• flutter pub run flutter_launcher_icons:main
  • ¿Puedo usar distintos íconos para Android e iOS?
• Sí, usando image_path_android e image_path_ios.