How to Add a Favicon to Your Website
TL;DR
To add a favicon, upload a 32×32 (or 16×16) PNG and an ICO file to your site root and add <link rel="icon" href="/favicon.ico"> inside your <head>. For best results on every platform, also add a 16×16 and 32×32 PNG, an Apple touch icon and a web manifest — the snippet below does all of it.
A favicon is the small icon that appears in browser tabs, bookmarks and home screens. Adding one takes less than a minute once your files are generated — this guide covers the exact steps for plain HTML and every major website builder.
What you need before you start
Two or three files are enough for most sites:
- favicon.ico — a multi-resolution ICO (16, 32 and 48 pixels) for maximum compatibility.
- favicon-16x16.png and favicon-32x32.png — crisp PNGs for modern browsers.
- apple-touch-icon.png — optional but recommended for iOS home screens (180×180).
- site.webmanifest — optional, for Android and PWAs (192×192 and 512×512 icons).
Generate all of these for free with our favicon generator — it outputs every file plus a ready-made HTML snippet and a ZIP archive.
How to add a favicon in plain HTML
Upload your favicon files to the root of your website, then paste this into the <head> section of every page:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#4f46e5">/subfolder/favicon.ico or relative paths such as favicon.ico.
Browsers also automatically request /favicon.ico even without a link tag, so placing the file in your site root is the simplest possible setup.
How to add a favicon to WordPress
WordPress has a built-in Site Icon feature that handles everything:
- Go to Appearance → Customize → Site Identity.
- Click Select site icon and upload a 512×512 PNG (WordPress creates all the sizes).
- Click Publish, then clear your caching plugin (WP Rocket, W3 Total Cache, LiteSpeed Cache) and your browser cache.
For a classic theme, you can instead add the link tags to header.php just before </head>. Always make edits through a child theme so updates don't overwrite them.
How to add a favicon to Shopify
- In your admin, go to Online Store → Themes → Customize.
- Open Theme settings → Logo & favicon.
- Upload your favicon image (128×128 or 512×512 PNG works well) and click Save.
Shopify generates the needed sizes and injects the link tags automatically. Allow a few minutes for the CDN to refresh.
How to add a favicon to Wix and Squarespace
Wix: go to Site Settings → Browser Icon and upload your icon. Wix recommends an image between 100×100 and 500×500 pixels.
Squarespace: in the Home menu open Design → Logo & Title → Browser Icon, upload your favicon, and save. Squarespace recommends a 300×300 PNG.
How to add a favicon to Blogger
Upload your favicon where it's accessible (for example, to a static file host), then go to Blogger → Theme → Edit HTML and paste the favicon link tag right before </head>:
<link href="https://your-host.com/favicon.ico" rel="icon" type="image/x-icon">How to add a favicon to React and Next.js
Next.js (App Router): place favicon.ico in your app folder and Next.js serves it automatically. For more control, export metadata:
// app/layout.tsx
export const metadata = {
icons: {
icon: '/favicon.ico',
shortcut: '/favicon.ico',
apple: '/apple-touch-icon.png',
},
};React (Vite/CRA): put the files in the public folder and add the link tags to public/index.html inside the <head>.
Common mistakes to avoid
- Using a JPG. JPG has no transparency and renders worse at 16×16 — use PNG or ICO.
- Missing the file. The link tag alone does nothing if the file 404s; verify the URL directly.
- Forgetting to clear cache. Browsers cache favicons aggressively — do a hard refresh.
- Non-square source. Start from a square image so nothing gets awkwardly cropped.
If your icon still won't appear after following these steps, see Why Is My Favicon Not Showing? 12 Fixes. For the exact pixel sizes every platform needs, read the Favicon Size Guide 2026.