A reliable HTML favicon does not depend on one magic tag. It uses a small set of reachable files and links placed in the head. This procedure covers modern tabs, older clients and mobile shortcuts without multiplying historical variants.
Prepare the files
Start with a square symbol that remains readable when very small. Put favicon.ico, favicon.svg, apple-touch-icon.png, site.webmanifest and the PNG files referenced by the manifest in the public folder served at the domain root.
A path such as /favicon.svg is absolute from the domain. It therefore stays correct on /products or /blog/article, unlike favicon.svg, which can be resolved relative to the page.
Add the elements to head
Declare the SVG first with rel icon and type image/svg+xml, then the ICO with rel icon and sizes any. Add rel apple-touch-icon for iOS and rel manifest for web app installation.
The type must match the file that is actually served. Do not rename a PNG to .ico: the contents and header must use the ICO format.
| Purpose | Relation | File |
|---|---|---|
| Modern browser | icon | /favicon.svg |
| Compatibility | icon | /favicon.ico |
| iOS home screen | apple-touch-icon | /apple-touch-icon.png |
| Web app | manifest | /site.webmanifest |
Deploy without breaking paths
Open every file URL directly after deployment. The response must be an image or manifest with a successful status, not a login or 404 HTML page returned with a misleading status.
If the site lives under a subdirectory, adjust the paths or public base. Inspect the final page in developer tools: the browser should request the expected URLs without redirecting to another host.
Verify the result
Reload with cache disabled and inspect the link elements in the produced DOM. Then test a tab, a bookmark and, when relevant, adding the site to a real device home screen.
A search-result favicon also follows the search engine's rules and crawl schedule. An icon visible in the browser therefore does not guarantee an immediate update in search results.
Primary sources
Frequently asked questions
Does the favicon element go in body?
No. Link elements that describe icons and the manifest belong in the document head.
Is a root favicon.ico enough?
It is a useful fallback, but it does not describe an Apple Touch icon or installable manifest icons. Declare the formats for those purposes.
Why use a path beginning with /?
It starts at the domain root and prevents a nested page from looking for the file in its own folder.