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.
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
Padding mode
Background mode
Preview corner style
Background color
Manifest Settings
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.
favicon-16x16.png
16×16
favicon-32x32.png
32×32
favicon-48x48.png
48×48
apple-touch-icon.png
180×180
icon-192x192.png
192×192
icon-512x512.png
512×512
icon-maskable-192x192.png
192×192
icon-maskable-512x512.png
512×512
icon-256x256.png
256×256
icon-1024x1024.png
1024×1024
favicon.ico
48×48
site.webmanifest
JSON
Download
Download the full icon pack ZIP, or export manifest and individual files.
{
"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
Small website tab icon. Needs clean silhouette and enough edge spacing at tiny sizes.
PWA icon
Home-screen icon for installed web apps. Usually exported at 192×192 and 512×512.
Maskable icon
Android 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.