Where do I put the favicon in a SvelteKit project?

In the static folder. SvelteKit serves static/ from the site root, so static/favicon.ico becomes /favicon.ico. Add the link tags to the of src/app.html, using the %sveltekit.assets% path prefix.

Why is my SvelteKit favicon not updating?

Usually browser favicon caching, or the default static/favicon.png is still present. Replace the actual file in static/, confirm the link tag in app.html points at it, then hard-refresh or open a private window.

Should I use %sveltekit.assets% for the favicon path?

Yes. %sveltekit.assets% resolves to your configured assets/base path, so the favicon keeps working when the app is deployed under a subpath or a separate asset host. A bare /favicon.ico can break in those cases.

Do I edit app.html or a +layout file for the favicon?

Put the icon link tags in src/app.html, which wraps every page. You can also add them via svelte:head in a root +layout.svelte, but app.html is the simplest single place for site-wide icon tags.

All platforms

Favicon for SvelteKit

How to add a favicon in SvelteKit

To add a favicon in SvelteKit, put your icon files in the static folder (served at the site root) and add the <link> tags to the <head> of src/app.html. A new SvelteKit project ships a default static/favicon.png referenced by %sveltekit.assets%/favicon.png that you should replace with your own.

What you need

favicon.ico plus PNG favicons (32x32), a 180x180 apple-touch-icon, and android-chrome 192/512.
The static folder, which SvelteKit serves from the site root.
A site.webmanifest for Android/PWA and maskable icons, linked from src/app.html.

Step-by-step: add a favicon in SvelteKit

Generate your icon set. Run your logo through Logo2Favicon to get favicon.ico, the PNG sizes, the Apple touch icon, the PWA icons, a maskable icon, and the manifest - in-browser, nothing uploaded.
Drop the files in static/. Replace the starter static/favicon.png and add favicon.ico, favicon-32x32.png, apple-touch-icon.png, and site.webmanifest to the static folder. SvelteKit serves these from /.
Add link tags to src/app.html. Open src/app.html and add the icon, apple-touch-icon, and manifest link tags inside the %sveltekit.head% area of <head>. Use %sveltekit.assets% as the path prefix.
Build and verify. Run npm run build and preview. Confirm the tab icon and that /favicon.ico and /site.webmanifest return 200.

Add inside <head> of src/app.html (use the %sveltekit.assets% prefix):

<link rel="icon" href="%sveltekit.assets%/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="%sveltekit.assets%/apple-touch-icon.png">
<link rel="manifest" href="%sveltekit.assets%/site.webmanifest">

Common mistakes to avoid

Leaving the default static/favicon.png and its link tag in app.html, so the starter icon still loads.
Putting icons in src/lib/ and importing them - those get hashed; the static folder is what maps to the root.
Hard-coding /favicon.ico instead of %sveltekit.assets%/favicon.ico, which can break under a configured base path.
Forgetting the manifest, so Android home-screen and PWA installs fall back to a generic glyph.

Free forever, no sign-up

Generate a complete icon set for SvelteKit

One logo in, every file out: favicon.ico, the PNG sizes, the Apple touch icon, Android and PWA icons, a maskable icon, the web manifest, and a copy-paste snippet ready for SvelteKit. Free, private, and generated in your browser.

Open the generator

Frequently asked questions

Where do I put the favicon in a SvelteKit project?: In the static folder. SvelteKit serves static/ from the site root, so static/favicon.ico becomes /favicon.ico. Add the link tags to the <head> of src/app.html, using the %sveltekit.assets% path prefix.
Why is my SvelteKit favicon not updating?: Usually browser favicon caching, or the default static/favicon.png is still present. Replace the actual file in static/, confirm the link tag in app.html points at it, then hard-refresh or open a private window.
Should I use %sveltekit.assets% for the favicon path?: Yes. %sveltekit.assets% resolves to your configured assets/base path, so the favicon keeps working when the app is deployed under a subpath or a separate asset host. A bare /favicon.ico can break in those cases.
Do I edit app.html or a +layout file for the favicon?: Put the icon link tags in src/app.html, which wraps every page. You can also add them via svelte:head in a root +layout.svelte, but app.html is the simplest single place for site-wide icon tags.

Favicon guides for other platforms

New to favicons? Read the complete favicon guide and the icon size cheatsheet, or jump straight to the favicon generator.