> images icons
Favicon & app icons
One image in, all sizes out: for the browser tab and the home screen on your phone, with the finished snippet to paste in.
Choose image
or just drag it here.
PNG · JPG · WEBP · SVG · STAYS ON YOUR DEVICE
“Show all” puts the complete image in the middle of the square, with space left at the sides. “Fill square” fills the square and cuts off a little in the middle to do so.
Padding means: the symbol gets smaller and space stays free around it. iPhone and iPad round the apple-touch-icon themselves, so something is lost in the corners there. Android shrinks an icon like this anyway and puts it on a white circle. Padding here does not help against that.
Percent of the edge length, 50% gives a circle. In the tab you hardly see it, on the home screen a lot.
Transparent adapts to every tab, light or dark. A color is the safe choice if your symbol itself is very light or very dark, otherwise it disappears in the wrong color scheme.
Affects only apple-touch-icon.png. The other files stay transparent. On the Android home screen they still end up on a white circle.
It appears in the site.webmanifest and under the icon on the home screen.
At most twelve characters, otherwise the phone shortens it itself.
The default is the root folder, which is where your home page lives. If the files should go somewhere else, for example to /assets/icons/, enter that here: only the path, without https:// and without the name of your website. The paths in the snippet adapt.
This is where you notice it: at 16 pixels, a lettering becomes a gray line, and fine lines vanish completely. If you no longer recognize your logo, use only the first letter or the symbol without text. On a sharp screen (phone, Retina), the three samples above still show the named file, even if your screen is twice as fine. The tab next to it uses the 32 px file there, just like the real browser.
Once in every page, between <head> and </head>. The theme-color line colors the browser bar on Android. It is only in the snippet if you chose a background color above.
This file is already in the ZIP. It is shown here only for reference. If you already have a site.webmanifest, take over only the “icons” section. Without a chosen background color, this shows white, because Android needs a color for the launch screen.
Need to adjust the logo first? Crop & rotate image · Remove background
Your image does not leave this device.
How it works
- 01Choose an image or drag it here. Ideally it is square, with a clear symbol and no fine lettering.
- 02Set fit, padding, corners and background, and check in the preview at 16 pixels whether you can still recognize it.
- 03Download the ZIP, put the files on your web space and copy the snippet into the <head>.
What the sizes are for: 16 and 32 pixels are the symbol in the tab and in bookmarks. The browser uses 32 on sharp screens. Windows falls back to 48 pixels when you put a shortcut to the page on the desktop. 180 pixels is the apple-touch-icon: it ends up on the home screen of iPhone and iPad. 192 and 512 pixels are in the site.webmanifest and are what Android puts on the home screen and shows briefly at launch.
No .ico: You would have to build the old Windows format byte by byte yourself, and no current browser needs it anymore. Some browsers ask for /favicon.ico once on their own. If the file is missing, your server answers with an error that nobody gets to see. As soon as the lines from the snippet are in the <head>, the browser uses the PNG files.
SVG: If you drag in an SVG file, it goes into the ZIP unchanged, and the snippet lists it first. Browsers that can do SVG then use it and are sharp at every size. Background, padding and round corners apply only to the PNG files, the SVG is not touched. If it contains fonts or images from other addresses, those are missing in the browser tab.
The browser still shows the old icon: This happens almost always. Icons stay in the cache especially long. Reload the page with Ctrl+F5 (on a Mac Cmd+Shift+R). Otherwise a new browser start or a private window helps.
Home screen and “app”: The site.webmanifest tells the phone what your page is called and which icon it has when someone puts it on the home screen. “display”: “standalone” means: it opens without an address bar, like an app. It does not become a real app from the store. For the “Install app” suggestion, Android also requires HTTPS.
What does not happen here: The image is only scaled down, not simplified. A logo drawn for letterhead turns to mush at 16 pixels. No program can rescue that, it is a job for your drawing program. It is not sharpened afterward either. If your image has to be enlarged for a size, the symbol looks soft. Whether that happens depends not only on the image size but also on “Show all” or “Fill square” and on the padding: a logo of 600 × 300 is still enough for 512 pixels with “Show all”, but no longer with “Fill square”. The note above the file list names the affected sizes and the factor.
Behind the scenes: The calculation runs on a scaled-down working copy of your image: the short side goes to at most 1024 points, because the symbols are never bigger than 512. So even a 12-megapixel photo stays smooth. GPS and camera data are dropped when it is recalculated. HEIC photos from an iPhone can only be opened by Safari; otherwise set “Most Compatible” on the iPhone.