Adding a Favicon to your Website
A favicon is a small image used by web browsers, displayed next to the address bar, bookmarks and in tabs next to the page title which makes it easier to recognize a website or page.
How to create a favicon
A favicon can be a GIF, PNG, JPEG or ICO file, size 16×16, 32×32 or 64×64 pixels. You can create it in any image editing software such as Gimp or Photoshop.
Tip: If you want to use the ICO file format and don’t have any software to save your image as an icon, you can use one of the many free “image to icon” converters, such as Dynamic Drive’s FavIcon Generator (supports transparent images).
What makes a good favicon?
- Keep it simple and relevant - A favicon should be easy to recognize and have strong associations to your website.
- Keep it small (file size) – A favicon is requested for each web page, thus keep the favicon as small as possible. Make sure your favicon is not larger than 2 kb, using a limited colour palette (GIF/PNG) greatly reduces file size.
- Don’t use animations – focus should be on your content, not in the URL field or tab area. Another reason is that animations are not supported by all browsers.
How to add a favicon to your website
W3C recommend that the favicon should be added using a
<link> tag with attributes
href in your
<head> along with a
rel – relationship, specifies the relationship between the current document and the linked document.
href – path to favicon, can be absolute or relative.
type – MIME type (internet media type).
These are the correct MIME types that you should use, depending on file type:
A couple of examples of how to add a favicon to your website using different file types and paths.
PNG file, absolute path
JPEG file, relative path
GIF file, relative path
ICO file, absolute path
Adding a favicon, “the old way”
Another way of adding a favicon to your website is by putting a file called
favicon.ico in the root of your website (http://www.example.com/favicon.ico), however this method is not recommended since it’s not supported by all browsers.