PhotoRiyaHow to make a favicon
Drop your logo or picture onto the box above. The icons are made at once and shown at their real sizes. Choose Fit picture or Crop to square, pick a Square, Rounded or Circle shape, add space around the picture, and optionally a background colour. Press Download all (ZIP).
Upload the files to the root of your site, paste the tags from Copy the tags into the <head> of your pages, and your icon will show in browser tabs, bookmarks, search results and on phone home screens.
What is in the ZIP
favicon.ico holds 16, 32 and 48 pixel versions, which is what older browsers and Windows ask for. favicon-16x16.png and favicon-32x32.png are for modern browsers. apple-touch-icon.png is 180 pixels for iPhones and iPads. android-chrome-192x192.png and android-chrome-512x512.png are for Android and installable web apps, listed in site.webmanifest. A file called head-snippet.html has the tags to paste.
Every size is made from a 1,024 pixel master with a high-quality filter, not by stretching one small icon, so small sizes stay crisp.
Tips for a clear favicon
A favicon is shown at only 16 pixels, so use a simple mark: a letter, a symbol or a bold shape, not a full logo with text. Use Crop to square for a picture that fills the square, or Fit for a logo that must not be cut. Keep a little space around the picture, and use a background colour if your logo is dark on transparent, since browser tabs can be dark too.
Need a different size? The resize image tool does it, and to design the logo itself, open PhotoRiya.
Questions people ask
How do I make a favicon from an image?
Drop your image onto the generator above, adjust the shape and spacing if you like, then download the ZIP. Upload the files to your site and paste the tags into your page head.
What size should a favicon be?
Browsers use 16 and 32 pixels, Windows uses up to 48 pixels, iPhones use 180 pixels and Android uses 192 and 512 pixels. The ZIP has all of them, so you don't need to choose.
Do I still need favicon.ico?
Yes, it's worth having. Some browsers, feed readers and tools still ask for /favicon.ico, and it's the file that works with no tags at all if you put it in the site root.
Why does the Apple icon have no transparency?
iOS fills transparent areas with black and adds its own rounded corners. So the Apple touch icon is a plain, full square on your background colour, or white if you chose none.
Can I make a favicon from SVG?
Not here yet. Export your SVG as a PNG of 512 pixels or more and drop that in. Browsers also accept an SVG favicon directly, so you can keep the SVG alongside these files.
Is my picture uploaded to a server?
No. The icons are made inside your browser tab, on your own device, and nothing is sent anywhere. That also makes it instant, with no upload or queue.
Is it free?
Yes. There is no limit, no watermark and no account. PhotoRiya is open source under the MIT and Apache 2.0 licenses.
More free tools
- PNG to ICO converter transparency keptConvert a PNG to an ICO file with 16, 32 and 48 pixel icons.
- Apple touch icon generator 180 × 180 for iPhone and iPadMake a 180 by 180 pixel Apple touch icon for iPhone and iPad home screens.
- Resize image online by pixels or percentResize a photo by pixels or percent and save it as JPG, PNG or WebP.