Favicon Generator
Create a favicon.ico and PNG favicons in every size from a single image. Free, instant, and processed entirely in your browser.
What you get
Upload your logo and the generator builds a real multi-size favicon.ico containing 16x16, 32x32 and 48x48 images, so browser tabs, bookmarks and desktop shortcuts each pick the sharpest version.
You also get PNG favicons from 16x16 up to 512x512, a 180x180 Apple touch icon, and the HTML link tags to paste into your page head. Everything is bundled into one ZIP file.
Which favicon sizes do you need?
Browsers use 16x16 and 32x32 for tabs and bookmarks, and Windows uses 48x48 for shortcuts. Google Search asks for a favicon whose size is a multiple of 48 pixels, which the 48x48, 96x96, 144x144 and 192x192 files cover.
Android home screens use the 192x192 and 512x512 icons listed in the web app manifest, and iOS uses the 180x180 Apple touch icon.
| File | Sizes | Used by |
|---|---|---|
| favicon.ico | 16x16, 32x32, 48x48 | Browser tabs, bookmarks, Windows shortcuts |
| icon-192x192.png | 192x192 | Android home screen, Google Search |
| icon-512x512.png | 512x512 | PWA install prompt and splash screen |
| icon-180x180.png | 180x180 | iPhone and iPad home screen |
Add the favicon to your HTML
Put favicon.ico in the root of your site, because browsers and crawlers request /favicon.ico even when no tag points to it. Then add these tags to the head of every page.
The generator outputs ICO and PNG files. If your logo is an SVG, you can also serve it directly with a link tag of type image/svg+xml for browsers that support SVG favicons, and keep the ICO as the fallback.
HTML head
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icons/icon-192x192.png" type="image/png" sizes="192x192">
<link rel="apple-touch-icon" href="/icons/icon-180x180.png">Favicons for a PWA
A favicon alone does not make a site installable. A Progressive Web App also needs a web app manifest that lists 192x192 and 512x512 icons. The ZIP includes that manifest.json next to the favicon files, so the same download covers the browser tab and the installed app.
Need the full set with maskable icons and splash screens? Use the PWA icon generator.
Tips for a sharp favicon
Start from a square image of at least 512x512 pixels, or an SVG. Keep the design simple: fine detail and small text disappear at 16 pixels. PNG favicons keep a transparent background, so your icon sits cleanly on light and dark browser themes.
Everything You Need for PWA Assets
- All icon sizes from 16x16 to 512x512 pixels for every PWA requirement
- A live preview of every icon, each maskable shape and the splash screens before you download
- A real use preview of your icons in a browser tab, a search result and on Android and iPhone home and launch screens, also included in the ZIP
- A one-click demo with a sample logo, so you can try the generator before uploading anything
- Maskable icons for Android adaptive icons, with a proper safe zone
- iOS splash screens for popular iPhone and iPad devices in both orientations
- A ready-made manifest.json with all icon references included
- HTML meta tags for PWA icons and splash screen declarations
- A built-in logo maker for initials or an emoji, if you have no logo yet
- Images processed in your browser and never uploaded to a server
- One-click download of all assets as an organized ZIP file
How It Works
- Upload your logo as a PNG, JPG, SVG, or WEBP file, or make a simple one from initials or an emoji.
- Choose which assets to generate, adjust padding and background color, and check the live preview and the real use preview.
- Download a ZIP with icons, splash screens, manifest.json, and HTML meta tags.
Frequently Asked Questions
What sizes are inside the favicon.ico file?
The generated favicon.ico contains 16x16, 32x32 and 48x48 images in a single file. The browser picks whichever size fits best.
How do I add the favicon to my website?
Copy favicon.ico to the root of your site, copy the icons folder to your public directory, and paste the link tags from meta-tags.html into the head of your HTML.
Can I make a favicon from an SVG or JPG?
Yes. PNG, JPG, SVG and WEBP files are all supported. PNG and SVG are best because they can keep a transparent background.
What image format should I use?
We recommend using PNG or SVG formats for the best quality. PNG works well for photos and complex images, while SVG is ideal for logos and icons as it scales perfectly. JPG and WEBP are also supported but may not preserve transparency.
What is the recommended image size?
For best results, use an image that is at least 512x512 pixels with a 1:1 aspect ratio (square). Larger images will be scaled down, and smaller images may appear blurry at larger icon sizes.
Can I preview the icons before downloading?
Yes. As soon as you add an image, the preview shows every icon size, the maskable icons cropped to a circle, a rounded square and a squircle, and the splash screens for each device. It updates as you change the padding and background color, so you only download once it looks right. The "See your icons in real use" button goes further and shows them in a browser tab, a search result, a desktop shortcut and on Android and iPhone home and launch screens. The ZIP includes that page as preview.html.
Can I use this tool without a logo?
Yes. Choose "No logo yet?" under the upload box, or open the text and emoji icon generator, to make a simple logo from your initials or an emoji on a colored square, rounded square or circle, with an optional gradient. It is drawn in your browser and then goes through the generator like any uploaded image. To just see how the tool works, choose "Try the demo" under the upload box: one click loads a sample logo with a name and colors and generates every asset, splash screens included.
What are maskable icons?
Maskable icons are a PWA feature that allows your icon to adapt to different shapes on Android devices. They include a safe zone so the icon looks good whether displayed in a circle (Pixel), rounded square (Samsung), or other shapes. This tool fills the background with your chosen colour and keeps your logo within the center 80% of the image.
Do I need splash screens?
Splash screens provide a native app-like experience on iOS devices. When a user adds your PWA to their home screen and opens it, the splash screen shows briefly while the app loads. They're optional but highly recommended for a polished experience.
How do I implement the generated assets?
Download the ZIP file and extract it. Copy the icons/ and splash/ folders to your project's public directory. Copy manifest.json and favicon.ico to your root/public folder. Then add the HTML code from meta-tags.html to your index.html <head> section.
Is this tool free to use?
Yes! This PWA Icon Generator is completely free. All processing happens in your browser - your images are never uploaded to any server. You can generate unlimited assets for personal or commercial projects.
Does this tool store my images?
No. All image processing happens locally in your browser using Canvas API. Your images never leave your device, ensuring complete privacy and security.