How to add a favicon to your blog

by Sushant Risodkar · 1 comment

A favicon, also known as shortcut icon, website icon, page icon or urlicon is a small, square icon, usually 16×16px in size, that is displayed alongside the URL in the web address bar of a web browser.

The reason for using a favicon is branding. Most modern web browsers allow tabbed browsing. This means that a user can open several websites in the same browser window. A nice favicon design will distinguish your blog / website from the other websites.

Some modern browsers also allow favicons to be displayed in the Bookmarks section. Again, this will ensure your website will be distinguished from the others.

Favicon formats

The most widely used favicon format is .ico. Other favicon formats used are .gif and .png. You can also add an animated gif as a favicon, but this is currently only supported by Mozilla Firefox. Even though this is only supported by Firefox, there is the possibility of using multiple favicons. For example you can use an animated one which will display in Firefox and a static one which will display in the rest of the browsers.

Favicon Design

A favicon has a 16×16px size so to design it it’s advisable to use a larger size such as 128×128px and then scale it to 16×16px

To get the favicon on your blogger, you need a code to add to your template, and this is it:

<link rel=”shortcut icon” href=”http://myfavicon.com/favicon.ico” />

<link rel=”icon” href=”http://myfavicon.com/favicon.ico” />

Replace “http://myfavicon.com/favicon.ico” with the URL of where your webspace stored your ico file, & paste the code between the head tags of your blog. The favicon will now appear in most browsers address bar and bookmarks. (Not sure about the rhyme or reasoning here, but some do…some don’t.) Added bonus! If you use Mozilla Firefox (why wouldn’t you?) it will also show up on the tabs!!!!

Guidelines

  • The link elements must be inside the head element in the HTML.
  • Use the appropriate resolution and color depth : ICO – include multiple resolutions (the most commonly used being 16×16 and 32×32, with 64×64 and 128×128 sometimes used by Mac OS X) and bit-depths ; GIF – use 16×16 in 256 colors ; PNG – use 16×16 in either 256 colors or 24-bit.
  • For XHTML, the link element must be terminated by ” />” instead of “>”.
  • The .ico file format will be read correctly by all browsers that can display favicons.

Favicon Inspiration

About Sushant Risodkar

Yo! I'm +Sushant Risodkar & my nickname on web is Typhoon. I'm a 19 yrs. old young blogger from India & the owner of SmartBloggerz. If you are looking for SUCCESS as a blogger & affiliate marketer then SmartBloggerz is the right blog for you. You can follow me on Twitter or be my friend on Facebook. And hey! Don't forget to LIKE SMARTBLOGGERZ on Facebook. Read more About Sushant Risodkar.

has written 377 superb article(s) on this blog

Follow me on Twitter · Visit my website →

Felix Albutra - SighNetDollars July 30, 2009 at 4:13 am

Thank you for this lesson. Could you share your collection of favicons? I would to share it on my blog and tell other people that it was given by you…
.-= Felix Albutra – SighNetDollars´s last blog ..8 Fundamental facts why you must join forums =-.

Previous post:

Next post:



whos.amung.us