Favicon Generator
Turn one logo into a complete favicon package — every browser and device size, favicon.ico, manifest and HTML snippet, generated in your browser.
Drag & drop your logo
PNG, JPG, WebP or SVG — square marks work best. Nothing is uploaded.
Your favicon package
Add your logo and generate the package to see every favicon size, a live browser tab preview and the HTML you need.
How it works
A favicon is the small square that sits in a browser tab, a bookmark list, a search result on mobile and a phone home screen. It is the smallest piece of branding you will ever design, and the one people see most often — usually several times a day, out of the corner of their eye.
How it works
- Your logo is centre-cropped to a square and drawn onto a canvas at each required size.
- Every size is encoded as a PNG on your device, and 16, 32 and 48 are also packed into a classic
favicon.ico. - A starter
site.webmanifestand a ready-to-paste HTML snippet are added. - Everything is zipped in the browser — no upload, no account, no watermark.
Where each size is used
- 16 and 32: browser tabs on standard and retina displays.
- 48 to 128: Windows site icons, desktop shortcuts and browser UI.
- 180: the Apple touch icon used when someone adds your site to an iPhone home screen.
- 192 and 512: Android home screens and installable progressive web apps.
Related tools: Colour Palette Extractor · Image Resizer · Image Compressor · HEX / RGB / HSL Colour Converter
Frequently asked
Complete Guide
The Complete Guide to Favicons The Smallest Piece of Branding That Does the Most Work
A favicon is the tiny icon that sits in a browser tab, next to a bookmark, or on a phone's home screen once someone saves your site. It measures a few millimetres on screen, and yet it's one of the first things a visitor notices — and one of the easiest ways to look unfinished if it's missing, blurry, or simply the default grey globe. This guide covers everything you need to get favicons right, from the exact sizes browsers expect to the HTML that ties it all together.
What a favicon is, and why it matters
The word favicon comes from 'favourites icon', a name left over from when browser bookmarks were called favourites. Today it appears in far more places than a bookmarks menu: browser tabs, address bars, browser history, search results in some cases, home screen shortcuts on phones, and the app switcher on mobile devices.
Because it appears in so many small, high-frequency moments, a favicon does a disproportionate amount of branding work for its size. Someone with fifteen tabs open relies on favicons, not page titles, to find your site again. A missing or generic favicon quietly signals that a site is unfinished or unmaintained, even if the rest of the design is polished.
The sizes browsers and devices actually use
There isn't one favicon size — there are several, because different browsers, operating systems and devices request different resolutions. Providing the full set means your icon looks sharp everywhere rather than stretched or padded.
| Size | Typical use |
|---|---|
| 16×16 | Classic browser tab and address bar icon |
| 32×32 | Higher-resolution browser tabs and taskbar shortcuts |
| 48×48 | Windows site shortcuts and some browser install prompts |
| 64×64 | Higher-DPI displays and some desktop shortcuts |
| 96×96 | Desktop shortcuts and some Android home screens |
| 128×128 | Chrome Web Store listings and some app icons |
| 180×180 | Apple touch icon, used when a site is saved to an iPhone or iPad home screen |
| 192×192 | Android home screen icon and Chrome for Android |
| 512×512 | Progressive Web App splash screens and app icon stores |
| favicon.ico | A multi-resolution fallback file (often containing 16×16, 32×32 and 48×48) still checked by default by many browsers |
Designing a mark that survives at 16px
The hardest part of favicon design isn't producing the files — it's designing a mark simple enough to still make sense at 16 pixels square, which is roughly the size of a grain of rice on screen.
- Simplify, don't shrink. A detailed logo with fine text or thin linework will turn to mush at 16px. Favicons usually work best as a single bold letterform, a simple icon, or a solid shape — save the full logo for larger contexts.
- Use strong contrast. Favicons sit against many different backgrounds — light tabs, dark tabs, coloured browser themes — so a mark with clear contrast against both light and dark holds up best.
- Avoid thin lines and small gaps. Anything under roughly 2px at 16×16 will disappear or blur on lower-resolution displays. Bold, chunky shapes survive scaling far better than delicate ones.
- Test at actual size, not zoomed in. A mark that looks great filling your screen at 100% zoom can look completely different shrunk down and viewed briefly in a crowded tab bar.
- Keep it square, and consider the background. Most favicon slots don't respect rounded corners or transparency consistently across platforms, so design with a solid or transparent square canvas in mind.
The HTML you need, and where it goes
Once you have your generated files, a handful of link tags in the <head> of your HTML tell browsers and devices where to find each size.
- `<link rel="icon" href="/favicon.ico" sizes="any">` — the classic fallback most browsers still check by default.
- `<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">` — a sharper PNG version for modern browsers.
- `<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">` — the smallest standard tab icon.
- `<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">` — used specifically by iOS and iPadOS when a page is saved to the home screen.
- `<link rel="manifest" href="/site.webmanifest">` — points to a small JSON file listing your Android and PWA icon sizes (192×192 and 512×512, typically).
All of these tags belong in the `<head>` of every page, or in your site's shared layout template so they're included automatically without repeating them page by page.
Web app manifests
The web app manifest is a small JSON file that tells mobile browsers and operating systems how your site should behave if someone adds it to their home screen — including its name, its theme colour, and, most relevantly here, which icon files to use at which sizes.
A minimal manifest looks something like this: { "name": "Your Site Name", "icons": [ { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } ], "theme_color": "#ffffff", "background_color": "#ffffff", "display": "standalone" }
Without a manifest, some Android devices will fall back to a screenshot of your page as the home screen icon, or generate a low-quality auto-cropped version of whatever image they can find — neither of which reflects well on a brand.
A favicon is rarely the most exciting file in a project, which is exactly why it's so often left until last — and exactly why it's worth doing properly the first time.
Professional tips
- 1.Start from a large, clean source image. Generating smaller sizes from a 512×512 or larger master file gives sharper results than trying to scale up a small logo.
- 2.Generate the full set, not just favicon.ico. Skipping the Apple touch icon or Android sizes means your site looks unfinished the moment someone saves it to their home screen.
- 3.Use PNG for transparency, ICO for legacy support. Modern browsers happily use PNG favicons, but keep a favicon.ico in the root of your site as a safety net for older browsers and some services that check for it by default.
- 4.Match your theme colour to your favicon. Pairing a manifest's theme_color with your brand palette makes the browser chrome (address bar background on some mobile browsers) feel like part of your design rather than a mismatch.
- 5.Re-test after any redesign. Favicons are easy to forget when a logo changes — check your browser tab is still showing the right, current mark after any rebrand.
Common mistakes and caching quirks
- Uploading a new favicon and not seeing it change. Favicons are aggressively cached by browsers, sometimes for weeks. Clearing your browser cache, doing a hard refresh, or testing in a private/incognito window is usually the fastest way to confirm a new favicon is actually live.
- Only providing one size. A single small icon stretched up for a home screen shortcut looks pixelated; a single large icon squeezed down for a browser tab can lose all its detail.
- Forgetting the file even exists. favicon.ico sitting in the root of a site is still checked by default by many browsers even if you never explicitly link to it — leaving an old or blank one there can undo an otherwise careful favicon setup elsewhere.
- Using a logo with fine text or thin details. As covered above, detailed logos rarely survive being shrunk to 16px, and the result is usually just a blurry, muddy square.
- Ignoring dark mode and theme variation. Some browsers and operating systems apply their own tinting or dark backgrounds behind favicons — testing your mark against both light and dark browser themes avoids an unpleasant surprise.
You'll also like
Related Digital Tools guides
Keep learning with more from the Calcaroo library.