Free forever, no sign-up - get your full favicon set now
All platforms

Favicon for HTML (static site)

How to add a favicon in HTML (static site)

To add a favicon to a static HTML site, place favicon.ico at your site root and add icon, apple-touch-icon, and manifest <link> tags inside the <head> of every page. A small modern set - an ICO fallback, a 32x32 PNG, a 180 Apple touch icon, and a manifest - covers every browser and device.

What you need

  • favicon.ico at the site root (auto-discovered by browsers).
  • PNG favicons (16/32), a 180x180 apple-touch-icon, and android-chrome 192/512.
  • A site.webmanifest declaring the Android/PWA and maskable icons.

Step-by-step: add a favicon in HTML (static site)

  1. Place favicon.ico at the root. Copy favicon.ico to the top level of your site (next to index.html). Browsers request /favicon.ico automatically even without a link tag.
  2. Add the link tags to <head>. Inside the <head> of each page, add the icon, apple-touch-icon, and manifest link tags shown below. Use root-absolute paths.
  3. Add a web manifest. Create site.webmanifest listing the 192, 512, and maskable 512 icons with their sizes and purpose, then link it from the head.
  4. Verify. Open the page, check the tab icon, and add the site to a phone home screen to confirm the Apple touch icon and manifest icons load.
Paste this complete modern set into every page's <head>:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0f172a">

Common mistakes to avoid

  • Referencing icons with relative paths that break on nested URLs; use root-absolute paths like /favicon.ico.
  • Shipping only a 512 PNG and letting the browser scale it to 16x16, which looks muddy.
  • Omitting the manifest, so Android home-screen and PWA icons fall back to a generic glyph.
  • Adding transparency to the Apple touch icon; iOS fills transparent pixels with black.
Free forever, no sign-up

Generate a complete icon set for HTML (static site)

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 HTML (static site). Free, private, and generated in your browser.

Open the generator

Frequently asked questions

Where does favicon.ico go on a static HTML site?
At the root of your site, next to index.html. Browsers automatically request /favicon.ico even if you never add a link tag, so the root location is the reliable fallback.
What link tags do I need for a modern HTML favicon?
An icon link to favicon.ico, a PNG icon (32x32), an apple-touch-icon (180x180), and a manifest link. Add a theme-color meta tag to tint mobile browser UI.
Do I still need favicon.ico in 2026?
Yes, as a fallback. Browsers and some tools auto-request /favicon.ico, and older clients prefer it. Pair it with PNG icons and a manifest for modern, high-DPI rendering.
Why does my HTML favicon not show up?
Check the file paths return 200 (a 404 silently downgrades to the default), confirm the link tags are inside <head>, then hard-refresh because browsers cache favicons aggressively.

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.