ANSWER

Quick answer

Put the generated favicon package in static so the adapter can expose files at predictable public URLs. Keep files required by the manifest together and account for any configured paths.base value.

Last verified
July 31, 2026
Evidence
Primary documentation plus a route-specific implementation example
Primary sources
2
01

Project paths and constraints

Put the generated favicon package in static so the adapter can expose files at predictable public URLs. Keep files required by the manifest together and account for any configured paths.base value.

Files in static bypass Vite processing, while paths.base affects applications mounted below the hostname root. Global metadata can live in app.html or the root layout, but should not be duplicated.

Connected next stepAngular Favicon Guide: Assets, HTML & Build Output for the closest prerequisite or comparison.

02

Declare favicon metadata once

Use app.html for truly global static head elements or a root layout’s svelte:head block when the metadata belongs to the application layout. Avoid emitting duplicate icon candidates from nested layouts.

Use app.html for fixed document-wide links or the root +layout.svelte for metadata that belongs to the application layout. Do not emit the same candidates again from child layouts.

Connected next stepHow to Add a Favicon to a Static HTML Website for the next connected implementation decision.

03

Build, deploy, and verify

Build with the production adapter, inspect the generated or server output, and request the icon URLs on both preview and custom domains before clearing caches.

Adapter output can differ from the dev server. A missing production icon usually means the static file was excluded, the base prefix was omitted, or a platform route shadows it.

Connected next stepOpen the most relevant production tool and verify the decision with a working output.

04

Test static files through the chosen SvelteKit adapter

Build with the production adapter and locate the copied static assets in its real output. Account for paths.base and any relative-path configuration instead of assuming the adapter publishes the same URLs as the development server.

Request the icons through both the platform preview and final custom domain. Inspect a server-rendered response and a client-navigated route to ensure global head markup remains stable and no route or hook shadows the static asset.

BUILD

Production file tree and code: SvelteKit static assets and global head

The adapter publishes static files while app.html or one root layout supplies shared metadata. Account for paths.base before copying these literal root examples.

FILE TREE
static/
├── favicon.svg
├── favicon.ico
├── apple-touch-icon.png
└── site.webmanifest
src/app.html
HTML
<svelte:head>
  <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
  <link rel="manifest" href="/site.webmanifest" />
</svelte:head>
DOWNLOADABLE EVIDENCE

Review the headings, sources, implementation artifact, and update record for this guide as structured JSON.

Download guide evidence ↓
Primary references
Evidence scope
Guide
SvelteKit Favicon Guide: Static Files & App HTML
Coverage
Client behavior can change by browser, operating system, platform version, cache state and deployment configuration. Unperformed manual observations are not claimed.
Q&A

Questions, answered

Should favicon tags go in app.html or svelte:head?+

Use app.html for fixed global markup or one root layout head for application-managed metadata. Avoid repeating the same links in nested layouts.

Why is the file present in static but absent online?+

The adapter, configured base path, deployment include rules, or a platform route can change the final URL. Inspect the adapter output and public response.