Skip to content

Add favicon link tags so Safari renders an icon#199

Merged
disnet merged 1 commit into
mainfrom
radial/3mlmj2ih/favicon-on-safari-is-not-showing-up
May 12, 2026
Merged

Add favicon link tags so Safari renders an icon#199
disnet merged 1 commit into
mainfrom
radial/3mlmj2ih/favicon-on-safari-is-not-showing-up

Conversation

@disnet
Copy link
Copy Markdown
Owner

@disnet disnet commented May 12, 2026

Summary

  • Adds explicit <link rel="icon"> (SVG + PNG fallback), apple-touch-icon, mask-icon, and theme-color to frontend/src/app.html so Safari has a discoverable favicon on first paint.
  • Previously app.html had zero icon tags; the only favicon link came from +layout.svelte's <svelte:head> and was SVG-only, which Safari ≤15 and iOS share/home-screen flows don't pick up.
  • Reuses existing /icons/icon-512.{svg,png} assets — no new image files.

Notes

  • The plan's "no other place injects favicon links" assumption was slightly off: frontend/src/routes/+layout.svelte:267 already declares <link rel="icon" type="image/svg+xml" href={Logo} />. That layout-injected tag still wins for the SVG icon (it renders after %sveltekit.head%), so the SVG line in app.html is a redundant baseline. The PNG, apple-touch-icon, and mask-icon entries are net-new and are what actually unblock Safari ≤15 and iOS.
  • Safari aggressively caches favicons. Users who already loaded the old page may need a hard reload (Cmd+Opt+R) or to clear ~/Library/Safari/Favicon Cache/ before they see the icon.

Test plan

  • npm run check — 0 errors (pre-existing warnings unchanged)
  • npm run build — succeeds; build/icons/icon-512.{svg,png} emitted and the new link tags appear in build/index.html
  • Open in Safari desktop, confirm tab favicon (hard-refresh)
  • iOS Safari → Share → Add to Home Screen, confirm icon renders
  • Chrome + Firefox: confirm no regression

Out of scope (follow-ups)

  • Dedicated 180×180 apple-touch-icon.png and 32×32 favicon to avoid sending the 21 KB 512 PNG.
  • static/favicon.ico to quiet bare /favicon.ico 404s.
  • Monochrome SVG for mask-icon (current SVG is multi-color; Safari flattens it).

🤖 Generated with Claude Code

Safari (especially ≤15 desktop and iOS) renders no favicon because
app.html had zero link tags and only an SVG icon was injected by the
+layout.svelte. Add icon (svg + png fallback), apple-touch-icon,
mask-icon, and theme-color to app.html so Safari finds a usable icon
on first paint without depending on layout-level head injection.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
@disnet disnet merged commit 6942564 into main May 12, 2026
3 checks passed
@disnet disnet deleted the radial/3mlmj2ih/favicon-on-safari-is-not-showing-up branch May 12, 2026 16:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant