Design / Android / iOS / Web
One design, different platforms: how do you prepare app icons?
A PNG logo is not yet a complete app icon set. Each platform composes the image, shapes it and references assets differently. In this guide, we prepare one symbol for several uses with the exports available in Icons byFox.
1. Why do Android, iOS and the web need different icons?
The same brand symbol can be a shared source, but platforms display it and read its files differently. Resolution is only part of the difference. System masks, transparency, visible symbol size and asset references also matter. Resizing one PNG to several dimensions does not replace preparing platform exports.
On Android, an adaptive icon has separate background and foreground layers. The launcher can crop the composition into a circle or another shape and use layers for motion effects. A symbol near a square's corner may disappear. Correct layers and XML definitions are needed, plus regular images for older uses. A finished image with painted shadows and rounding does not offer the same capabilities.
For the Icons iOS export described here, we prepare opaque square PNGs inside AppIcon.appiconset. Contents.json maps files to uses in Xcode's asset catalogue. The system applies the final shape. A circular symbol can be part of the composition, but do not cut transparent corners from the whole image to mimic the iOS mask. Android adaptive layers and XML are not required here.
A website needs icons in several places: a small browser tab, a phone's home screen shortcut and web app manifests. A favicon should remain recognisable at 16 × 16 pixels. A maskable icon needs space for system cropping. References also differ: browsers read link tags and manifests, not AppIcon.appiconset or AndroidManifest.xml.
For example, a DF logo with the full company name may work in a large preview, but the name becomes a blur in a favicon. Keep only the initials for the tab. On Android, centre them on a separate background; for iOS, keep the full square without cut-out corners. It is still one visual identity, with compositions adapted to each use.
The Android notification small icon is a separate case: it needs a clear silhouette with transparent surroundings rather than a colourful composition. This follows from how the system interprets that asset, not from a different brand or logo size. Below, we separate source preparation, platform exports and post-installation checks.
2. Start with a symbol that works at a small scale
Choose a simple symbol or initial. View it close to its actual icon size, not only on a large canvas. If a letter's counter disappears or thin lines merge when scaled down, simplify the source before preparing more files.
For this exercise, a transparent PNG or SVG with a clear symbol is enough. Set the background and artwork size in the generator, then add target formats. Leave a margin around the symbol; stretching it to the edges makes it harder to use the composition with different masks.
One tool for this stage is Icons byFox. Its previews help compare the composition, while export prepares the selected platform's file structure. Editor links and installation instructions are in the sources below the article.
3. Android: layers instead of pre-rounded artwork
An adaptive icon consists of a foreground and background. The launcher applies its own mask, so exporting one image with rounded corners is not enough. Important parts of the symbol should survive a change from square to circle.
The Android export in Icons contains a res directory, density-specific images and XML files for adaptive layers. After extraction, merge the assets into your app and check android:icon and android:roundIcon references in the manifest. Do not replace the entire existing res directory: it contains other project resources too.
4. Notifications need a different symbol
A colourful app logo and a small notification icon serve different purposes. Icons' notification format prepares a white symbol on a transparent background. Android uses transparency to display the symbol; a colour photo on a solid background is not a suitable source.
If a white square appears in the status bar, first check source transparency and the asset referenced by setSmallIcon(). Choosing the correct launcher icon in the manifest does not automatically set the notification symbol. Add a separate notification format in the generator and start with a simple, clear silhouette.
5. iOS: organise the Xcode icon catalogue
The iOS export provides AppIcon.appiconset with images and a Contents.json describing their uses. Move this set into Assets.xcassets in Xcode and select it as the app icon. Having images in the repository is not enough: check the specific target and build configuration.
This format exports opaque square images. The system applies the final mask, so do not add transparent rounded corners beforehand. A PNG catalogue is one integration approach; for another workflow, such as Icon Composer, check requirements for your version of Apple's tools.
6. Web: connect the export to your site
The web package contains an ICO favicon, PNG images, an Apple touch icon and a manifest with regular and maskable variants. Copying the ZIP to a server alone changes nothing. Extract the files, set correct HTML paths and link the website manifest.
Pay attention to where the site is published. A path working at the domain root may not suit an app served under a prefix. Check in browser tools that images and the manifest return HTTP 200. If the old favicon remains, check caches before generating files again.
7. Save the source and test on a device
In Icons, choose Only this project to download the selected format, or All projects to collect added formats. Keep README.txt and the directory structure. Save an editable version with Save project; a single PNG is not a backup of the whole project.
Finally, inspect the icon in the installed app, in a notification and on the actual website. The editor preview helps assess appearance but cannot detect the wrong Xcode target, a different Android variant or an incorrect manifest path.
Include these checks when preparing a Flutter mobile app for release. Flutter shares much of the code, but platform assets and configuration still require separate checks.
Documentation for your next steps
Use installation instructions that match the versions in your project. The sources below cover these topics in more detail.