Favicon Generator
Utility Tools
Generate a complete favicon set from one source image: multi-size .ico, Apple touch icon, Android Chrome icons, plus the HTML <link> snippet and manifest fragment. Downloaded as a single ZIP.
Runs entirely in your browserAbout Favicon Generator
Modern websites need a small bag of icon files to cover every place a browser, OS, or social platform might show your site: the browser tab favicon (`.ico` and PNGs at 16/32px), Apple touch icon for iOS home-screen pin (180×180), Android Chrome icons for PWA install (192×192 and 512×512). The HTML markup to declare them all is also fiddly to remember. This generator takes a single source image (a square logo, ideally 512×512 or larger) and produces the entire bundle.
Upload your source, pick a background color (or keep transparent for PNGs), set optional padding around the icon to keep it from touching the edges, and click Download ZIP. The bundle contains six PNG files at the standard sizes, a multi-size `favicon.ico` (16/32/48 packed into one file for older browsers), a ready-to-paste `<link>` snippet for your `<head>`, and a `site.webmanifest` icons fragment for PWA support. Everything renders in your browser via the Canvas API; your source image is never uploaded.
How to use
- 1
Drop your source image
Drag in a square image (PNG, JPG, or SVG) of at least 512×512 pixels for crisp output at every size. Smaller sources will upscale and look soft.
- 2
Pick a background
Choose a color via the picker, or click Transparent for PNGs that should keep alpha (the .ico will use the chosen background since ICO transparency support varies).
- 3
Adjust padding (optional)
Use the Padding slider to inset the icon by a percentage. Useful when your logo extends to the edges of the source — most icons look better with a little breathing room.
- 4
Preview at each size
Six previews update as you tweak the controls so you can confirm the small sizes (16×16) still read well before downloading.
- 5
Download the ZIP
Click Download ZIP to grab the full bundle. Unzip the contents into your site's public root and paste the HTML snippet into your <head>.
Examples
Typical bundle contents
Output
favicon-package.zip
├ favicon.ico (16/32/48 multi-size)
├ favicon-16.png
├ favicon-32.png
├ apple-touch-icon.png (180×180)
├ android-chrome-192.png
├ android-chrome-512.png
├ html-snippet.html (copy into <head>)
└ site.webmanifest (icons fragment)HTML <head> snippet
Output
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Frequently asked questions
What size should my source image be?+
At least 512×512 pixels — that's the largest output size. Anything smaller will upscale and look soft. SVG sources are ideal because they scale perfectly. Square aspect ratio is essential; rectangular logos will look squished.
Should I use a transparent background?+
PNGs with transparency look better on most browser tabs (they blend with the tab's background color). For the favicon.ico used by older browsers, a solid color tends to be safer because ICO transparency support varies. Try transparent first and switch to a solid color if previews don't look right.
What's the difference between favicon.ico and favicon-32.png?+
Both are valid favicons. The .ico is a legacy multi-size format that very old browsers (IE10 and earlier) require; modern browsers accept PNG. The generated ICO packs three sizes (16, 32, 48) into one file. The PNGs are used by modern browsers via explicit `<link>` tags.
What's the apple-touch-icon for?+
When iOS users add your site to their home screen, iOS uses this 180×180 PNG as the app icon. Without it, iOS scales whatever it can find and the result is usually blurry. Always include it if you have any iOS audience.
Are the android-chrome icons necessary?+
They're used when your site is added to an Android home screen (or installed as a PWA). The 192×192 is the main display size; the 512×512 is used for the splash screen and high-res displays. If you don't care about PWA install, you can skip them, but they're tiny so including is harmless.
Does the ICO file actually contain three sizes?+
Yes. The generator packs 16×16, 32×32, and 48×48 PNG images into a single .ico container — the standard multi-size convention. Browsers pick the right size based on context (16 for tabs, 32 for taskbars, etc.).
Where do I put these files on my site?+
Drop everything in your site's public root (e.g., `/public` for Next.js, the root for static sites). The HTML snippet assumes root-level paths. Adjust the `href` values if you place them in a subfolder.
Is my source image uploaded?+
No. Resizing, packaging, and ICO encoding all happen in your browser via Canvas + a small ICO encoder. Your logo never leaves your machine.
Related tools
Password Generator
Generate strong, cryptographically random passwords with character set and length controls.
QR Code Generator
Create QR codes for URLs, text, Wi-Fi, and contact details. Download as PNG or SVG.
Barcode Generator
Generate barcodes in Code128, EAN-13, UPC, Code39, and ITF formats.
Invoice Generator
Build and export professional invoices as PDFs. Saved locally to your browser.
PDF Merger
Combine multiple PDF files into one. Reorder by drag and drop.
PDF Splitter
Split a PDF into separate files by page ranges, or one file per page.