How to make a favicon and add it to your site
Key points
- A single favicon.ico is enough to start
- Put it in the root and add one line to <head>
- Simple shapes read best when tiny
A favicon is the small site icon shown in browser tabs, bookmarks and next to search results. It is tiny, but it makes your site recognizable at a glance; without one, a generic icon makes the site feel unfinished.
Files you need
The basic one is favicon.ico. An ICO file can hold several image sizes, so the browser can use 16 px in a tab and a larger size for desktop shortcuts. Many sites add these as well:
| File | Purpose |
|---|---|
| favicon.ico | Default icon for every browser |
| favicon.svg | For modern browsers, sharp at any size |
| apple-touch-icon.png | iPhone and iPad home screen (180×180) |
Making them
- Prepare a square logo image of 256 px or more. An SVG is best.
- Drop it into the favicon ICO maker to get a favicon.ico with 16, 32, 48 and 256 px inside.
- For the iPhone icon, run the same image through resize images with format PNG and max width 180. This icon looks better without a transparent background.
Linking them
Upload the files to your site's root folder and add these lines inside the <head> of every page.
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">On WordPress and many blog platforms there is a "Site Icon" setting. Upload your image there and the tags are added for you.
Making it readable when small
16 px is very small. Long logos and words are barely visible, so make a simplified version with just an initial or a symbol. A bold shape on a colored square or circle reads well on both light and dark tabs.
Still seeing the old icon?
Browsers cache favicons for a long time. Do a hard refresh (Ctrl + F5, or Cmd + Shift + R on Mac), or add ?v=2 to the address so it looks like a new file. Icons in search results update only when the search engine recrawls your site.