Web and PWA icons
Favicons, maskable icons, site.webmanifest, browserconfig.xml, and the HTML head links.
Web and PWA icons
9 images · 4 configs · 16-512 px
Drop one square source image (1024×1024+ recommended), or paste with Ctrl+V
or click to browse from your device
Supports: PNG, JPG, JPEG, WEBP, AVIF, SVG, BMP, TIFF
Fit
The source image stays in this tab only. A reload starts the workbench fresh, on the same platform tab.
Background
The color fills the maskable icons and flattens the apple-touch icon.
Opaque outputs here (iOS icons, Play Store icon, apple-touch icon, Expo icon) flatten transparency to white. Set a background color or image to control the fill.
How it works
Contain letterboxes the source inside each square; cover fills and crops. Padding insets the foreground inside the platform safe zone and flows into the downloaded files. Monochrome outputs fill the source silhouette with the mono color. Maskable icons hold the artwork inside the browser's safe circle.
- Archive0 images · 1 config
- PWA / Web9 images · 3 configs · 16-512 px
Drop or paste an image and the icon set builds here live.
13 files
The full file list renders here as soon as a source image is in.
Files
{
"name": "App",
"short_name": "App",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#ffffff",
"icons": [
{
"src": "android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "maskable-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "maskable-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}
Paste, drop, or type to begin. Everything stays on this device.