Why it matters
Your icon shows up in browser tabs, bookmarks, search results on phones and on home screens when someone saves your site. Get it wrong and you'll see a blank square on iPhones, a blurry icon in tabs or a black box on Android.
Each place wants something slightly different. iPhones need a 180×180 PNG with no transparency (iOS rounds the corners itself), Android wants 192 and 512px icons listed in a web manifest plus a "maskable" version with a safe zone, and older browsers still look for favicon.ico. This tool makes the full set at once, drawn sharply at each size rather than shrunk from one big image.
How to use it
- Type up to four letters or an emoji, or switch to Image and choose your logo.
- Pick the colours, shape and padding, and check the tab and home-screen previews.
- Press Download everything for a zip, or download single files.
- Put the files in your site's root folder and paste the HTML into the <head> of every page.
FAQ
Why does the Apple icon have square corners?
iOS adds the rounded corners itself. If the PNG is already rounded or transparent, iOS fills the gaps with black.
What is a maskable icon?
Android crops icons into circles, squircles and other shapes. A maskable icon keeps your design inside the middle 80% so nothing important is cut off.
Do I still need favicon.ico?
Browsers mostly use the PNG or SVG now, but some tools, feed readers and older browsers still ask for /favicon.ico, so it's worth having.
Is my logo uploaded?
No. The image is read and drawn on this device. Nothing leaves your browser.
