Favicon

Implementation

1. Run:

   kasy favicon --image path/to/your-favicon.png

   Recommended: a square PNG ≥512×512. Prefer a simple symbol (no long text); at 16×16, text turns into a blur.

   The command copies it to assets/branding/favicon.png, regenerates web/favicon.png and the PWA icons in web/icons/, and already rounds the corners automatically (22% of the shorter side). To adjust or disable the rounding:

   kasy favicon --image path/to/your-favicon.png --radius 22

   --radius 0 disables it and keeps sharp corners (useful if the source image is already rounded, or is a circle/monogram that shouldn't get an extra mask). Accepts any value between 0 and 50.

   Manual alternative:

   1. Replace assets/branding/favicon.png
   2. dart run flutter_launcher_icons
   3. Hard refresh in the browser

2. Force the browser to clear its cache to see the result:

   • Mac: Cmd + Shift + R
   • Windows: Ctrl + Shift + R

   The old favicon can persist for hours in normal cache.

Information

Rounded corners

Unlike the app icon (iOS/Android apply their own mask when rendering it), the browser and the PWA install draw the favicon PNG pixel-for-pixel, with no rounding at all. That's why the command bakes rounded corners in before generating the sizes: without it, the favicon looks like a hard square next to every other tab.

PWA

The PWA icon (when the user adds the site to their home screen) is also generated by the command. Background colors: web/manifest.json (background_color, theme_color).

Last updated on 08/02/2026