Loading tool…
Browser tabs, bookmarks, phone home screens and installed web apps all expect a different icon size. Start from one image and get the complete favicon set, a web manifest and the HTML tags to paste into your page, with live previews before you download anything.
Processing locally on your device
Overview
Browsers, operating systems and devices look for site icons in different places and sizes. The classic favicon.ico can hold several bitmaps in one file, and browsers still request it from the site root. Modern browsers also read PNG favicons from link tags. Apple devices use a 180 × 180 apple-touch-icon when someone adds a site to the home screen, and Android and Progressive Web Apps take 192 × 192 and 512 × 512 icons from the web app manifest.
From your source image, the generator creates favicon.ico (containing 16, 32 and 48 px images), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png at 180 × 180, android-chrome-192x192.png, android-chrome-512x512.png and a site.webmanifest that references the Android icons. Everything comes in one ZIP, and the matching HTML link tags are ready to copy into your page’s head. The source can be a PNG, JPG, SVG, WebP or any other image your browser can open.
Square sources work best. A non-square image is fitted inside the square rather than cropped, so nothing is cut off, but it leaves empty space at the sides. Padding (0–30%) adds breathing room around the mark, the background can be transparent or a solid colour, and the corner radius (0–50%) rounds the icon from a sharp square to a full circle at 50%. The apple-touch-icon always gets a solid background, because iOS doesn’t show transparency on home screen icons.
Design matters at 16 pixels. Fine details, thin strokes and small text disappear, so the best favicons are usually a single bold letter, a simplified symbol or a shape with strong contrast. Live previews show your icon in a browser tab in both light and dark themes, and at every size from 16 to 512 px, so you can check it stays legible before you download.
| Size | File | Used by |
|---|---|---|
| 16 × 16 | favicon.ico / favicon-16x16.png | Browser tabs on standard screens |
| 32 × 32 | favicon.ico / favicon-32x32.png | Tabs on high-DPI screens, Windows taskbar shortcuts |
| 48 × 48 | favicon.ico | Windows site icons, some search results |
| 180 × 180 | apple-touch-icon.png | iOS and iPadOS home screen |
| 192 × 192 | android-chrome-192x192.png | Android home screen, PWA install |
| 512 × 512 | android-chrome-512x512.png | PWA splash screens and install dialogs |
| — | site.webmanifest | Lists the Android icons for Chrome and PWAs |
Open a source image, ideally a square PNG or SVG of at least 512 × 512 px.
Set the padding, choose a transparent or coloured background, and adjust the corner radius.
Check the light and dark browser tab previews and every size from 16 to 512 px.
Download the ZIP with favicon.ico, the PNG icons and site.webmanifest.
Upload the files to your site root and paste the copied HTML link tags into your page’s head.
Use cases
Generate the full favicon set in one step instead of exporting each size by hand from a design app, then paste the copied link tags into your template.
Get the 192 and 512 px icons and a site.webmanifest that Android and Chrome use when someone installs your app or adds it to the home screen.
Replace an outdated icon across every size and format at once after a logo change, and use the tab previews to check it still reads on dark browser themes.
Give a hobby project, documentation site or internal dashboard a proper icon in minutes. A rounded corner radius or a circle turns a plain letter into a tidy app-style badge.
Pro tips
Answers to common questions about the favicon generator.
It is still worth including. Some browsers, tools and feed readers request /favicon.ico automatically, and the ICO file holds the 16, 32 and 48 px versions in a single file.
At least 512 × 512 px and square, since 512 px is the largest icon generated. An SVG is ideal because it scales cleanly to every size. Non-square images are fitted inside the square, which leaves empty space at the sides.
iOS doesn’t show transparency on home screen icons, so a transparent area would not look the way you intended. The generator always gives apple-touch-icon.png a solid background to avoid that.
It is a small JSON file that tells Android and Chrome which icons to use when your site is added to the home screen or installed as an app. It points to the 192 and 512 px android-chrome icons.
Browsers cache favicons heavily. Clear the cache, hard-refresh, or open the site in a private window. Also check that the files are at your site root and the link tags are in the page head.
No. ToolEnhancer processes files on your own device inside the browser. They are never sent to, stored on or seen by our servers.
Yes. The favicon generator is free to use with no sign-up, no watermarks and no daily limits.
Add stylish text with custom fonts.
Protect photos with text or logo watermarks.
Create memes with classic top/bottom text.
Combine photos into grid layouts.
Join images horizontally or vertically.
Split an image into a grid of tiles.