Emoji Favicon for Svelte
Add an emoji favicon to SvelteKit in under a minute.
<link rel="icon" href="https://emojifavicons.com/rocket">How to add an emoji favicon to Svelte
SvelteKit: edit src/app.html
SvelteKit’s HTML shell is src/app.html. Add the favicon link inside %sveltekit.head%.
<!-- src/app.html --> <head> <link rel="icon" type="image/svg+xml" href="https://emojifavicons.com/rocket" /> <link rel="apple-touch-icon" href="https://emojifavicons.com/apple-touch-icon/rocket" /> %sveltekit.head% </head>
Remove static/favicon.png
SvelteKit’s starter ships a static/favicon.png. Delete it so the SVG takes priority.
Popular emoji favicons for Svelte
Click any emoji to see the Svelte-specific install snippet.
Troubleshooting
Vite cache stuck on old favicon
Run rm -rf .svelte-kit node_modules/.vite and restart svelte dev.
Favicon missing on prerendered pages
app.html applies to both SSR and prerendered pages. Hard-refresh.
Sentry / tracking overriding head
Tracking scripts run after HTML parse, they cannot override a <link rel="icon"> in the shell.
SvelteKit adapter strip
All adapters (Vercel, Netlify, Cloudflare, Node) preserve app.html.
Custom error page missing it
Add the same snippet to src/error.html or +error.svelte’s layout.
Frequently asked questions
Does it work with SvelteKit SSR?
Yes. The link is in the HTML shell that ships from the server.
Does it work with static adapter?
Yes. It is a plain <link> in the HTML.
Can I use it with Svelte (non-Kit)?
Yes — in plain Svelte, edit index.html just like Vue / React.
What about svelte:head?
Works fine — inject via <svelte:head><link ... /></svelte:head>, but app.html is simpler.