Step 1 — Generate your favicon files
Start from a square image, at least 512×512 pixels. Non-square sources get stretched or padded, and small sources can never be upscaled cleanly.
FaviconPal converts your image and produces the whole set locally in your browser — the ICO, the PNG sizes, the HTML snippet and the manifest. Nothing is uploaded to a server.
Prefer to convert a specific source format? Use WebP to ICO, JPG to ICO, SVG to ICO or AVIF to ICO.
Step 2 — Upload the files to your site root
Place the files in the same directory as your index.html, not in a subfolder. Browsers look for favicon.ico at the root of the domain by default, so this location works even before you write any markup.
/images/favicon.ico. It will still work if you declare the full path, but browsers will also keep requesting /favicon.ico and getting a 404. Put it at the root.Step 3 — Add the HTML to your <head>
Paste this into the <head> section of every page — after the <title> and meta tags. Order matters: the ICO goes first so older browsers, which stop at the first supported entry, pick it up.
A shortcut for the same thing in PHP-based themes and includes:
Step 4 — Add the web app manifest
The manifest is what Android and installable web apps read. Create site.webmanifest in your site root:
The theme_color is what Android tints the status bar with once the site is installed, so set it to your brand colour for a coherent look.
Step 5 — Clear the cache and verify
This is the step almost everyone skips, and it is the reason people think their new favicon "did not work". Browsers cache favicons far longer than ordinary page assets.
- Hard refresh:
Ctrl+Shift+Ron Windows orCmd+Shift+Ron macOS. - Check the file directly: open
https://yourdomain.com/favicon.icoin a new tab. If it downloads or displays, the file is in the right place. - Try a private window — it ignores the cached favicon.
- Purge your CDN cache if you use Cloudflare, Vercel or similar; the icon may be served from the edge.
- Wait. Even after a purge, some browsers keep a favicon for hours or until the tab is closed.
CMS quick reference
| Platform | Where to set it | Acceptable input |
|---|---|---|
| WordPress | Appearance → Customize → Site Identity → Site Icon | Square image, min 512×512 |
| Shopify | Online Store → Themes → Customize → Theme settings → Favicon | PNG or ICO, 32×32 recommended |
| Wix | Settings → Business Info → Favicon | PNG, JPG or ICO |
| Squarespace | Design → Browser Icon | PNG or ICO, min 100×100 |
| Webflow | Project Settings → General → Favicon | PNG or ICO, 32×32 |
| Static HTML / Next.js / Astro | Files in the public or root folder + <link> tags | Full manual control |
Why your favicon is still not showing
| Symptom | Likely cause | Fix |
|---|---|---|
| Generic globe icon | File missing from the site root | Move favicon.ico next to index.html |
| Old icon persists | Browser or CDN cache | Hard refresh and purge the CDN |
| Sharp on desktop, blurry on phone | No 180×180 Apple Touch Icon | Add apple-touch-icon.png and declare it |
| Works on desktop, blank on Android | No web app manifest | Add site.webmanifest with 192 and 512 icons |
| Icon appears on some pages only | <link> tags missing from a template | Add them to the shared layout |
| White box around the icon | Source was a JPG with no transparency | Regenerate from a PNG or SVG source |
| Icon squashed or letterboxed | Non-square source image | Crop to a square master and regenerate |
Frequently asked questions
How do I add a favicon to my website?
Put favicon.ico in the root folder of your site, then add <link rel="icon" href="/favicon.ico" sizes="any"> inside the <head> of every page. Add the PNG and Apple Touch Icon links alongside it. Finally, hard-refresh your browser, because favicons are cached aggressively.
Where exactly do favicon files go?
In the root directory of the site — the same folder that holds index.html — so they resolve at https://example.com/favicon.ico. Browsers request /favicon.ico automatically even if you never declare it, which is why the root location is the safest default.
Why is my favicon not showing up?
Almost always caching, or a wrong path. Check in this order: hard-refresh (Ctrl/Cmd+Shift+R), open yourdomain.com/favicon.ico directly to confirm it loads, verify the file is in the site root and not inside an images subfolder, confirm your <link> tags are in the <head> rather than the body, and remember browsers may take hours to refresh a favicon they already cached.
Does the favicon need to be on every page?
Yes. The <link> tags belong in the <head> of every page you want the icon on. On a static site that usually means a shared template or partial; in a CMS it is normally a single site-wide setting.
How do I add a favicon in WordPress?
Appearance → Customize → Site Identity → Site Icon, then upload a square image of at least 512×512. WordPress generates the resized versions and writes the markup for you. Older themes may instead expose the setting under Appearance → Customize → Header.
How do I add a favicon to Shopify, Wix or Squarespace?
Shopify: Online Store → Themes → Customize → Theme settings → Favicon. Wix: Settings → Business Info → Favicon. Squarespace: Design → Browser Icon. All three accept a square PNG, and all three generate the file themselves.
Do I need the site.webmanifest file?
Only if you want an installable web app or a correct Android home-screen icon. The manifest declares the 192×192 and 512×512 icons Android uses. Desktop browsers ignore it, so omitting it does not break your tab icon — it just leaves Android without a proper icon.
Convert your image now
Everything on FaviconPal runs inside your browser — your files are never uploaded to a server. Pick the converter that matches your source file: