DevHeart Web Development Adding a Favicon to your Website

Adding a Favicon to your Website

The Website Favicon

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).

Favicon recommendations

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 rel, type and href in your <head> along with a profile.

Syntax

<head profile="http://www.w3.org/2005/10/profile">
    <link rel="icon" type="[MIME TYPE]" href="[PATH]" />
</head>

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:

  • GIF: image/gif
  • JPEG: image/jpeg
  • PNG: image/png
  • ICO: image/vnd.microsoft.icon

Examples

A couple of examples of how to add a favicon to your website using different file types and paths.

PNG file, absolute path

<head profile="http://www.w3.org/2005/10/profile">
    <link rel="icon" type="image/png" href="http://www.example.com/png-favicon.png" />
</head>

JPEG file, relative path

<head profile="http://www.w3.org/2005/10/profile">
    <link rel="icon" type="image/jpeg" href="/jpeg-favicon.jpg" />
</head>

GIF file, relative path

<head profile="http://www.w3.org/2005/10/profile">
    <link rel="icon" type="image/gif" href="/gif-favicon.gif" />
</head>

ICO file, absolute path

<head profile="http://www.w3.org/2005/10/profile">
    <link rel="icon" type="image/vnd.microsoft.icon" href="http://www.example.com/favicon.ico" />
</head>

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.

 
 
 

Comments: 4

Feel free to share your thoughts on this article.

  • Jakub Konecki

    Nice, comprehensive article – waiting for more ;-)

    I think the mime type for gif is wrong:

    GIF file, relative path

     
     
     
    • Yes you are right, thanks for the notice. Next article coming soon.

       
  • Frank

    Hi, Thanks for providing these simple but detailed instructions. Can you suggest me the best free hosting service to host our favicons? I have also published my very first hubpage about add favicon to blogger. Hope it’s related to here. What do you think about it? (hey, i’m just a newbie in this field, so please help me if there is a mistake) Thanks.

     
     
     
  • chary

    This is quite useful article for all designers like me.

    Thanks DevHeart!!!

     
     
     
  • Leave a Reply
     
    Your Name
     
     
     
     
     
 
© 2014 DevHeart and the authors.
Powered by WordPress | Created by Arcsin