Favicon Generator
Upload one image and get every favicon size browsers, Google, Apple and Android expect — 16 to 512 px — plus the exact HTML to paste into your head.
The favicon is the smallest asset on your site and one of the most visible. It sits in every browser tab, in the bookmarks bar, on the phone home screen when someone saves your site, and — since 2019 — directly beside your listing in Google's mobile search results.
Getting it right used to mean exporting seven files by hand at seven sizes. Upload one square image here and get the whole set, plus the HTML that wires it up.
Generated sizes
HTML snippet
What each size is for
favicon-16.png / 32.png— browser tabfavicon-48.png— Windows desktop shortcutfavicon-96.png— Chrome desktop bookmarksapple-touch-icon-180.png— iOS home screen (rounded automatically by iOS)android-chrome-192.png / 512.png— Android home screen + PWAfavicon.ico— legacy Windows / IE compatibility
All generated in your browser — nothing uploaded to any server.
How to use the Favicon Generator
-
Start from a square image
Ideally 512×512 or larger, PNG with a transparent background. A non-square image will be cropped, and a low-resolution one cannot be rescued by upscaling.
-
Check the 16 px preview carefully
This is the size that appears in a browser tab, and it is brutal. If your logo turns to mush at 16 px, you need a simplified mark rather than the full logo.
-
Download the complete set
You get 16, 32, 48, 96, 180, 192 and 512 px. Each size exists for a specific surface — skipping one means some device falls back to something ugly.
-
Upload the files to your web root
Put them at the root of your site, not in a subfolder, so older browsers that request /favicon.ico by convention still find something.
-
Paste the HTML into your head
Copy the generated snippet into the head of your layout template so it appears on every page, not just the homepage.
-
Hard-refresh to see the change
Browsers cache favicons aggressively. Use Ctrl+Shift+R, or open the icon URL directly, before concluding it has not worked.
What this tool does
Why one file is no longer enough
For years a single favicon.ico at the root did the job. Then phones arrived, then high-density screens, then progressive web apps, then Google started showing favicons in mobile search results. Each brought its own size and its own expectations.
Here is what each file is actually for:
| Size | Used by |
|---|---|
| 16×16 | Browser tab, bookmarks bar — the one people see most |
| 32×32 | Tab on high-density displays, Windows taskbar |
| 48×48 | Windows site shortcuts, Google mobile search results |
| 96×96 | Desktop shortcuts, some Android surfaces |
| 180×180 | Apple touch icon — iPhone and iPad home screen |
| 192×192 | Android home screen, web app manifest |
| 512×512 | PWA splash screens, app install prompts |
Miss a size and the device picks the nearest available and rescales it, usually badly. The classic failure is a 32 px icon stretched to 180 px on an iPhone home screen — blurry, pixelated, and sitting permanently on a customer's phone next to their banking app.
Designing for 16 pixels
This is the part most people get wrong: they upload the full logo and wonder why the tab icon looks like a smudge. At 16×16 you have 256 pixels in total. That is not enough for a wordmark, a tagline, or fine detail of any kind.
What survives:
- A single letter — the initial of the brand, set in the brand typeface
- A simple geometric mark — a circle, a triangle, a bold monogram
- One strong silhouette with no internal detail
- High contrast against both light and dark tab backgrounds
What does not:
- Full company names — illegible below about 64 px
- Thin strokes — they vanish or alias into grey mush
- Gradients and shadows — they turn to noise
- More than two or three colours
- Anything with a lot of white space inside it
The practical test: shrink your design to 16 px on screen, then step back a metre. If you can still tell what it is, it works. If you cannot, simplify until you can. Most strong brands use a mark, not a logo, for exactly this reason.
Dark mode and transparency
Browser tabs are light in light mode and dark in dark mode. A black icon on a transparent background disappears entirely against a dark tab; a white one vanishes in light mode.
Three ways around it. Use a colour with enough contrast against both — a mid-saturation brand colour usually works. Or give the icon its own solid background shape, so it carries its own contrast wherever it sits. Or serve two files and switch with a media query, which is the most precise option and the most work:
<link rel="icon" href="/favicon-light.png" media="(prefers-color-scheme: light)">
<link rel="icon" href="/favicon-dark.png" media="(prefers-color-scheme: dark)">For most business sites, an icon with its own background shape is the pragmatic choice — one file, works everywhere, no maintenance.
The HTML you need
The generated snippet covers every current surface:
<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="#ffffff">Put it in your layout template's <head> so it applies sitewide. Two details worth getting right: use root-relative paths starting with a slash, so the icons resolve correctly from pages at any depth, and set theme-color to your brand colour — it tints the browser chrome on Android and the status bar on iOS, which is a small touch that makes a site feel considered.
Google search results
Since 2019, Google shows a site's favicon beside its listing in mobile search results. That makes it a visible trust signal in the place where it matters most.
Google's requirements are specific: the icon must be a multiple of 48 px square — 48, 96, 144 and so on — it must be on a crawlable URL not blocked by robots.txt, and it must be referenced with a rel="icon" link in the head of your homepage. Google recrawls favicons on its own schedule, so a change can take days or weeks to appear in search results even after it updates in the browser.
One thing to avoid: Google will suppress a favicon it considers misleading, including anything that imitates another brand's mark or a generic browser icon.
Why the favicon looks stale after you change it
Because browsers cache favicons more aggressively than almost any other asset, sometimes ignoring normal cache headers entirely. When a new icon does not appear:
- Hard-refresh with Ctrl+Shift+R, or Cmd+Shift+R on a Mac.
- Open the icon file directly —
yoursite.com/favicon-32x32.png— and confirm the new image is actually being served. - Add a cache-busting query string in your HTML, such as
href="/favicon-32x32.png?v=2". - Try a private window, which bypasses much of the cache.
If step two shows the old file, the problem is your upload or your CDN, not the browser cache.
Privacy
Every size is generated in your browser using canvas. Your image is never uploaded, stored or processed on any server — which matters when the file you are resizing is an unreleased logo for a client who has not announced the rebrand yet.
Frequently asked questions
What size should my favicon image be before I upload it?
Why does my logo look blurry as a favicon?
Do I still need a favicon.ico file?
Why does Google show a different favicon than my site does?
How do I make a favicon work in both light and dark mode?
I uploaded a new favicon but the old one still shows — why?
Is my image uploaded to a server?
Need a beautiful website that converts?
Award-winning designs built for the brands you look up to. Since 2013.
Web Design & Development
Award-winning WordPress, ecommerce & custom sites — from concept to launch.
ExploreSEO & Growth
Technical SEO, content playbooks & local ranking — measurable growth every month.
ExploreSoftware Development
PHP + Laravel + Node.js — custom CRMs, admin panels & APIs. Scale-ready.
Explore