ANSWER

Quick answer

Put favicon.svg, favicon.ico, favicon-48x48.png, apple-touch-icon.png, and site.webmanifest in the web root or a stable assets directory.

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

Copy the files

Put favicon.svg, favicon.ico, favicon-48x48.png, apple-touch-icon.png, and site.webmanifest in the web root or a stable assets directory.

Connected next stepSvelteKit Favicon Guide: Static Files & App HTML for the closest prerequisite or comparison.

02

Add the link elements

Use root-relative href values so nested pages resolve to the same icons. Include correct type and sizes attributes.

Connected next stepNext.js App Router Favicons: Files and Metadata for the next connected implementation decision.

03

Deploy and inspect

Request each asset directly, inspect the rendered head, and test a clean browser profile before blaming caching.

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

04

Use a small production file tree

Keep browser, Apple, and manifest assets at stable public paths. A root layout makes the URLs easy to reason about, while a dedicated /icons/ directory is equally valid when both HTML and manifest references include it consistently.

Filename case matters on common production servers. Verify the deployed output rather than relying on a case-insensitive local filesystem.

05

Debug the network response before the cache

Paste each resolved href into a new request and confirm that it returns image bytes rather than an HTML error page with status 200. Check Content-Type and decoded dimensions against the declaration.

Only after the server output is correct should you clear browser data or change a filename. Repeated cache busting can hide a path error without fixing it for new users or crawlers.

BUILD

Production file tree and code: Static HTML favicon file tree

This minimal root layout keeps browser, Apple, and manifest assets visible without a build pipeline. If the site uses /assets/icons/, change every HTML and manifest URL together.

FILE TREE
/favicon.svg
/favicon.ico
/favicon-48x48.png
/apple-touch-icon.png
/site.webmanifest
/icon-192x192.png
/icon-512x512.png
HTML
<link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
<link rel="icon" href="/favicon-48x48.png" type="image/png" sizes="48x48">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="/site.webmanifest">
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
How to Add a Favicon to a Static HTML Website
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

Does favicon.ico need a link tag?+

Many clients probe the root automatically, but declaring it removes ambiguity.

Can the files live in /assets?+

Yes, if every link and manifest path points there correctly.