A favicon is the tiny icon that shows up in the browser tab, in bookmarks and next to your site in some search results. It is a small detail that makes a site look finished and helps people recognise your tab among a dozen others.
Start with a simple, square image
Favicons are displayed very small, so detail is lost. A bold, simple mark — a single letter, a logo shape, a strong symbol — reads far better than a busy photo. Start from a square image so nothing gets squashed when it is resized down.
How to make one
- Open the favicon generator and drop in your square image.
- It produces the favicon in the sizes browsers use.
- Download the files and add them to your website.
Adding it to your site
Put the favicon files in your site's root folder and add the small snippet of link tags to the <head> of your pages so browsers know where to find them. After uploading, you may need to hard-refresh or clear your cache to see the new icon, because browsers hold on to old favicons stubbornly.
The favicon is generated in your browser from your image, so nothing is uploaded to a server.