How to Create a Favicon for Your Website
Create a favicon from your logo, text or an emoji, get every size browsers and phones need, and add it to your site, with a free favicon generator.
Published
Free tool: Favicon GeneratorA favicon is the small icon in a browser tab, bookmark list and search result next to your site's name. On phones, a larger version appears when someone adds your site to their home screen. It's a tiny detail that makes a site look finished and easy to spot among open tabs. This guide explains which files you need, how to design an icon that works at tiny sizes and how to make one with the free Favicon Generator.
The files a modern site needs
| File | Size | Where it's used |
|---|---|---|
| favicon.ico | 16, 32 and 48 px in one file | Browser tabs, older browsers, the default location |
| favicon-16x16.png and favicon-32x32.png | 16 and 32 px | Browser tabs on modern browsers |
| apple-touch-icon.png | 180 px | Home screen icon on iPhone and iPad |
| android-chrome-192x192.png and -512x512.png | 192 and 512 px | Android home screen and installed web apps |
| site.webmanifest | — | Tells Android and installed web apps your site's name and icons |
Designing an icon that works at 16 pixels
- Simplify. A full logo with text becomes a smudge at 16 pixels. Use the symbol from your logo, or one to three letters.
- Use strong contrast between the icon and its background, so it shows up in both light and dark browser themes.
- Fill the space. Small padding keeps the icon readable; too much makes it tiny.
- Test it at actual size in a real browser tab.
An emoji or a single bold letter on a colored square is a quick, effective favicon if you don't have a logo yet.
How to create a favicon with Graph Maker
- Open the Favicon Generator.
- Choose what to make it from: Text or emoji, or Image (upload a logo; a square PNG or SVG works best).
- For text, type 1–3 characters or an emoji and choose the font, text color and text size.
- For an image that isn't square, choose Crop to square or Fit inside.
- Set the shape and background: square, rounded or circle, a background color or a transparent background, and the padding.
- Check the preview at the small sizes it will really be shown at.
- Download the favicon package as a ZIP file with all the sizes and the web app manifest (with your site name), or just the favicon.ico file.
- Copy the HTML the tool gives you into the
<head>of your pages.
Your logo is processed in your browser, so it isn't uploaded.
Adding it to your site
- Unzip the package and put the files in your site's root folder, so that
favicon.icois atyoursite.com/favicon.ico. - Paste the HTML snippet into the
<head>of every page, or your site template. - Reload the page. Browsers cache favicons aggressively, so if you still see the old one, open the site in a private window or clear the cache.
Most website builders and content management systems also have a setting where you can upload a site icon instead.
Frequently asked questions
What size should a favicon be?
There isn't one size: browsers use 16 and 32 pixels, the favicon.ico file usually holds 16, 32 and 48 pixels, iPhones use 180 pixels and Android uses 192 and 512 pixels. The generator creates all of them from one design.
Do I still need a favicon.ico file?
It's still worth including. Browsers look for /favicon.ico by default, and some tools and older browsers only use that file.
Why isn't my new favicon showing?
Usually because of caching. Check that the files are in the right place and the HTML is in the page's <head>, then open the site in a private window or clear your browser cache.