How to create a favicon
Drop your logo into the box above, or click Choose files. A square PNG or SVG of at least 512 pixels works best; JPG, WebP and HEIC work too.
Pick a background colour for the home screen icons, which can't be transparent. Your brand colour or white suits most logos.
Click Create favicons and download the ZIP.
Put the files in your website's root folder and paste the HTML shown into the <head> of your pages.
Why does a website need several icons?
Browsers still ask every website for /favicon.ico, and show it in tabs, bookmarks and history. iPhones use a separate 180-pixel icon when someone adds your site to the home screen, and Android and installed web apps read their icons from a manifest file.
Each place shows the icon at a different size and shape. A set made for each one looks sharp everywhere, instead of a blurry or cropped logo.
What's in the ZIP
Only the files today's browsers and phones use. Older sets with dozens of sizes, Windows tiles and browserconfig.xml aren't needed any more.
Tab icons keep your logo's transparency. The home screen icons get the background colour you pick, and a logo on a transparent background gets some room around it there, so rounded corners don't cut it off.
| File | Size | Used by |
|---|---|---|
| favicon.ico | 16, 32 and 48 px | Browser tabs, bookmarks, Windows |
| apple-touch-icon.png | 180 px | iPhone and iPad home screen |
| icon-192.png, icon-512.png | 192 and 512 px | Android, installed web apps |
| icon-maskable-512.png | 512 px | Android's round and rounded icons |
| site.webmanifest | – | Tells Android where the icons are |
| icon.svg (from SVG only) | Any size | Sharp tab icon in modern browsers |
Is it safe?
Yes. Favicon Generator runs entirely in your browser. Your files are read and converted by your own device using built-in browser technology, so they are never uploaded to a server and nobody else can see them.
You can check this yourself: open your browser's developer tools, switch to the Network tab and convert a file. No upload requests are made.
Your logo is processed in your browser and never uploaded. The ZIP is made on your device.
Files stay in this tab's memory only until you remove them or close the page.
Frequently Asked Questions
What image should I use?
A square logo or symbol, at least 512 × 512 pixels, ideally a PNG with a transparent background or an SVG. Simple shapes read best at 16 pixels, so a logo's symbol often works better than the full wordmark.
Where do I put the files?
In your website's root folder, so they're at addresses like example.com/favicon.ico. Then paste the four lines of HTML shown after creating them into the <head> of every page, or into your site builder's custom code settings.
Why do the home screen icons have a background?
iPhones and Android draw transparent areas of home screen icons black or white, which can hide a logo. They get the colour you pick, with some room around a logo so nothing is cut off by the rounded corners.
Can I make just a favicon.ico?
Yes: PNG to ICO makes only the .ico file and lets you pick its sizes, up to 256 pixels.
How do I update my favicon?
Replace the files and reload. Browsers keep favicons for a long time, so it can take a while to change; adding ?v=2 to the links in the HTML makes them fetch the new one.