How to make a favicon
- Drop your logo into the box, or switch to From text or emoji and type one or two letters.
- Choose a shape, a background color and the padding around the picture. The previews show how the icon looks at real size, including in a browser tab.
- Download the favicon pack and copy all its files into the top folder of your website.
- Paste the HTML code into the <head> section of your pages.
What's in the favicon pack
- favicon.ico holds 16, 32 and 48 pixel versions in one file. Browsers and search engines look for it at /favicon.ico.
- favicon-16x16.png and favicon-32x32.png are sharp PNG copies that modern browsers prefer.
- apple-touch-icon.png (180 pixels) is used when someone adds your site to an iPhone or iPad home screen. It always has a solid background, because iOS shows transparent areas as black.
- android-chrome-192x192.png and android-chrome-512x512.png, listed in site.webmanifest, are used for Android home screens and installed web apps.
Details get lost at 16 pixels, so a bold letter or a simple shape often reads better than a full logo with small text.
Frequently asked questions
Is my logo uploaded?
No. The icons are drawn and packed into the zip in your browser, so your image never leaves your device.
Why doesn't my new favicon show up?
Browsers keep favicons in their cache for a long time. Open the site in a private window, or visit yoursite.com/favicon.ico directly and refresh it, to see the new one.
Can I use an emoji as a favicon?
Yes. Switch to From text or emoji and type or paste the emoji. It is drawn with your device's emoji style, so it looks the same on every visitor's screen once saved.
Do I need all of these files?
favicon.ico alone works in every browser. The other files make your icon look sharp on high-resolution screens and on phone home screens.