Favicon Generator
A tool that generates favicon.ico (16, 32, 48px), PNGs in each size, an apple-touch-icon (180px), manifest.json icons (192 and 512px), and the manifest.json itself from a single image, and lets you download them all as a ZIP. You can adjust padding, background color, and corner radius, and everything runs in your browser.
Drag and drop an image, or click to choose
Supports PNG / JPEG / WebP / SVG (a square image of at least 512×512px works best)
How to use
- Drag and drop the image to use for your icon, or click to choose it. A square image of at least 512×512px works best.
- Adjust padding, background color, and corner radius under "Icon appearance". Changes are reflected in the preview right away.
- Enter your app name and theme color under "manifest.json settings".
- Click "Download all as ZIP", place the files in your site's public directory, and add the displayed tags to your HTML <head>.
About this tool
A favicon is the icon for your website shown in browser tabs, bookmarks, and smartphone home screens. Different places need different sizes and formats: the classic favicon.ico, PNGs for high-resolution displays, an apple-touch-icon for iPhone home screens, and icons referenced from manifest.json for Android and installable web apps (PWAs).
This tool generates all of them from a single image. favicon.ico contains 16, 32, and 48px PNG images, which today's major browsers can display. When making small icons from a large image, it scales down in steps so that fine details are less likely to get lost.
Besides the icon images, the ZIP includes manifest.json and example tags to add to your HTML (favicon-snippet.html). Everything from loading the image to generating the icons and building the ZIP happens in your browser, and your image is never sent to a server.
Frequently asked questions
Can I generate icons from an SVG?
Yes. Because SVG is a vector format, it produces crisp icons at every size. SVGs without a specified width and height are treated as 512×512px.
Where should I put the generated files?
They're usually placed at the root of your site. In frameworks like Next.js, put them in the public directory. If you place them elsewhere, update the paths in the HTML tags and manifest.json.
What happens to transparent backgrounds?
With "Add a background color" off, transparency is preserved. However, iPhone home screens may display transparent areas as black, so a background color is recommended for the apple-touch-icon.
Are images uploaded to a server?
No. Icon generation and ZIP creation both happen in your browser.