Flutter Logo Change: Comparing the Previous and Updated Designs

Before you start

A Flutter logo change usually means replacing the app icon and launch-screen artwork that come from the project templates. Flutter itself does not embed one runtime logo that you edit from Dart code. The change is made in the native Android and iOS project folders, while web uses the icons and manifest files under the web directory.

Work on a copy of the project or commit the current state first. Prepare a square master image at a larger size, such as 1024 by 1024 pixels, so generated icon files have enough detail. For Android, check whether the project uses the older mipmap folders or the newer adaptive icon XML. For iOS, confirm that the asset catalog contains the current AppIcon set.

Step-by-step instructions

Start by generating all required icon sizes from the master image. You can use the Image Resize & Convert tool in Logo Lab, a package such as flutter_launcher_icons, or an image editor. If you use flutter_launcher_icons, add it as a development dependency and point its configuration to the master image.

For Android, replace the launcher icons. In a template project these are PNG files under android/app/src/main/res/mipmap-mdpi, mipmap-hdpi, mipmap-xhdpi, mipmap-xxhdpi, mipmap-xxxhdpi and, in many templates, mipmap-xxxhdpi-v26 for the round icon. Keep the same filenames if you are replacing files manually.

If your project has an adaptive icon, do not only replace the foreground PNG. Check android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml or a similar adaptive icon XML. It points to a background color or drawable and a foreground image with safe-zone padding.

For iOS, open the asset catalog and find the AppIcon set. The catalog contains slots for different sizes, including iPhone, iPad and marketing sizes. Replace each slot that your build uses. Avoid leaving old artwork in slots that the current target can select.

For web, the relevant files are usually in the web/icons folder. Replace the generated PNG icons and update web/manifest.json so the name, short name and icon paths still match the files. The favicon is separate from the PWA icons.

For a launch screen, replace the splash artwork in the native project. Android templates may use a launch theme defined in styles.xml or values-v31 styles, and iOS uses the LaunchScreen storyboard or a generated launch image set.

Check the output

Run the app on a device or emulator and look at the launcher, not only at the screen after startup. On Android, check the square icon, the round icon if your launcher uses one, and the adaptive-icon treatment with masks and backgrounds. On iOS, install a build rather than judging the preview in a simulator screenshot alone.

For web, open the manifest URL expected by the project and confirm that its icon paths resolve. Inspect the browser tab for the favicon and use a fresh profile or hard reload so cached icons do not show the old mark.

Check format limits before assuming a problem. Small launcher sizes can make fine strokes disappear, rounded masks crop outer details, and adaptive foreground artwork should keep important shapes inside the central safe area.

Common problems and next steps

The most common issue is that only one icon size or one platform was replaced. Compare the previous and updated designs on the same device, then verify every size and platform folder again. A launcher may also cache an old icon; renaming the app or clearing the launcher cache can help, but the build must already contain the new files.

If the icon is blurry, the source image was probably too small for the largest required size. Regenerate from a larger master and keep alpha as needed. If Android shows a plain shape, the adaptive icon XML may be missing, broken, or still referencing an old drawable.

If iOS shows the old icon after a clean-looking build, confirm that the asset catalog is included in the target and that the old file was not left in a slot selected by the current device. If web still shows the old favicon, check both the HTML link and the manifest entry, then reload without cached response data.

For projects that use generated launch screens or a splash package, update the package configuration and regenerate instead of editing only exported output. Keep the original icon set until the new design is verified across the platforms you release.