How to Add a Favicon to HTML
Adding a favicon to a plain HTML page is a one-line change — but the modern, complete setup is six lines and covers iOS, Android, dark mode, and PWA install.
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
The single tag every browser respects is <link rel="icon" href="/favicon.ico">. Drop favicon.ico at your site root and you're 80% done.
The remaining 20% — apple-touch-icon, PNG variants, SVG with dark-mode support, and a webmanifest — is what separates a default icon from a polished brand experience.
How it works
- 1
Generate your favicon package
Use the FetchFavicon package generator — produces every file you need plus paste-ready markup.
- 2
Drop files at the site root
favicon.ico, apple-touch-icon.png, android-chrome-192/512.png, site.webmanifest.
- 3
Paste the snippet into <head>
Six <link> tags + one <meta name="theme-color">.
Try it now
Get the HTML snippet
Favicon GeneratorFAQ
Where do the <link> tags go?+
Inside <head>, anywhere — order does not matter as long as they come before </head>.
Do I need both .ico and PNG?+
Yes. .ico is the universal fallback; PNG renders sharpest on high-DPI screens.
What about dark mode?+
Ship an SVG variant that embeds a prefers-color-scheme media query inside its <style> block.