Upload your logo or icon and get every favicon size you need in seconds: 16×16, 32×32, 48×48, 96×96, 180×180 Apple touch icon, and 512×512 for PWAs. Download a complete ZIP with favicon.ico, site.webmanifest, and a copy-paste HTML snippet. Everything runs in your browser your image never leaves your device.
Generates 16×16 up to 512×512 PNG plus favicon.ico and Apple touch icon in a single click.
Your image is resized by the HTML5 Canvas API inside your browser. Nothing ever reaches a server.
One download gives you every PNG, favicon.ico, site.webmanifest, and a ready-to-paste HTML snippet.
Upload any PNG, JPG, SVG, or WEBP image. The tool resizes it to every standard favicon dimension and packages everything into a ready-to-deploy ZIP — no account, no cost, no server.
Drop your logo or icon here
or click anywhere to browse files
PNG, JPG, SVG, WEBP supported · Max 10 MB · Square image at 512×512px or larger gives the best result
No account required — free forever
A favicon (short for "favorite icon") is the tiny image that appears in the browser tab next to your page title, in bookmark lists, browser history panels, and on mobile home screens when someone saves your site as a shortcut. The term comes from Internet Explorer 5, which introduced the feature in 1999 and stored these icons inside a user's Favorites menu.
Despite its small size often just 16×16 pixels in a browser tab the favicon is one of the most-seen brand elements on the web. Every time a visitor opens a tab to your site, the first visual signal they get is your favicon. It helps users find your tab among dozens of others. A missing favicon is an instant signal of an unfinished website; a polished one quietly communicates quality and trust.
Brand recognition in busy tab bars
People who keep many browser tabs open use favicons to navigate quickly. A clear, memorable icon keeps your site recognizable and reduces the friction of switching back to your page.
A fast, cheap trust signal
A missing favicon sets off a quiet red flag. It suggests the site is unfinished or low-effort. Adding one is one of the fastest trust improvements you can make to any website with zero cost.
App-like home screen icon on mobile
When iOS or Android users save your site to their home screen, the device uses your apple-touch-icon or PWA manifest icon. Without one, iOS takes a blurry screenshot of your full page. A proper icon makes your site feel like a native app.
Browsers and operating systems request different sizes depending on where they display the icon. Here is what each size does and why it belongs in your favicon package.
16×16 — favicon-16x16.png
Standard browser tab icon shown on every desktop and laptop browser.
32×32 — favicon-32x32.png
Retina and HiDPI tab icon requested by Chrome and Firefox on high-resolution screens.
48×48 — favicon-48x48.png
Windows taskbar shortcut icon used when a visitor pins your site to the desktop.
96×96 — favicon-96x96.png
Google TV, older Android browsers, and some search result listings.
180×180 — apple-touch-icon.png
Apple touch icon used by iOS and iPadOS when someone adds your site to the home screen.
512×512 — favicon-512x512.png
PWA splash screen and maskable icon for Android home screen shortcuts.
The favicon.ico file is a legacy container format that can hold multiple sizes in a single file. Modern browsers prefer PNG, but placing a favicon.ico in your site root ensures compatibility with RSS readers, crawlers, password managers, and older enterprise tools that request it automatically.
Prepare a square source image
Use a PNG or SVG that is at least 512×512 pixels. Simple, bold shapes look best at 16×16. Avoid thin lines or small text that disappear at tiny sizes.
Upload your image
Drag and drop onto the tool above or click Choose Image. The file is read instantly by your browser no upload, no waiting.
Preview every size
The live browser tab preview shows exactly how your favicon looks to visitors. Check the 16×16 thumbnail carefully that is the size people see most.
Download the complete package
Click Download All (ZIP) to get every PNG, favicon.ico, site.webmanifest, an HTML snippet, and a plain-English README in one file.
Deploy to your website
Copy the files to your site root or /public folder, then paste the HTML snippet inside your page's <head> tag. Done.
Once you download the ZIP, copy all files to your site root (or the /public directory in Next.js), then paste the following inside the <head> of every page:
Paste inside <head>
favicon-snippet.html<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png" />
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png" />
<link rel="manifest" href="/site.webmanifest" />For the Next.js App Router, place favicon.ico directly in the /app directory and Next.js handles it automatically. For all other sizes, copy them to /public and reference them in your root layout.js metadata object.
The tool outputs six sizes: 16×16, 32×32, 48×48, 96×96, 180×180 (Apple touch icon), and 512×512 PNG. It also builds a favicon.ico file that embeds the 32×32 image for legacy browser support.
No. All processing happens inside your browser using the HTML5 Canvas API. Your image never leaves your device, and there are no server requests involved in the generation step.
PNG is the best choice because it supports transparency and lossless compression. Start at 512×512 pixels or larger. SVG works too if your browser renders it correctly. Avoid JPEG it has no transparency support, so your favicon gets an unwanted white background on dark-themed browsers.
Browsers cache favicons aggressively, sometimes for days. To force an update during development, open DevTools, go to the Network tab, enable Disable Cache, then hard-reload the page with Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac). In production you can bust the cache by appending a version string such as href='/favicon.ico?v=2'.
A web manifest is required only if you want your site to behave as a Progressive Web App (PWA) with an Add to Home Screen prompt on Android. For a standard website the HTML snippet is enough. The generator includes site.webmanifest in the ZIP so you have it ready when you need it.
Whether you are launching a new site, refreshing a brand, or finalizing your hundredth Next.js project skip the Photoshop workflow and the paid subscriptions. Upload your image and download a production-ready favicon package in under 10 seconds.
Free forever · No account needed · 100% private
Edit, optimize & convert SVG files in your browser. Export clean SVG or JSX.
Compress images up to 90% — WebP, AVIF, PNG, JPEG. 100% client-side.
AI background removal — no uploads, no subscription. Transparent PNG output.
Generate harmonious color schemes using color theory — mono, triadic & more.