Favicon & App Icon Generator
Drop in one image and get every icon size you need — favicon.ico, apple-touch-icon, Android Chrome icons, a web manifest and the HTML to paste. Everything is drawn on a canvas in your browser; your image never leaves your device.
Source image
Background
Background shape
A solid background is safest for the apple-touch-icon — iOS ignores transparency there.
site.webmanifest
{
"name": "Your site",
"short_name": "Your site",
"id": "/",
"start_url": "/",
"scope": "/",
"display": "standalone",
"orientation": "any",
"theme_color": "#ffffff",
"background_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"
}
]
}Save as site.webmanifest in your site root.
HTML link tags
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest"> <meta name="theme-color" content="#ffffff">
Paste into your <head>.
browserconfig.xml
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/mstile-70x70.png"/>
<square150x150logo src="/mstile-150x150.png"/>
<wide310x150logo src="/mstile-310x150.png"/>
<square310x310logo src="/mstile-310x310.png"/>
<TileColor>#ffffff</TileColor>
</tile>
</msapplication>
</browserconfig>Adds the Windows tile set. Save as browserconfig.xml at your site root.
What Favicon & App Icon Generator does
- PNG icons at 16, 32, 48, 180, 192 and 512 px, plus maskable icons
- Framing: padding, zoom, rounded or circular shape
- A multi-size favicon.ico and an SVG favicon
- browserconfig.xml with Windows tile images
- site.webmanifest with app name, theme colour and HTML tags
- Live tab / iOS / Android / Windows previews
- Download each file or all of them as a ZIP
How to use it
- 01
Open the Favicon & App Icon Generator.
- 02
Drop in an image or choose one from your device.
- 03
Pick a background and the app name for the manifest.
- 04
Download the icons, or all of them as a ZIP, with the HTML snippet.
Common questions
- Is my image uploaded?
- No. Icons are rendered from your image on your device with the Canvas API, so the source image is never uploaded.
- What do I get out of it?
- A complete set: PNG icons at 16, 32, 48, 180, 192 and 512 px, maskable app icons, a multi-size favicon.ico, an SVG favicon, browserconfig.xml with Windows tiles, a site.webmanifest and the HTML link tags — downloadable individually or as a ZIP.
- Can I control the look of the icon?
- Yes. Frame the art with padding, zoom and a rounded or circular shape, then preview it as a browser tab, iOS, Android and Windows icon before you export.