Original source
Upload a PNG or SVG to see preview.
Favicon & PWA Icon Generator
Upload one PNG or SVG, preview website and PWA icons, then download the ZIP with favicon.ico, PNG files and site.webmanifest.
- Free to use
- No sign-in needed
- PNG and SVG sources
- Favicon and PWA outputs
Icon generation workspace
Upload one PNG or SVG, tune padding, background, manifest, previews, and downloads from the main panel.
Upload PNG or SVG
PNG and SVG are supported. Transparent PNG or simple static SVG is recommended. Minimum suggested size is 512×512.
Drop your PNG/SVG icon source here
or click to select a file
Layout Settings
Upload one PNG or SVG, tune padding, background, manifest, previews, and downloads from the main panel.
Padding mode
Background mode
Preview corner style
Background color
Manifest Settings
Download the full icon pack ZIP, or export manifest and individual files.
Display mode
Preview
Upload a PNG or SVG to see preview.
Preview
Upload a PNG or SVG to see preview.
Detected subject bounds
Upload a PNG or SVG to see preview.
Favicon preview
—
Apple icon preview
—
PWA icon preview
—
Maskable preview
—
Output Files
These files are generated automatically and can be downloaded separately or as a ZIP package.
Download
Download the full icon pack ZIP, or export manifest and individual files.
Favicon preview
4favicon-16x16.png
16×16
favicon-32x32.png
32×32
favicon-48x48.png
48×48
favicon.ico
48×48
Apple icon preview
1apple-touch-icon.png
180×180
PWA icon preview
2icon-192x192.png
192×192
icon-512x512.png
512×512
Maskable preview
2icon-maskable-192x192.png
192×192
icon-maskable-512x512.png
512×512
Output Files
3icon-256x256.png
256×256
icon-1024x1024.png
1024×1024
site.webmanifest
JSON
Manifest Settings
{
"name": "Toolbye App",
"short_name": "Toolbye",
"theme_color": "#2563eb",
"background_color": "#ffffff",
"display": "standalone",
"start_url": "/",
"icons": [
{
"src": "icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "icon-maskable-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "icon-maskable-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any maskable"
}
]
}Use your downloaded icon pack
The ZIP contains 10 PNG icons, favicon.ico and site.webmanifest. These are website and PWA assets; the pack is not a complete native app project.
Files included in the ZIP
favicon-16x16.pngfavicon-32x32.pngfavicon-48x48.pngapple-touch-icon.pngicon-192x192.pngicon-512x512.pngicon-maskable-192x192.pngicon-maskable-512x512.pngicon-256x256.pngicon-1024x1024.pngfavicon.icosite.webmanifest
- Extract the ZIP and upload the files to your website. This example puts them together at the site root.
- Add the following links inside the HTML head of your pages.
- Before exporting, set the app name, colors and start URL. Keep site.webmanifest next to its four referenced PWA PNG files; their paths are relative to the manifest.
- Open the icon and manifest URLs to check that they load. Preview the result on your target devices; icons alone do not make a site a complete installable PWA.
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">For a subdirectory such as /icons/, update the HTML links to that directory and keep the manifest and PNGs together. Set start_url to your actual app entry URL. The ZIP does not include your source SVG.
How to use
- Upload one PNG or SVG source image. The tool auto-detects visible subject bounds.
- Pick padding mode and background options, then review favicon, app, and maskable previews.
- Download ZIP package with PNG files, favicon.ico, and ready-to-use web manifest.
Favicon, PWA, and Maskable: what is different?
Favicon
1Small website tab icon. Needs clean silhouette and enough edge spacing at tiny sizes.
PWA icon
2Home-screen icon for installed web apps. Usually exported at 192×192 and 512×512.
Maskable icon
3Android launchers may crop icon shape. Subject must stay inside a safer center area.
Common icon generation mistakes
Subject touches icon edges
Directly scaling source to full canvas often causes clipping on launchers and tabs.
Large transparent empty area in source
A huge transparent border can make output look too small. Automatic bounds detection reduces this.
Uploading unsupported source format
This tool supports PNG and SVG. For complex vector assets, prefer simplified SVG or PNG.
Source resolution is too low
Small images can look blurry at 512/1024 exports. Use higher-resolution originals when possible.
Does this tool send data to a server?
In the current implementation, image analysis, icon rendering, manifest generation, and ZIP packaging run in your browser.
The icon source image is not uploaded to a dedicated processing API in this workflow.
FAQ
What image format can I upload?
PNG and SVG are supported. Transparent PNG and simple static SVG are recommended.
Why should icons not touch edges?
Icons can be cropped differently across platforms. Safe margins keep important content visible.
What is the difference between favicon and app icons?
Favicons are tiny browser tab icons, while app/PWA icons target launcher and install surfaces.
What is a maskable icon?
A maskable icon supports launcher masking. It needs a safer center area so the subject is not clipped.
Will my image be uploaded?
In this version, icon generation runs client-side in the browser during normal usage.
What source size should I use?
At least 512×512 is recommended. 1024×1024 or higher gives better quality for large exports.
Why is transparent PNG recommended?
Transparency helps detect the real subject bounds and gives cleaner icon placement.
Can I recolor SVG icons?
Yes. Switch icon color mode to custom and choose a preset or HEX color. This applies a single-color tint.