Favicon vs app icon vs PWA icon: what do you need?

A favicon identifies a website

Favicons appear in browser tabs, bookmarks, and other browser surfaces. A site may provide several formats or sizes for compatibility, but the exact set depends on the browsers and platforms it supports.

A native app icon belongs to the platform app

iOS and Android use packaged icon assets for launcher and system surfaces, with platform-specific masks and generation rules. Store listing icons may have separate submission requirements.

A PWA icon supports installation

A progressive web app declares install-related icons in its manifest. Browser and operating-system behavior differs, so check current documentation and use a maskable variant when the supported surface calls for it.

Generate a source set, not a pile of guesses

Keep a clean master image and use tooling to create the needed outputs for each surface. Record where each asset is referenced so obsolete files can be removed safely when the supported platforms change.

Test each result in its destination

Inspect browser tabs, home screens, app launchers, and store previews where relevant. One image may work across several surfaces, but verify its crop, transparency, and readability instead of assuming it will.

A quick decision table

For a website, start with the favicon and any touch icon needed by your supported browser and device surfaces. For an installable web app, add the manifest icons required by the browsers you target. For a native app, generate the launcher and store assets through the platform workflow.

Some files can share a source design, but the destination formats, masks, and metadata still differ. The aim is to avoid duplicate maintenance, not to force one exported file into every surface.

Remove obsolete assets carefully

Search the HTML, manifest, native project, and deployment configuration for references before deleting old icon files. A file can appear unused in one repository folder and still be requested by a cached page or an older supported app version.

After cleanup, test a fresh browser load and a new install. Existing home-screen icons may remain cached until the user reinstalls or the platform refreshes them.

A lean starting set for a website

Most sites should begin with a browser favicon and an appropriate touch icon if they support Apple home-screen bookmarks. Add PWA manifest icons when the site is installable and needs an installed identity; add native launcher and store assets only for native applications.

Use the current browser and platform documentation to confirm the sizes and formats you need. Extra files do not improve coverage if no page, manifest, or build configuration references them.

Keep names and references maintainable

Choose filenames that identify purpose and revision, then update the HTML head, manifest, and native project references together. A small asset inventory prevents a future redesign from leaving old images attached to one forgotten surface.

After deployment, inspect the icon in the actual browser and device context. A successful build only confirms that files exist, not that every client is using the intended one.

A quick inventory exercise

List every destination where the product icon appears: browser tab, bookmark, mobile home screen, installed PWA, native launcher, and app store. Add the source file and configuration reference for each one.

This inventory usually shows which images can share a master and which need a platform-specific crop or mask. Remove duplication only after confirming every required surface still has a valid asset.