To add a favicon to your website, you place a small set of icon files in your site root and reference them in the HTML <head> with <link> tags, then point a tiny web manifest at the larger PWA icons. That is the whole job in 2026, and it is more than the single 16x16 line most tutorials show. Here is exactly how to add a favicon to your website so it shows up in browser tabs, bookmarks, iOS home screens, and Android app icons, plus the fix for the favicon that stubbornly refuses to appear.
Most guides stop at one link rel="icon" tag and call it done. That tag works for a desktop browser tab and nothing else. Modern devices request a whole family of sizes and formats, and if you skip them you get a blurry tab icon, a generic gray square on an iPhone, or no PWA icon at all. This guide gives you the full file bundle, the exact head snippet, and the caching trick that solves the single most common favicon complaint.
What a Favicon Actually Needs in 2026#
A favicon used to be one 16x16 pixel .ico file. That era is over. The browser tab icon is now just one of several places your site icon appears, and each surface wants a different file.
Here is what requests an icon today and what each one expects:
- Desktop browser tabs and bookmarks want a small ICO (16x16 and 32x32) plus, ideally, a scalable SVG.
- Modern browsers prefer a crisp SVG favicon that scales to any DPI without blur.
- iOS Safari (home screen and shortcuts) wants a 180x180 PNG with no transparency, called the apple touch icon.
- Android Chrome and PWAs read a
site.webmanifestand pull 192x192 and 512x512 PNG icons, including a maskable variant.
The good news: you do not draw all of these by hand. You design one square master image (512x512 or larger, ideally with a transparent background) and export the full set from it. A free favicon generator takes that one source image and produces every size, the ICO, the SVG, the manifest, and the head snippet in a single pass, which is the fastest path through this entire process.
Key tip: design your icon as a bold, simple shape that reads at 16x16. Fine detail and small text disappear at favicon scale. A single letter, a monogram, or a strong glyph beats a shrunken full logo every time.
The Exact Files You Need#
Before touching HTML, get these files into your site's root directory (the same folder as your index.html or your public/ folder in a framework). This is the minimum modern set that covers every device.
| File | Size / format | What it serves |
|---|---|---|
favicon.ico | 16x16 + 32x32, multi-resolution ICO | Legacy browsers, default tab icon |
favicon.svg | Scalable vector | Modern browsers, sharp at any DPI |
apple-touch-icon.png | 180x180 PNG, opaque | iOS home screen and shortcuts |
icon-192.png | 192x192 PNG | Android home screen, PWA |
icon-512.png | 512x512 PNG | PWA splash, app stores, maskable |
site.webmanifest | JSON | Tells Android/PWA which icons to use |
Two details matter more than people expect. The favicon.ico should be a true multi-resolution ICO containing both 16x16 and 32x32 frames, not a renamed PNG, so browsers can pick the right size. And the apple touch icon must be opaque with a solid background, because iOS does not honor transparency and will fill transparent areas with black, ruining your icon.
Why favicon.ico vs SVG is not an either-or#
People treat favicon.ico versus SVG as a choice. It is not. You ship both and let each browser take what it understands.
- SVG is the future: one file, infinitely scalable, supports dark-mode adaptation with a media query inside the SVG. Modern browsers prefer it.
- ICO is the safety net: older browsers, some feed readers, and certain platforms still request
/favicon.icoby name even if you never link it.
Serving both costs you a few kilobytes and guarantees a crisp icon everywhere. If you only ship one, ship the ICO for compatibility, but the modern best practice is both.
How to Add a Favicon to Your Website Step by Step#
This is the full procedure from a blank <head> to a favicon that works on every device. Follow it in order.
Step 1: Create your master icon image#
Start with a single square image at 512x512 pixels or larger, with a transparent background (PNG or SVG). Keep the design simple and high-contrast so it survives being shrunk to 16 pixels. If your logo is wide or detailed, make a simplified square mark just for the favicon. You can resize and square up any source art with a free image resizer before exporting.
Step 2: Generate every size and format#
Feed your master image into a favicon generator to produce the ICO, the SVG, the 180x180 apple touch icon, the 192 and 512 PNGs, and the manifest. Doing this by hand in an image editor is slow and error-prone, especially the multi-resolution ICO, which most editors cannot export correctly. Molixa's favicon generator outputs the complete bundle plus a ready-to-paste head snippet. If you already have a vector logo, you can also convert it cleanly with an SVG to PNG converter to get pixel-perfect PNG icons at each size.
Step 3: Upload the files to your site root#
Place all the generated files in your site's root or public directory so they are reachable at URLs like https://yoursite.com/favicon.ico and https://yoursite.com/site.webmanifest. The /favicon.ico path in particular should resolve at the root, because some clients fetch it there automatically regardless of your HTML.
Step 4: Add the link tags to your HTML head#
Paste this block inside the <head> of every page (or your shared layout/template so it applies sitewide):
<!-- Classic ICO for legacy browsers -->
<link rel="icon" href="/favicon.ico" sizes="32x32">
<!-- Modern scalable SVG -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- iOS home screen -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- PWA / Android manifest -->
<link rel="manifest" href="/site.webmanifest">
That is the complete modern favicon link set. The browser reads all of these and chooses the best match for its context. You do not need a separate tag for every PNG size, because the manifest handles the Android and PWA icons.
Step 5: Create the web manifest#
The site.webmanifest is a small JSON file that tells Android and PWA installers which icons to use. A minimal, correct version looks like this:
{
"name": "Your Site Name",
"short_name": "YourSite",
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
],
"theme_color": "#ffffff",
"display": "standalone"
}
The purpose: "maskable" entry is the one most setups forget. Android crops icons into circles, squircles, and rounded squares depending on the device. A maskable icon has padding (a safe zone) so the crop never clips your logo. Without it, Android may shrink your icon inside a white box or chop off the edges.
Step 6: Deploy and verify on real devices#
Push your changes, then check the favicon in a desktop tab, on an iPhone (add to home screen), and on Android (install or add to home screen). If it does not show immediately, that is almost always caching, not a code error, which the next section covers.
Why Your Favicon Is Not Showing (the Real Fix)#
This is the part every basic tutorial skips, and it is the number one reason people think they did the setup wrong. Your HTML is probably fine. The problem is that browsers cache favicons aggressively, more aggressively than almost any other asset.
When a browser loads your old favicon (or the absence of one), it can hold onto that result for days, ignoring your new file even after a normal page refresh. So you upload a beautiful new icon, reload, and still see the old one or a blank globe. Here is how to break the cache, in order of effort:
- Hard refresh the page with Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac). This clears many but not all favicon caches.
- Append a version query string to the link, like
href="/favicon.ico?v=2". Bump the number whenever you change the icon and the browser treats it as a new file. - Visit the favicon URL directly in the address bar (
yoursite.com/favicon.ico) and hard-refresh that page to force a fresh fetch. - Test in an incognito/private window, which ignores your existing favicon cache, to confirm the new icon is actually live.
- Clear cached images in your browser settings if all else fails on your own machine.
Warning: do not spend an hour rewriting your link tags because the icon "won't update." Open a private window first. If the favicon shows there, your code is correct and you are only fighting a stale cache on your normal profile.
The version query string trick (?v=2) is the professional move. It guarantees that the next time you redesign your icon, every returning visitor gets the new one instead of a cached relic. Add it from day one and you will never debug a phantom favicon again.
A note on transparency and backgrounds#
Two transparency rules trip people up. The apple touch icon must be opaque, so give it a solid background color that matches your brand. The favicon SVG and the browser-tab PNGs can keep a transparent background, which looks cleaner against both light and dark browser chrome. Mixing these up causes the classic "black box on iPhone" bug, where a transparent apple touch icon gets a black fill.
Favicons in Frameworks (Next.js, Vite, WordPress)#
The link tags are the same everywhere, but where you put them differs by stack.
- Next.js (App Router): drop
favicon.ico,icon.svg, andapple-icon.pnginto theapp/directory and Next generates the tags automatically. For the manifest, add amanifest.tsor staticsite.webmanifestinapp/. - Vite / plain HTML: put the files in
public/and paste the link block into yourindex.htmlhead. Vite servespublic/at the site root. - WordPress: use the Site Icon feature under Appearance, Customize, Site Identity for the basics, or add the full link block via your theme's
header.phpor a head-injection plugin for complete control. - Static site generators (Astro, Hugo, Eleventy): place files in the static/public folder and add the link block to your base layout so every page inherits it.
Whatever the framework, the underlying requirement does not change: the icon files must resolve at root-level URLs, and the head must reference them. If you are compressing those PNG icons to keep them small, do it without quality loss using a free image compressor so the 512x512 icon stays crisp on PWA splash screens.
Frequently Asked Questions#
What is the minimum HTML to add a favicon to a website?
At an absolute minimum, place a favicon.ico in your site root and add <link rel="icon" href="/favicon.ico"> to your <head>. That covers a basic desktop browser tab. But it leaves iOS, Android, and PWA icons unset, so for any real site you should add the SVG, apple touch icon, and manifest tags shown above.
Do I still need a favicon.ico file in 2026, or is SVG enough?
You should ship both. SVG is sharper and scales perfectly in modern browsers, but some older browsers and clients still request /favicon.ico by name. Keeping a multi-resolution ICO as a fallback guarantees an icon everywhere, and it only costs a few kilobytes to include.
Why does my favicon work in incognito but not in a normal window?
That is favicon caching, not a code bug. Your normal browser profile is holding a stale cached version, while the private window fetches fresh. Hard-refresh, add a ?v=2 version string to your link tag, or clear cached images to force the update. If it shows in incognito, your HTML is correct.
What size should the apple touch icon be, and does transparency matter? Use a 180x180 PNG with a solid, opaque background. iOS does not support transparency on home screen icons and will fill any transparent area with black, which ruins the look. Give it a brand-colored background so it looks intentional on the home screen.
What is a maskable icon and do I need one?
A maskable icon is a PWA icon with extra padding (a safe zone) so Android can crop it into a circle, squircle, or rounded square without clipping your logo. You declare it in the manifest with "purpose": "maskable". If your site can be installed as a PWA or added to an Android home screen, you need one to avoid a cropped or boxed-in icon.
How do I generate all the favicon sizes without an image editor? Upload one square master image (512x512 or larger) to a favicon generator and it exports the ICO, SVG, apple touch icon, PWA PNGs, and manifest in one step, along with the head snippet. This avoids the hardest manual task, building a correct multi-resolution ICO, which most image editors cannot export properly.
Adding a Favicon to Your Website, Done Right#
Knowing how to add a favicon to your website in 2026 means going past the single 16x16 line: ship the ICO and SVG for browsers, an opaque apple touch icon for iOS, 192 and 512 PNGs plus a maskable icon in a web manifest for Android and PWAs, and reference them all in your <head>. Generate the full bundle from one master image, drop a ?v=2 on your link tags so future changes bust the cache, and verify on real devices. Do that once and your icon looks sharp in every tab, bookmark, and home screen, with no phantom-favicon debugging session in your future.
