Skip to main content

Favicons and PWA

Favicons are the small icons browsers show in tabs, bookmarks, and address bars. Combined with a PWA manifest, they let visitors install your site to their home screen as a standalone app on mobile and desktop.

The flexweg-favicon plugin generates everything from one uploaded square image. This page covers the visitor experience; for configuration see the flexweg-favicon plugin reference.

What visitors get​

Browser tabs​

Every browser shows the 96×96 PNG favicon next to the tab title:

┌─[ 🟦 Example Site - Welcome  ]──[ 🟧 Other tab     ]─

Browser bookmarks​

Same icon appears in the bookmarks bar.

iOS home screen​

When a user adds the site to their iOS home screen, iOS uses the 180×180 Apple touch icon with a white background (Safari clips dark icons against dark wallpaper otherwise — the plugin always emits a white background to avoid this).

Android home screen / launcher​

Android uses the 192×192 + 512×512 maskable PNGs declared in site.webmanifest. Maskable icons let Android adapt the shape (circle, square, rounded square) to match the launcher's design system.

Splash screen (PWA install)​

When installed via "Add to home screen" → opening the app, Android and iOS show a splash screen with:

  • The 512×512 icon centred
  • The PWA's background_color (configurable in plugin settings)
  • The PWA's name (configurable in plugin settings)

Address bar / browser chrome tint​

When PWA is installed and theme_color is set, browsers tint their UI to match — Safari iOS pulls this from <meta name="theme-color">; Chrome Android uses manifest.theme_color.

What "install to home screen" looks like​

Modern browsers detect a valid PWA manifest and prompt the user to install:

  • Chrome desktop — install icon (⊕) appears in the address bar after a few visits
  • Safari iOS — Share button → "Add to Home Screen"
  • Chrome Android — auto-prompts after engagement, or via menu → "Add to Home screen"
  • Edge desktop — install icon in the address bar

The installed app:

  • Launches without browser chrome — no address bar, no tabs (when display: standalone)
  • Has its own icon on the home screen / desktop
  • Survives browser closure (Chromium variants implement this as a Chrome window with chrome hidden)

When does this make sense?​

PWA installation is most valuable for sites visitors return to often:

  • News sites — frequent visits, social-feed feel
  • Web apps disguised as content sites (dashboards, calculators, tools)
  • Documentation — useful as a sidebar reference
  • Personal blogs with regular readers

For brochure sites visitors hit once, PWA install adds little value but costs nothing — leaving the favicon plugin enabled is still fine.

What gets injected into your pages​

Every published page's <head> includes:

<link rel="icon" type="image/png" href="/favicon/favicon-96x96.png?v=1735689600000" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg?v=1735689600000" />
<link rel="shortcut icon" href="/favicon/favicon.ico?v=1735689600000" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png?v=1735689600000" />
<link rel="manifest" href="/favicon/site.webmanifest?v=1735689600000" />
<meta name="theme-color" content="#3b82f6" />

The ?v=… query strings cache-bust whenever the favicon is re-uploaded.

What site.webmanifest looks like​

{
  "name": "Example Site",
  "short_name": "Example",
  "icons": [
    { "src": "/favicon/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
    { "src": "/favicon/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#3b82f6",
  "background_color": "#ffffff",
  "display": "standalone",
  "start_url": "/"
}

start_url is hardcoded to /. Override the manifest manually via the PWA tab → Re-upload manifest flow if you want a different start URL.

When changes apply​

  • Newly published pages include the new <link> URLs (with the new ?v= query string).
  • Already-published pages keep their old <link> tags. Browsers honour the cache-bust query string but only on the next regeneration of those pages.

To roll out a favicon change site-wide: Themes → Regenerate site → All HTML pages.

For a PWA settings change (theme colour, display mode, name) where you don't want to re-render every page, use the Re-upload manifest button in the favicon settings — it pushes only site.webmanifest, and browsers fetch it fresh on next visit.

Continue​