How to Add a Favicon to a Flutter Web App

Treat the web folder as document metadata

A Flutter web project contains an HTML shell and web app manifest outside the widget tree. Replace the favicon file under web, add the intended icon link stack to web/index.html, and keep install icons in web/icons or another declared public path.

Changing a mobile launcher icon or a Dart Image widget does not update the browser favicon. Browser discovery happens in the generated document head before Flutter renders the application canvas.

Connected next stepHow to Add a Favicon to a Static HTML Website for the closest prerequisite or comparison.

Keep manifest and browser icons separate

Use rel=icon for tabs and bookmarks. Use the manifest icons array for installed web-app surfaces, with accurate src, sizes, type, and purpose values. Add a separate Apple touch icon when iPhone home-screen presentation matters.

Check relative paths from the manifest URL as well as paths from index.html. A manifest stored at /manifest.json resolves a relative icons/icon-192.png differently from a manifest placed in a nested directory.

Connected next stepPWA and Maskable Icons: Designing for Adaptive Shapes for the next connected implementation decision.

Inspect flutter build web

Run the production web build and inspect build/web. Every file named by index.html and manifest.json must be present at the corresponding deployed URL after any base-href transformation.

Test through the final host because a CDN or SPA rewrite can return the Flutter shell for a missing image. Confirm image bytes and Content-Type before clearing a browser favicon cache.

Connected next stepOpen the most relevant production tool and verify the decision with a working output.

Account for base href and hosting layout

Flutter web deployments frequently live below a path such as /app/ rather than at the hostname root. The base element used by the generated document affects relative URLs, but root-relative icon links always start at the hostname. Choose intentionally. If the same build must work at multiple prefixes, verify how the deployment command and hosting adapter rewrite base href and whether manifest URLs follow. Do not infer success from the local development server, which may serve source assets through behavior the production host does not reproduce.

A service worker adds another cache owner. Flutter’s generated web application can retain build resources according to its service-worker strategy, while the browser maintains separate favicon and HTTP caches. When an update appears inconsistent, inspect the current index.html and asset responses first, then check service-worker control and cache storage. Rotating every filename at once hides which layer failed. Preserve a stable canonical icon where outside clients expect it and version build-managed assets through one documented release process.

Keep mobile, web, and install branding coordinated

A Flutter project may have Android launcher icons, iOS application icons, browser favicons, Apple web clips, and manifest application icons. They can derive from one approved brand master, but they are built by different pipelines and rendered inside different masks. Treat the web files as their own output contract. A change to native platform configuration should trigger a review of web artwork, not an assumption that the browser build automatically inherited it.

Before release, run flutter build web, enumerate the output, and open the emitted index and manifest rather than reviewing only files under web. Serve build/web through a production-like static server at the intended prefix. Test an ordinary tab, an installed or saved shortcut where supported, and a repeat visit under service-worker control. Store the command, Flutter version, output inventory, and observed public URLs with the release so a framework upgrade can be compared against known behavior.

Flutter web release checklist

Treat favicon verification as part of the compiled web release. Confirm the intended files exist under web before building, run the same flutter build web command used by production, and inspect their emitted paths under build/web. Review the final index.html, base href, manifest URL, manifest icon sources, and service-worker inventory. Serve that directory at the real path prefix and request assets through the same CDN or proxy rules used in production. Confirm that unknown icon paths do not fall back to index.html. Test a cold browser tab, a controlled refresh, and an installed or saved surface where supported. When upgrading Flutter, compare the output inventory and generated service-worker behavior with the previous verified release. This evidence distinguishes a framework build change from a browser cache issue and keeps native launcher branding, web tabs, and installable-web-app icons coordinated without pretending they use one automatic configuration.