How to Make a Favicon
To make a favicon, add your logo above - or type a letter or emoji - adjust the look, and download the ZIP. The previews show the icon at each real size and in a browser tab, in light and dark mode.
- Choose the source. A PNG or SVG logo works best; any other image is fitted inside a square. No logo? Use a letter or emoji on a coloured background.
- Set the look. Background colour or transparent, the shape (rounded, square or circle) and how much padding goes around the picture.
- Download. Download all icons gives you the complete package; favicon.ico only gives you just the one file.
What's in the Favicon Package
| File | Size | Used by |
|---|---|---|
favicon.ico | 16, 32 and 48 px | Every browser, Windows, search results |
favicon-16x16.png, favicon-32x32.png | 16 and 32 px | Browser tabs and bookmarks |
apple-touch-icon.png | 180 px | iPhone and iPad home screen |
android-chrome-192x192.png, -512x512.png | 192 and 512 px | Android home screen, installed web apps |
site.webmanifest | - | Names the icons and colours for Android and web apps |
favicon-html.txt | - | The tags to paste into your pages |
The Apple icon always gets a solid background and square corners: iPhones round the corners themselves and show transparent areas as black.
Add the Favicon to Your Website
- Unzip the package and upload the files to the root folder of your website, next to your home
page, so
yoursite.com/favicon.icoopens the icon. - Paste the HTML tags (shown above, and in
favicon-html.txt) into the<head>of your pages. - Reload with the cache cleared. Browsers hold on to old favicons, so a private window is the quickest check.
On WordPress you can instead set the 512 px icon as the Site Icon in the Customizer, and it creates the other sizes itself.
Tips for a Clear Favicon
- Simplify. At 16 pixels a detailed logo turns into a blur. Use the symbol from your logo, or its first letter, rather than the full logo with text.
- Use contrast. Tabs are light or dark depending on the browser theme - check both previews.
- Mind the padding. Less padding makes the icon bigger in the tab; a little more looks better on phone home screens.
Need a single .ico file of a different size instead? The image converter saves any image as ICO.
Frequently Asked Questions
How do I make a favicon?
Add your logo or any square image in the box on this page, or type a letter or emoji. Adjust the background, padding and shape, then download the ZIP with every icon size and the HTML to paste into your site.
What sizes does a favicon need?
A favicon.ico with 16, 32 and 48 pixel versions covers browsers and Windows; a 180 pixel apple-touch-icon covers iPhones and iPads; 192 and 512 pixel icons cover Android and installed web apps. The package includes all of them.
How do I add the favicon to my website?
Upload the files from the ZIP to the root folder of your site, so favicon.ico opens at yoursite.com/favicon.ico. Then paste the HTML tags into the head section of your pages.
Why is my new favicon not showing?
Browsers keep favicons in a cache for a long time. Open the favicon address directly, reload it, or try a private window. Search results can take weeks to update.
Can I make a favicon from text or an emoji?
Yes. Choose "Letter or emoji", type one or two characters and pick the colours. It is a quick way to get a clean icon without a logo.
Is my image uploaded?
No. All the icons are made in your browser, and your image never leaves your device.