The favicon is the tiny icon in the browser tab next to your page title — 16 pixels of branding that users see hundreds of times a day. A crisp, recognizable favicon makes your site look professional in tabs, bookmarks, history and mobile home screens. A missing or blurry one quietly signals “unfinished website” every time someone glances at their tab bar.
Creating favicons manually means exporting your logo at 16×16, 32×32, 48×48 and 180×180 (for Apple touch icons), checking each for legibility, and keeping the files organized. Start from a compressed source — run oversized logos through an image compressor first. At 16 pixels, fine details vanish, which is why purpose-built favicon design matters.
This free favicon generator handles the whole job. Upload your logo or type a letter to generate a clean lettermark, customize the colors, preview every size live, and download crisp PNG files ready to drop into your site.
How to use the favicon generator
- Upload an image or type a letter. Use your logo for brand consistency, or type one letter (usually your brand initial) to create a clean, modern lettermark.
- Pick your colors. Choose a background and letter color that match your brand. High contrast is essential at tiny sizes.
- Preview all four sizes. Check 16, 32, 48 and 180 pixels side by side. If the 16px version is unreadable, simplify — that is the size users see most.
- Download the PNGs. Grab individual sizes or download all four at once. Each file is named clearly (favicon-16×16.png, etc.).
- Add them to your site. Place the files in your site root or assets folder and reference them with
<link rel="icon">tags in your HTML head — the 180px version doubles as your Apple touch icon.
Key features and benefits
- Two creation modes. Upload an existing logo for instant brand favicons, or generate a sharp lettermark from any character with custom colors — no design software needed.
- Live multi-size preview. See 16, 32, 48 and 180 pixel renders simultaneously, so legibility problems are obvious before you download.
- Smart image cropping. Uploaded images are center-cropped to a square automatically, keeping your logo’s focal point intact.
- Brand color pickers. Fine-tune background and letter colors with live updates across every preview size.
- Individual or batch download. Download just the sizes you need or grab the complete set in one click.
- Apple touch icon included. The 180×180 export covers iOS home-screen icons, so your site looks right when saved to a phone.
- Free and private. Your logo is processed locally in your browser — brand assets never touch a server.
Designing favicons that stay readable at 16 pixels
Sixteen pixels is brutally small — roughly the size of a grain of rice on screen. These principles separate favicons that work from ones that blur into noise.
Simplify ruthlessly
Your full logo with tagline and fine lines will not survive 16×16. Use the most distinctive element only: a single letter, a bold shape, or one simplified mark. The lettermark mode in this tool exists precisely because a bold “S” on a solid background outperforms a shrunken full logo at tab size almost every time.
Maximize contrast
Light grey on white disappears; white on a saturated brand color pops. Test your favicon against both light and dark browser themes — many users run dark mode, where a dark favicon on a dark tab bar becomes invisible. When in doubt, a solid vivid background with a white glyph is the safest combination in existence.
Keep the full logo for larger sizes
The 180×180 touch icon has room for more detail than the 16px tab icon. If your platform supports multiple icon declarations, serve the simplified mark at small sizes and a richer version at large ones — inspect vector sources with the SVG viewer to check they scale cleanly. Browsers pick the closest size automatically, so good options at each tier pay off.
Frequently asked questions
What sizes do I need for a favicon?
The essentials are 16×16 (browser tabs) and 32×32 (taskbars, high-DPI tabs), plus 180×180 for Apple touch icons when users save your site to their iPhone home screen. 48×48 covers Windows site icons and some shortcut views. This tool generates all four, which covers effectively every modern use case.
Should I use PNG or ICO format?
PNG is the modern answer — every current browser supports PNG favicons, they compress well, and they handle transparency cleanly. The legacy .ico format only matters if you need to support Internet Explorer, which has been retired. Download the PNGs from this tool and reference them with standard link tags.
How do I add the favicon to my website?
Upload the PNG files to your site and add <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> (and similar lines per size) inside your HTML <head> — the same head section where your meta tags live. Many platforms also accept a single favicon upload in settings. After deploying, hard-refresh (Ctrl+Shift+R) to bypass the browser’s aggressive favicon caching.
My new favicon is not showing — what went wrong?
Almost always caching. Browsers cache favicons aggressively and for a long time. Hard-refresh the page, try a private/incognito window, or add a version query string like favicon-32x32.png?v=2 to force re-fetching. If it still fails, verify the file path in your link tags with your browser’s developer tools.
Can I use an emoji or photo as a favicon?
Photos rarely work — at 16 pixels they become unrecognizable mush. Simple bold shapes and single letters work best, which is why the lettermark mode is so popular. If you upload a photo, simplify the source image first for a decent result.
Is my uploaded logo stored on your servers?
No. Uploads are read with the browser’s FileReader API and processed on a local canvas — your logo never leaves your device. This makes the tool safe for unreleased brands and client work under NDA.
How It Works: Under the Hood
A modern favicon isn’t one file — it’s a set of rasterized sizes. The generator takes your source image and renders it at 16×16, 32×32, 48×48, and 180×180 (Apple touch icon), using high-quality downsampling (Lanczos-style resampling) so edges stay crisp at tiny sizes. It then emits the HTML snippet: <link rel="icon" type="image/png" sizes="32x32"> for each size, plus the apple-touch-icon link iOS needs for home-screen bookmarks.
Why PNG and not the classic .ico? The ICO container was mandatory in the IE6 era, but every modern browser accepts PNG favicons — and PNG compresses better with alpha transparency. The tool also generates a web app manifest icon (192×192 and 512×512) for the installable-PWA case, and can produce an SVG favicon for the growing number of browsers that support infinitely scalable vector icons.
Real-World Use Cases
- Site launches: a developer finishing a client site generates the full icon set in one pass instead of hand-exporting six files from Figma.
- Rebrands: a company updates its logo and needs every touchpoint — tab icon, iOS bookmark, PWA install — regenerated consistently.
- Dark-mode tabs: designers create a light-on-dark variant so the icon stays visible in browsers with dark tab bars.
- Multi-tenant SaaS: platforms white-labeling for clients generate per-client favicon sets from each client’s logo upload.
- Email HTML: favicons double as brand marks in some email clients’ sender displays — one more place the icon set gets reused.
Advanced Tips
- Design at 16×16 first. If your logo is illegible at 16 pixels, no amount of downsampling will save it. Simplify: use the mark without the wordmark, boost contrast, remove fine detail.
- Test on real tabs. Open your site in Chrome, Safari, and Firefox with 20 other tabs. The icon must read at a glance in a 16px sliver — that’s the actual use environment.
- Add a subtle background shape. Transparent PNGs disappear on dark browser themes. A rounded-square background in your brand color keeps the icon visible everywhere.
- Use SVG when you can. One
<link rel="icon" type="image/svg+xml">covers all sizes crisply and is often under 2 KB. Keep PNG fallbacks for older browsers.
Common Mistakes to Avoid
- Uploading a low-res source. Upscaling a 64px logo to 512px produces blur. Start from a vector file or at least 1024px raster.
- Forgetting the Apple touch icon. iOS ignores standard favicons for home-screen bookmarks and will screenshot your page instead — ugly. The 180×180 icon prevents this.
- Caching confusion. Browsers cache favicons aggressively. After updating, hard-refresh (Ctrl+Shift+R) or bump a query string (
favicon.png?v=2) — otherwise you’ll think the generator failed. - Text in the icon. Anything below ~3 characters is unreadable at 16px. Initials at most; ideally a pure symbol.
Favicon Sizes, Pixel Design, and the Rest of the Toolset
Keep designs simple: bold shapes and strong contrast stay readable at 16 pixels where fine detail vanishes. Test your mark at 16px and 48px before shipping, and remember browser caching can delay a new favicon appearing — rename the file or hard-refresh when it does not update. Once your icon set is done, other finishing touches live nearby: build share images with the gradient generator, compress your site graphics with the image compressor, and check how your pages will look in search with the Google SERP preview tool.