Original source
Upload a PNG or SVG to see preview.
Icon Generator
Upload one PNG or SVG to generate favicon, PWA, and app icon packs with automatic padding and safe-area control.
- 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"
}
]
}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.
Icon use-case guides
Generate favicon and PWA icons
Prepare favicon.ico, Apple touch icon, PWA icons, and deployment checks from one source image.
Maskable icon safe area setup
Tune safe-area padding so Android launchers can crop icons without hiding the subject.
Convert SVG to full icon pack
Turn a clean SVG into favicon, app icons, manifest, maskable assets, and a ZIP package.