How to add a favicon to your website
Adding a favicon takes two steps: create the icon file, then link it in your HTML. This guide walks through both, for static sites and modern frameworks.
Create a favicon free →Step 1 — Create your favicon
Start from a square image of at least 512×512 px. Our free favicon generator converts it to ICO and PNG in all standard sizes, locally in your browser. If you are unsure which format to use, read ICO vs PNG.
Put the generated files in the root of your website (so they are reachable at https://your-site.com/favicon.ico). Keep at least:
favicon.ico(browser fallback)favicon-32x32.pngandfavicon-16x16.pngapple-touch-icon.png(180×180)
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
Browsers cache favicons aggressively. Press Ctrl+F5 (Windows) or Cmd+Shift+R (Mac), or open the site in a private window, to see the new icon.
Framework notes
- Next.js: place
favicon.icoin theapp/directory; it is served automatically. - Vite / React: keep icons in
public/and reference them fromindex.html. - WordPress: use Appearance → Customize → Site Identity, or upload via your theme's header.
Why does my favicon not show up?
Most often it is caching. Otherwise check: the file is in the site root, the path in the <link> is correct, and the file is a valid ICO/PNG. Our FAQ covers more troubleshooting.