Favicon generator
Create a full favicon set from one image
Generate a complete favicon pack for browsers, Apple touch icons, and Android/PWA manifests—then copy-paste the meta tags into your project.
Local processing — no uploadsGenerate a favicon pack
Upload one image and download a zip with all common favicon files, ready to drop into your site.
Tip: a square 512×512 PNG logo gives the sharpest results. If your source is not square, the generator will preserve aspect ratio and center it.
Upload or drop your images
Supports PNG, JPG, and WebP files up to 25 MB each. Files never leave your browser.
Drag & drop images or click to browse
PNG, JPG, WebP
Upload one image and download a zip with all common favicon files, ready to drop into your site.
Meta tags & config snippets
After downloading the zip, copy-paste the snippet that matches your stack.
<link rel="icon" href="/favicon.ico" sizes="any">
<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="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="icon" type="image/png" sizes="256x256" href="/favicon-256x256.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<!-- Windows tile config -->
<meta name="msapplication-config" content="/browserconfig.xml">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-150x150.png">
<meta name="theme-color" content="#ffffff">
<!-- Optional (Safari pinned tab): <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#23B7BF"> -->Use this favicon generator to create a full favicon set from a single image. It exports browser PNG icons, Apple touch icons, Android/PWA icons, and a `favicon.ico` fallback in one zip.
Everything runs locally in your browser—no uploads. After downloading, paste the provided meta tags or framework config into your project to apply the icons instantly.
All common favicon sizes included
Covers browser favicons, Apple touch icon, Android/PWA icons, plus manifest and Windows tile config.
Copy-paste meta tags
Ready-to-use snippets for Next.js, React Router, TanStack Router, and plain HTML.
Private by design
Your image never leaves your device—processing happens locally in the browser.
Favicon sizes included
A standard set that works for most websites and PWA setups.
How to generate a favicon pack
Create a complete favicon set and apply it to your project in minutes.
Upload one image
Select a PNG, JPG, or WebP logo. The generator works best with a square source.
Generate the favicon pack
Click Generate to create all common favicon sizes and config files.
The output is centered with aspect ratio preserved to avoid stretched icons.
Download the zip
Get a single zip containing all icons plus `site.webmanifest` and `browserconfig.xml`.
Paste the meta snippet
Copy the HTML/Next.js snippet and drop the files into your site's public folder.
Common favicon workflows
Website favicon pack
Generate the full set of favicon files so your site looks consistent across browsers and devices.
PWA and Android icons
Ship `192` and `512` icons plus a manifest so your web app installs cleanly on Android.
Brand refresh rollout
Update your favicon assets quickly when a logo changes, then paste the snippet to apply.
Features
One image in, full set out
Generate browser, Apple, Android/PWA, and Windows favicon assets from a single source.
No stretched icons
Aspect ratio is preserved and the artwork is centered for clean results.
Ready-to-use snippets
Copy-paste meta tags and framework config for faster setup.
Local and private
Everything runs in your browser. Images never leave your device.
Favicon generator FAQ
Do I still need a favicon.ico file?
Most modern browsers support PNG favicons with the correct `sizes` attribute. This generator also includes a `favicon.ico` file for broader compatibility.
Where do I put the generated files?
Place them in your site's public root (or a folder like `/icons/`). Then update the snippet's path prefix to match where you put the files.
Why does my favicon look blurry?
Start from a high-resolution square logo (ideally 512×512 or larger). Small icons are extremely sensitive to soft edges—use a crisp source and avoid thin details.
How do I use these icons in Next.js?
Use the Next.js tab to copy the `metadata.icons` and `metadata.manifest` snippet into `app/layout.tsx` (or add the `<link>` tags in your HTML head).
My favicon doesn't update after I changed it—why?
Browsers aggressively cache favicons. Clear cache, hard refresh, and consider changing filenames (or adding a version query) when you update icons.
Open the image resizer
Need custom dimensions, presets, or batch resizing? Use the full image resizer.
Open the image resizer