Optimize
Favicon generator
Turn a logo, picture or a few letters into every icon a website needs: the browser tab, bookmarks, iPhone and Android home screens, with the HTML to add them.
See the icon in light and dark browser tabs and on phone home screens before you download. Every file is read back and checked first.
Your icon appears here as soon as you add an image or type letters.
Add this to your page's <head>
How it works
Design, preview, download
- Start from an image or letters. Add a logo (SVG or a PNG of 512 pixels or more works best), or type up to three letters.
- Shape it. Square, rounded or circle, a transparent or coloured background, and space around it.
- Check the previews. Browser tabs in light and dark mode, the real 16, 32 and 48 pixel sizes, and the iPhone and Android home screens.
- Download and add. Download the ZIP, upload the files to your website and paste the HTML into each page's
<head>.
What you get
The files and what each one is for
- favicon.ico with 16, 32 and 48 pixel images: the classic icon every browser looks for.
- favicon-16x16.png and favicon-32x32.png for browser tabs and bookmarks.
- apple-touch-icon.png (180 pixels, never transparent) for iPhone and iPad home screens.
- android-chrome-192x192.png and 512x512.png, plus a maskable icon that Android can crop to a circle or rounded square without cutting your design.
- site.webmanifest with your site name and colours, for installing the site as an app.
- favicon.svg when you start from an SVG, so modern browsers show a sharp icon at any size.
Good to know
Making a favicon that reads at 16 pixels
A browser tab shows the icon at 16 pixels, about the size of one letter. Fine detail and long words disappear at that size, so use a simple mark, one to three letters or the most recognisable part of your logo. Strong contrast helps, and a filled background keeps the icon visible on both light and dark tabs. The tool warns you when an image is too small or letters are hard to read.
Related tools
More for your website
FAQ
Questions about favicons.
What size should a favicon be?
There is no single size: browsers use 16 and 32 pixels for tabs, 48 pixels on Windows, 180 pixels on iPhones and 192 and 512 pixels on Android. Start from an image of at least 512 pixels, or an SVG, and this tool makes all of them.
How do I add a favicon to my website?
Upload the files from the ZIP to your website, usually to the top folder, then paste the HTML shown here into the <head> of every page. If you put the files in another folder, enter it under Website details and the HTML follows.
Do I still need favicon.ico?
Yes, it is still worth including. Some browsers, feed readers and tools ask for /favicon.ico directly, without reading your HTML. The file made here holds 16, 32 and 48 pixel images in one file.
What is a maskable icon?
Android shows app icons in different shapes, such as circles or rounded squares, depending on the phone. A maskable icon has extra space around the design so that cutting it to any of those shapes never cuts into your logo. The Android preview shows it cut to a circle.
Why does my favicon not change in the browser?
Browsers keep favicons for a long time. After uploading, open the icon's address directly, reload with Ctrl+F5 or Shift+reload, or try a private window. Changing the file name, or adding ?v=2 to the links, makes every browser fetch the new one.
Are my images uploaded?
No. The icons are drawn in your browser from your image or letters. Your image, the icons and your website details are never sent anywhere.