Which icons does a website or app need?
Every platform asks for its own icon at its own size. A website needs favicon.ico for the browser tab, 16 and 32 px PNG versions and a 180 px apple-touch-icon for when someone adds it to their iPhone home screen. A progressive web app (PWA) needs 192 and 512 px icons, a “maskable” one that Android can crop into a circle and a manifest file that lists them. An iOS app needs a 1024 px icon without transparency, and an Android app needs launcher icons in five densities.
This generator creates all of that from a single image, ideally an SVG or a square PNG of at least 512 px. You choose which packs you want, the app name, the background colour and the margin, and download a ZIP organised in folders: the website files at the root, an AppIcon.appiconset ready to drag into Xcode and mipmap folders ready to copy into Android Studio.
Icons that cannot be transparent, such as Apple’s, iOS, maskable and Google Play, are filled with the background colour you choose; the rest can keep transparency. The tool also gives you the HTML to paste into your site’s <head>. Everything happens in your browser, without uploading your logo. With ToolStudio Pro you can generate icons for several logos at once.
How to generate your app icons
- Drop your logo (SVG or square PNG) into the tool.
- Tick the icons you want: website favicon, PWA, iOS and Android.
- Type the app name, pick the background colour and adjust the margin.
- Click “Generate icons”, check the preview and download the ZIP.
- Upload the website files to the root of your site and paste the code into <head>.
When to use this tool
- Add a favicon and iPhone icon to a new website in a minute.
- Make a website an installable PWA with its manifest and icons.
- Prepare an iOS app icon for Xcode.
- Generate Android launcher icons in every density.
- Update every icon at once after a logo change.
What the ZIP contains
- Web: favicon.ico (16, 32 and 48 px), favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png (180 px) and favicon.svg if you upload an SVG.
- PWA: android-chrome-192x192.png, android-chrome-512x512.png, maskable-icon-512x512.png and site.webmanifest.
- iOS: ios/AppIcon.appiconset with the 1024 px icon and its Contents.json (Xcode 14 or later).
- Android: android/mipmap-mdpi to mipmap-xxxhdpi with ic_launcher.png and ic_launcher_round.png, plus the 512 px Google Play icon.
- head-snippet.html with the <link> and <meta> tags for your site.
Formats
- Input: SVG, PNG, JPG, WebP, GIF, BMP, AVIF or ICO. An SVG or a square PNG of 512 px or more is ideal.
- Output: a ZIP with PNG, ICO, the JSON manifest and the HTML code.
Frequently Asked Questions
Is my logo uploaded to a server?
No. Every icon is generated in your browser and your logo never leaves your device.
What size should my image be?
Ideally an SVG or a square PNG of at least 512 px, or 1024 px if you also want the iOS icon. A smaller image works, but large icons will look less sharp.
Why do some icons have a background when my logo is transparent?
Apple fills transparent areas of the apple-touch-icon with black, the App Store rejects iOS icons with transparency and maskable icons must fill the whole square. Those icons use the background colour you choose.
What is a maskable icon?
It is a PWA icon that Android can crop into a circle, rounded square or other shapes. The tool leaves a safe margin so your logo is not cut off.
How do I add the icons to my website?
Upload the files at the root of the ZIP to your site’s root folder and paste the code from head-snippet.html (or the one shown in the tool) inside the <head> tag.
Can I generate icons for several logos at once?
Yes, with ToolStudio Pro. Each logo gets its own folder in the ZIP. The free try covers one logo.
Is it free?
You can try it for free with one logo and change the settings as often as you like. For unlimited and bulk use, ToolStudio Pro costs €1.99 a month and includes every tool.