# Favicon Generator Online Free - PNG Icons & ZIP Download
Upload a square logo or auto center-crop, export favicon PNGs at 16, 32, 48, 180, 192, and 512 px, download a ZIP, and copy HTML link and web manifest snippets - all in the browser.
### Source image
Choose or drop a logo
PNG, JPG, WebP · Center-cropped to square
Download ZIP
### Generated sizes
favicon-16x16.png
favicon-32x32.png
favicon-48x48.png
apple-touch-icon.png
android-chrome-192x192.png
android-chrome-512x512.png
### Copy snippets
HTML link tags
```
```
Copy HTML
site.webmanifest
```
{
"name": "My Site",
"short_name": "Site",
"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"
}
```
Copy manifest
## What Is a Favicon Generator?
A **favicon generator** (searched as **favicon maker online**, **create favicon from logo**, or **PWA icon generator**) exports the small PNG files browsers and mobile OSes expect for tabs, bookmarks, home-screen shortcuts, and web app manifests. One square logo must become many pixel sizes - 16×16 for legacy tabs, 32×32 and 48×48 for crisp desktop, 180×180 for Apple touch, 192×192 and 512×512 for Android Chrome and Lighthouse PWA audits.
ToolComb's favicon generator runs in your browser: upload PNG, JPG, or WebP, center-crop to square, resize with canvas smoothing, bundle named files in a ZIP via local ZIP processing, and copy HTML link tags plus a minimal `site.webmanifest` snippet. Your logo never uploads to ToolComb - only local canvas and zip bytes.
Modern sites can serve PNG favicons exclusively via `link rel=icon`, but some crawlers still request `/favicon.ico` by convention. You can symlink or copy a 32×32 PNG to satisfy those requests, or generate ICO elsewhere if legacy IE support is a hard requirement. Transparent logos work - simplify artwork so 16×16 remains recognizable.
Pair exported icons with [image to WebP](https://www.toolcomb.com/image-to-webp) for hero assets and [resize image](https://www.toolcomb.com/resize-image) if your master logo exceeds upload limits before favicon generation.
Favicon work is easy to defer because broken icons do not block checkout or login - yet they signal polish in every browser tab during due diligence, investor demos, and app-store review recordings. Shipping a complete PNG set early prevents emergency fixes the night before launch when marketing notices a blank tab beside a competitor's crisp glyph. The HTML snippet this page generates is a starting template: add `sizes` attributes where you serve multiple PNGs, declare `mask-icon` for Safari pinned tabs if your brand guidelines include a monochrome SVG, and wire theme-color meta tags separately for mobile browser chrome tinting.
Next.js App Router projects typically place files in `app/` or `public/` depending on whether icons are static imports or plain static files. This generator assumes root-relative paths like `/favicon-32x32.png` which match files dropped in `public/`. If you deploy to Vercel, Netlify, or S3+CloudFront, upload the same filenames so cache headers apply consistently; favicons benefit from long cache lifetimes because brand marks change rarely compared to application JavaScript bundles.
## How to Generate Favicons - Step by Step
1. **Choose a logo**
Select an image your browser can decode. Rectangular images are center-cropped to a square.
2. **Review the preview**
Check the square crop and generated PNG previews, especially at small sizes.
3. **Download ZIP**
Download the ZIP containing separate PNG icons and a manifest; it does not contain a multi-size ICO.
4. **Add the files to your site**
Extract the files to their intended location, adjust the provided link and manifest paths, and verify the icons in browsers and on devices.
## Favicon Generator Worked Example - Before and After
A startup ships a Next.js marketing site; designers deliver a 1024×768 horizontal wordmark PNG. Tab icon is missing - Chrome shows a generic document glyph and Lighthouse flags PWA icons.
### Before
No favicon files in public/, no manifest icons. Mobile Add to Home Screen uses a blurry screenshot of the page instead of brand mark.
### After
Upload wordmark, accept center crop to square letter portion, download ZIP, drop files in public/, paste copied HTML + manifest. Tabs show crisp 32×32; apple-touch-icon appears on iOS home screen; Lighthouse icon audit passes. Logo never left the developer laptop via a cloud favicon SaaS.
For wordmarks with thin strokes, designers often supply a simplified icon-only square variant - upload that instead of cropping a wide lockup so 16×16 stays legible.
## When You Need a Favicon Generator - 10 Use Cases
### 1. New website launch checklist
Ship complete icon set before DNS cutover so first visitors never see missing favicon 404s in server logs.
### 2. Rebrand and domain migration
Regenerate all sizes from updated logo guidelines and replace public assets in one commit.
### 3. Progressive Web App minimum icons
Satisfy manifest 192 and 512 requirements for install prompts and Lighthouse scores without opening Photoshop six times.
### 4. Client agency deliverables
Hand small businesses a ZIP plus HTML snippet they can forward to whoever maintains their WordPress or Squarespace theme.
### 5. Internal tools and staging environments
Differentiate staging vs production tabs by generating a tinted favicon variant from the same master logo.
### 6. Documentation and developer portals
Docs sites on subdomains deserve proper icons in bookmark bars during long implementation projects.
### 7. Hackathon and MVP demos
Upload rough logo PNG, export icons in two minutes, look polished in demo video browser chrome.
### 8. Open-source project maintainers
Add favicons to GitHub Pages or static doc sites without checking binary blobs into Figma.
### 9. Privacy-sensitive intranet apps
Generate icons from confidential product logos without uploading to third-party favicon hosts that cache uploads.
### 10. Electron or Tauri shell apps
Reuse generated 512×512 and 192×192 PNGs as window icons after packaging - same source as web manifest. Desktop shells often read ICO or PNG from build resources; dropping these sizes into electron-builder or Tauri config avoids maintaining a separate icon pipeline from the marketing site favicon set.
## Pre-Launch Favicon Checklist
Verify every href in copied HTML returns HTTP 200 in production, not staging-only paths. Open the site in a fresh incognito window - cached favicons from a previous brand survive aggressively. Check Android Chrome install prompt icon and iOS Add to Home Screen icon on real hardware, not only desktop tab favicon. Run Lighthouse PWA icon audit after manifest link is live; fix 404s on android-chrome-512x512.png before chasing JavaScript bundle scores.
Compare 16×16 against competitors in a browser tab bar screenshot for investor decks - blurry marks signal unfinished polish. If your logo uses thin strokes, confirm 16×16 remains recognizable; otherwise ship a simplified glyph in the ZIP and keep the full lockup for OG images only.
Multi-tenant SaaS products sometimes ship per-customer subdomains - each tenant may need a distinct favicon while sharing one codebase. Generate tenant icons from uploaded logos with this tool, commit to tenant-specific static paths, and reference them in dynamic layout metadata rather than hardcoding one global favicon for every hostname.
## Favicon Generator vs Manual Export vs Cloud ICO Services
| Need | This generator | Design tool manual export | Cloud favicon SaaS |
| --- | --- | --- | --- |
| Standard size set + ZIP | ✓ one click | Six+ exports | ✓ |
| HTML + manifest snippets | ✓ copy buttons | Write yourself | Varies |
| Logo stays local | ✓ | ✓ | Often uploads |
| Multi-layer ICO with sizes | PNG focus | Plugin dependent | Often ✓ |
| Free unlimited regenerations | ✓ | License dependent | Plan dependent |
## Common Errors and Honest Limits
- **Center crop loses wide lockups.** Upload a square icon variant when the full wordmark is horizontal.
- **16×16 legibility.** Fine details blur - simplify marks for favicon-specific artwork.
- **50 MB source limit** - downscale massive print PNGs before upload.
- **No multi-resolution ICO file.** Output is PNG set; combine elsewhere if .ico is mandatory.
- **Paths in snippets are examples.** Adjust for CDN, subfolder deploys, and Next.js basePath.
- **Cache busting.** Browsers cache favicons aggressively - rename or query-string when forcing refresh.
- **Dark mode tab UI.** Test light and dark browser chrome against your icon background color.
- **Safari pinned tabs.** This ZIP focuses on PNG sizes; pinned tab SVG masks are a separate asset class.
- **High-DPI displays.** Browsers pick among declared sizes; including 32×48 and 192×512 covers most retina cases.
If Lighthouse still warns about manifest icons after you deploy, confirm the manifest URL is linked in HTML, served with correct `Content-Type`, and references the same 192 and 512 paths you generated here. Staging environments that password-gate the whole site may still pass icon audits on public marketing domains - run audits against the URL users actually install to home screen.
## Standard Favicon Sizes Explained
**16×16** remains the classic tab size on older Windows displays and some embedded webviews. Details disappear quickly - favor bold silhouettes. **32×32** is the workhorse for desktop tabs on retina and non-retina screens when browsers scale down from sharper sources. **48×48** appears in Windows site pinning and some shortcut dialogs. **180×180** maps to Apple touch icon for iOS home screen bookmarks without transparent padding surprises if your PNG fills the square. **192×192** and **512×512** satisfy Web App Manifest icon entries Android Chrome uses for install banners and splash screens; 512 is also a common Open Graph fallback when social crawlers pick the largest declared icon.
You do not need separate artistic compositions per size if the source logo is simple - canvas downsampling with smoothing handles anti-aliasing. Complex logos with micro-text may need a simplified mark below 32 px; designers sometimes maintain two masters (full lockup for marketing pages, icon-only for favicon ZIP) and upload the icon-only file here.
Browsers may pick different declared sizes depending on context - tabs, bookmarks, history, and password managers each request icons at different DPI. Supplying the full set from this generator reduces upscaling blur when a high-DPI display requests a size you omitted. Transparent PNGs work; on dark-themed browser chrome, verify contrast so the mark does not disappear against charcoal tab backgrounds - a subtle circular backing in the source artwork is a design choice outside this tool but common for monochrome glyphs.
## Privacy & Security - Logos Stay Local
Canvas resize and local ZIP processing run entirely in your browser. ToolComb does not store logo uploads or generated ZIPs on servers. No account, no watermark on PNG outputs. Treat downloaded icons like any brand asset on shared machines.
Pre-release product codenames embedded in logo artwork stay on-device during generation - relevant when favicons accidentally contain confidential project names in vector outlines before public rename. ZIP bytes are assembled in memory and triggered via download API; no intermediate cloud storage bucket receives the archive.
Regenerating icons after a logo refresh is free and unlimited - keep the page bookmarked for brand teams that iterate marks frequently during pre-launch without filing tickets to engineering for each PNG export size.
Copied HTML snippets are templates - validate against your framework's metadata conventions before production deploy. Next.js App Router users may prefer the metadata icons API while still serving these PNGs from public.
## Deploying Favicons on Common Hosts
**Vercel / Netlify static:** commit ZIP contents to `public/`, deploy, verify `https://yourdomain.com/favicon-32x32.png` returns 200.**GitHub Pages:** same public folder pattern; remember project pages use subpaths - prefix hrefs in copied HTML with repository name if not using custom domain. **WordPress:** upload via Media Library or FTP to theme directory; paste link tags in theme header.php or customizer additional head section. **Cloudflare:**cache favicons with long TTL rules; purge cache after rebrand deploys or users see stale tabs for hours.
**Next.js metadata API:** you can alternatively declare icons in `app/layout.tsx` metadata export - files from this ZIP still land in public for static serving. **Subpath deployments** (e.g. `/docs/`) require leading paths in every href or browsers request wrong origin root. Test Add to Home Screen on real iOS hardware - simulators sometimes cache icons differently than devices.
Search engines use favicons in result lists; crisp 48×48 reduces blurry SERP glyphs beside competitors. Social platforms may fall back to largest declared icon when og:image is missing - 512×512 from this set is a reasonable emergency OG substitute though dedicated 1200×630 OG images remain best practice for link previews.
White-label agencies generating favicons for multiple clients should rename ZIP files immediately after download - filenames are generic - and store per-client folders in version control to avoid shipping client A's icon on client B's staging domain. Regenerate whenever the master logo changes by even one pixel; favicons are not safe to hand-tweak in paint programs without re-exporting all sizes proportionally.
## Frequently Asked Questions
### What favicon sizes does this generator export?
PNG files at 16×16, 32×32, 48×48, 180×180 (Apple touch), 192×192, and 512×512 (PWA). These cover browser tabs, iOS home screen, Android chrome, and manifest icons.
### How does center crop work?
Non-square uploads are cropped to a square using the center region before resizing. Upload a square logo to avoid losing corners.
### What is in the ZIP download?
A folder of PNGs named by size (favicon-16x16.png, apple-touch-icon.png, android-chrome-192x192.png, etc.) ready to drop into your site's public directory.
### Are images uploaded to ToolComb?
No. local ZIP processing and canvas resize run locally. Your logo never leaves the browser.
### What HTML should I add to my site?
The tool provides sample link tags for the PNG icons and Apple touch icon, plus a web manifest you can adjust to match the files and paths on your site.
### Do I still need favicon.ico?
Modern browsers can use PNG icons declared in link tags. Some clients request favicon.ico; if you need an ICO file, create one separately rather than renaming a PNG.
### Can I use a transparent PNG?
Yes. PNG export preserves alpha. Small sizes may look soft - simplify artwork for 16×16 legibility.
### Is there a file size limit?
Standard 50 MB image upload limit applies to the source file.
### Can I regenerate after changing the source?
Yes. Upload a new image and download a fresh ZIP anytime.
### Is the favicon generator free?
Yes - unlimited ZIP downloads with no watermark.
## Practical Tips - ToolComb
Use this favicon generator flow when you need a correct file for a portal, CMS, or social upload without installing desktop software. Keep the camera or design master separate from exports so you can retry with different settings. If a destination rejects the download, verify width, height, and kilobytes as separate rules - many forms enforce both. Prefer HTTPS, modern Chrome or Firefox, and a stable tab while large canvases encode.
All processing for this tool stays in your browser session on ToolComb. Downloads use a clear`_toolcomb` filename suffix so exports are easy to find beside originals. Closing the tab clears in-memory previews; nothing is retained on ToolComb servers because bytes never upload. On shared computers, clear the Downloads folder when you finish sensitive ID photos, signatures, or geotagged captures. Chain sibling image tools on the same origin when you need crop then resize, resize then exact-KB compress, or EXIF inspect then metadata remove.
Browser limits still apply: very large panoramas may hit canvas maximums, animated GIFs flatten to a single frame in still-image encoders, and AVIF support depends on the engine. When in doubt, export a JPEG or PNG intermediate and continue. Document the final pixel size and file weight in your ticket or PR so reviewers can match what the portal or design system expects without opening proprietary suites.
## Related Image Tools
- [Resize image](https://www.toolcomb.com/resize-image) - downscale oversized logo masters before favicon export.
- [Crop image](https://www.toolcomb.com/crop-image) - manual square crop when center crop is too aggressive.
- [Image to WebP](https://www.toolcomb.com/image-to-webp) - optimize marketing images alongside favicons.
- [Convert to PNG](https://www.toolcomb.com/image-to-png) - lossless logo format before upload.
- [Colour palette extractor](https://www.toolcomb.com/colour-palette-extractor) - pull brand hex values from logo PNG.
## Related Tools
Discover more free tools that might help with your next task.
[Geo Tag Image GPS camera with location stamp, EXIF geotag, and NoteCam-style notes Use Tool](https://www.toolcomb.com/geo-tag-image)
[Resize Image Resize by pixels or percent with optional aspect lock Use Tool](https://www.toolcomb.com/resize-image)
[Crop Image Crop by coordinates or aspect presets Use Tool](https://www.toolcomb.com/crop-image)
[Circle Crop Cut a round profile picture with transparent PNG Use Tool](https://www.toolcomb.com/circle-crop)
[Rotate & Flip Image Rotate 90° steps or mirror images horizontally/vertically Use Tool](https://www.toolcomb.com/rotate-flip-image)
[Watermark Image Stamp text or a logo with opacity and position control Use Tool](https://www.toolcomb.com/watermark-image)
### Related guides
Read the how-to, then come back to this tool when you are ready to run it locally.
- [Why Your Favicon Isn’t Updating in the Browser Tab You replaced favicon.ico and the old icon is still there. Caches, HTML link tags, SVG vs ICO, and how to generate a new set without an account.](https://www.toolcomb.com/blog/why-favicon-not-updating)
- [A Pre-Launch Checklist for a New Web Page Title tags, meta description, Open Graph, SERP snippet, favicon, bundle weight, lazy-load, and a first accessibility pass - before you ship, without a login.](https://www.toolcomb.com/blog/pre-launch-checklist-for-a-new-web-page)
- [How to Generate Favicons for Every Browser ICO, PNG, Apple touch, and SVG favicons from one source image.](https://www.toolcomb.com/blog/how-to-generate-favicons-for-every-browser)
[View All Tools](https://www.toolcomb.com/tools)