What Is a Favicon? (And Why favicon.ico Is Not Enough Anymore)
You know that tiny icon that lives in your browser tab, right next to the page title? That is a favicon. The name comes from “favorites icon” because Internet Explorer in 1999 used it when you bookmarked a site. The name stuck even though most of us have not called bookmarks favorites since roughly the early 2000s.
Every website has one, or should. If yours is missing, people see a grey puzzle piece or a blank square depending on their browser. It looks like you forgot something. And honestly, you did.
Here is the part most people do not realize: in 2025, a single favicon.ico file is not enough. You need several files in different sizes and formats for different contexts. Google Search uses a different size than iOS. Android needs a manifest file. Your SVG favicon can even respond to dark mode. This guide covers all of it.
Why something this small actually matters
Browser tabs first. When someone has your site open next to a dozen others, your favicon is how they find you without reading every tab. A recognizable icon means they can switch back to your tab in one second. No favicon means they close yours by accident and then cannot find the page again. This happens more than you think.
Then there is Google Search. Google displays your favicon next to your URL in search results. You have seen this. Small icon, site name, then the result title. Google uses a 96x96 PNG for this specifically. If you only have a 16x16 favicon.ico, Google picks something or nothing. You want to control what shows up there.
And then there is iOS. When someone saves your site to their iPhone home screen, Apple pulls your apple-touch-icon.png and turns it into a rounded app icon. No apple-touch-icon means iOS takes a screenshot of your full webpage and shrinks it down to icon size. I have seen what this looks like. It is not good.
Also Slack, iMessage, and most link preview systems pull your favicon when displaying your URL. That small icon represents your brand in a lot of places you might not have considered.
What size should a favicon be? (The actual complete answer)
The short answer: several sizes, for different uses. Here is exactly what you need and where each one goes:
Most favicon generators give you one or two of these. Our favicon generator gives you all of them in a single ZIP, with live previews showing how your icon looks in Chrome tabs, Google Search results, an iOS home screen, and Android launcher before you download anything.
ICO vs PNG vs SVG: which one does what
People ask this constantly and get confusing answers, so here is the plain version.
favicon.ico is a container format. Think of it like a ZIP file that holds multiple PNG images inside: typically a 16x16 and a 32x32. When a browser needs a 16px icon for a tab, it pulls the 16px version from the ICO. When Windows needs a 32px shortcut icon, it pulls that one. You get precise control at each size. Every browser going back to IE5 understands it. This is your baseline and you always need it.
PNG is simpler. One file, one size. Modern browsers handle PNG favicons fine. The issue is when you only have one size and the browser has to scale it. Scaling a 256px PNG down to 16px can look blurry. If you provide the right sizes for the right contexts though, PNG works great. The 96x96 for Google and the 180x180 for Apple are both PNGs.
SVG is vectors. It scales to any size without ever getting blurry because it is math, not pixels. Chrome, Firefox, and Edge all support SVG favicons now. Safari does not yet, but Safari falls back to your ICO just fine. So you get perfect rendering in modern browsers and automatic fallback in Safari.
The interesting thing about SVG favicons is dark mode. Because SVG can contain CSS, you can put a prefers-color-scheme media query inside the file. The browser respects it and switches between your light and dark icon automatically. This is genuinely useful if your logo is light-colored. White logo on a white browser tab is invisible. The SVG fix costs you nothing extra.
The Apple Touch Icon situation, explained properly
iOS has been doing its own thing with icons since 2007 and has not really changed. When someone saves your site to their iPhone home screen, iOS looks for a file called apple-touch-icon.png at exactly 180x180 pixels. It then applies its own rounded corner mask. That is the icon your site gets on their home screen.
The thing that catches people off guard is transparency. iOS fills transparent areas in the icon with black before applying the mask. So if you have a white logo on a transparent background, you get a white logo on a black rounded square. That might look fine. Often it does not. The fix is to add a background color when you generate the icon. Set it to your brand color and add some padding. Then it looks like an actual app icon with breathing room.
The apple-touch-icon also shows up in Safari's tab switcher, in iMessage link previews, in Slack when someone pastes your URL, and in some email clients. It is doing a lot more work than just the home screen. Worth getting right.
site.webmanifest: what it does and why you need it even if you're not making a PWA
The web manifest is a JSON file that describes your website to browsers. It has your app name, short name, theme color, background color, and icons. Browsers use it to enable PWA installation, control how Android renders the address bar, and configure the app splash screen.
But here is why you need it even for a regular site. Chrome and Edge on Android look for this file automatically. If they find it and it is set up right, they offer users an “Add to Home Screen” prompt. That is free recurring engagement. Users who install your site as a PWA come back more often.
And if the file does not exist, browsers request it anyway and log a 404 error in your console. Not a real problem, but annoying. The webmanifest takes about 30 seconds to set up. Here is what one looks like:
{
"name": "My Website",
"short_name": "MySite",
"theme_color": "#f59e0b",
"background_color": "#ffffff",
"display": "standalone",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any maskable"
}
]
}The theme_color sets the browser address bar color on Android Chrome. short_name is what appears under the icon on Android home screens, so keep it short. The maskable purpose on the 512px icon tells Android it is safe to clip the edges to different shapes. Our favicon generator writes this file automatically based on the name and colors you enter.
How to add a favicon to your website
Put all your favicon files in the root of your site (the /public folder in most frameworks). Then paste this into your <head> tag:
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="shortcut icon" href="/favicon.ico" /> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> <link rel="manifest" href="/site.webmanifest" />
For Next.js App Router, add this to your layout.tsx metadata export instead:
icons: {
icon: [
{ url: '/favicon-96x96.png', sizes: '96x96', type: 'image/png' },
{ url: '/favicon.svg', type: 'image/svg+xml' },
],
shortcut: '/favicon.ico',
apple: [{ url: '/apple-touch-icon.png', sizes: '180x180' }],
},
manifest: '/site.webmanifest',Why your favicon is not showing up after you changed it
Browser caching. Almost always. Browsers cache favicons more aggressively than anything else on your site. Sometimes for days. Pressing F5 does nothing. A normal page reload does nothing. The old favicon sits in cache and refuses to budge.
The manual fix: hard refresh with Ctrl+Shift+R on Windows or Cmd+Shift+R on Mac. Or open the favicon URL directly in a new tab (yoursite.com/favicon.ico), hard refresh that tab, then go back to your site.
The proper production fix is a version query string. Add ?v=2 to your favicon URLs in the HTML. When you update your favicon later, change it to ?v=3. Browsers see a new URL and fetch the fresh file. Our favicon generator includes a version field that adds this to the HTML snippet automatically.
Why your favicon looks blurry at 16x16
16 pixels is not a lot of room. That is a grid of 256 pixels total. Fine lines disappear. Thin text becomes smudges. Complex gradients turn into noise. This is not a rendering bug. It is a physics problem.
The logos that work at 16x16 have something in common: they are simple. A bold single letter. A thick geometric shape. A high-contrast icon with no fine detail. Think of how Google uses just a “G,” how Apple uses a clean silhouette. That simplicity is a deliberate design decision made specifically for small sizes.
If your logo is a detailed wordmark with small text, thin lines, and complex color gradients, it will not work at 16px. The professional answer is to create a simplified version just for favicon use. Take your brand color, put just the first letter or your icon mark in the center, make the contrast high. Use the background and padding option in a favicon generator to add some breathing room around it. The result will look like an actual app icon rather than a blurry mistake.
Also, start with a high-resolution source image when generating your favicon. At least 500x500 pixels, ideally 1024x1024. The generator scales it down properly from there. Starting with a 16x16 image gives you nothing to work with.
SVG favicon dark mode: the feature nobody told you about
This one is genuinely useful and surprisingly unknown. SVG files can contain CSS. And CSS can contain media queries. Including prefers-color-scheme: dark. Browsers that render SVG favicons (Chrome, Firefox, Edge) respect those media queries.
So your favicon.svg can contain two images inside it. One for light mode, one for dark mode. When the user's OS switches to dark mode, the browser automatically shows the dark version in the tab. No JavaScript. No page reload. Just a slightly smarter SVG file.
This matters if your logo is light colored. A white logo on a light browser tab is invisible. With the SVG dark mode approach, you can show a dark version of your icon in light mode and your white version in dark mode. When you use our favicon generator and pick the dark mode option, the SVG is built with both versions and the media query automatically. You do not have to write any SVG code yourself.
What happens when you skip the favicon entirely
Your browser tab shows a generic grey icon. Browsers actually request your /favicon.ico automatically on every page load even if you have no link tag. If it gets a 404, it logs that to the network tab and gives up. So you get a 404 error on every page load, for every visitor, forever. Not a real problem in terms of performance, but it is a constant minor failure that you do not need.
Google Search may show nothing next to your URL, or it might guess at an icon. You do not want Google guessing. You want to control exactly what shows up there. The 96x96 PNG is what Google uses. Without it, you get unpredictable results.
iOS will screenshot your page for the home screen icon. Android will show nothing for the PWA install. Slack and iMessage previews will show a generic icon. All of this costs you credibility for something that takes about two minutes to fix.
Common favicon mistakes and how to avoid them
Only using favicon.ico. The ICO covers desktop browsers. It does nothing for Google Search, iOS, Android, or PWA install. You need all the files.
Putting files in the wrong folder. Favicon files need to be accessible at your root URL. In Next.js, React, and most frameworks, that means the /public folder. The browser looks for yourdomain.com/favicon.ico specifically. If you put it anywhere else, it will not be found automatically.
Skipping apple-touch-icon.png. This one affects every iPhone user who visits your site and every iMessage or Slack link preview. It is 30 extra seconds of work and it matters a lot for how professional your links look when shared.
Using your full wordmark without simplifying. Complex logos look bad at 16px. Simplify. First letter, icon mark, simple shape. Give it a solid background if needed. Check the 16px preview before you commit to it.
Not handling transparency. iOS and Android fill transparent areas with black. If your logo has transparency and you do not add a background, you get a black area around your icon. Add a background color in the favicon generator. Problem solved.
Not busting the cache when updating. Update your favicon and nothing seems to change? Add ?v=2 to the favicon URLs in your HTML. Increment the number every time you update. Browsers see a new URL and fetch fresh content.
How to make a favicon for free (the complete version)
You need all the files we talked about above. Making them by hand means knowing the ICO binary format, knowing the SVG dark mode syntax, writing a JSON manifest file, and exporting the same image at 6 different sizes. Possible. Annoying.
Or use our free favicon generator. Upload your logo, configure background and padding for each format, set your app name and theme color, then check the live previews. You can see your favicon in a Chrome tab in light mode, a Chrome tab in dark mode, a Google Search result, an iOS home screen, and an Android launcher. Before downloading anything.
Click download and you get a ZIP with all 8 files plus a site.webmanifest and a README with the exact HTML code to paste. Including version query string support. Including Next.js and React variants of the snippet. The whole thing takes about 90 seconds.