How to add favicon to web site

A favicon is an icon/graphic image that is linked with website or webpage. It stands for “Favorites Icon”. It’s also known as website icon, shortcut icon, bookmarks icon etc. Its sizes would be 16×16, 32×32, 64×64 pixels with 8-bit or 24-bit colors. And mostly used cross-browser compatible format of this icon is *.ico graphic image. Also other image formats are supported by browsers such as *.png, *.gif , and *.jpeg.

Most of the User Agents such as web browser display it as visual identity of the particular website.  it is shown on  address bar or bookmarks list.

W3C preferred standard way of adding favicon to a website is as follows:

This approach for specifying the favicon of website is use of rel attribute value “icon” defined in  profile.

Adding favicon to website using tags :  png”

HTML:

<link rel=”icon” type=”image/png” href=”http://yoursite.com/myicon.png”&gt;

XHTML:

<link rel=”icon”  type=”image/png”   href=”images/myicon.png”>

And also acceptable formats of adding favicon are as following:

HTML:

<link rel=”SHORTCUT ICON” href=”http://yoursite.com/myicon.ico”/&gt;
<link rel=”icon” type=”image/vnd.microsoft.icon” href=”http://yoursite.com/image.ico”&gt;
<link rel=”icon” type=”image/png” href=”http://yoursite/image.png”&gt;
<link rel=”icon” type=”image/gif” href=”http://yoursite/image.gif”&gt;

XHTML:
<link rel=”SHORTCUT ICON” href=”/images/myicon.ico”/>
<link rel=”icon” type=”image/vnd.microsoft.icon” href=”images/image.ico”>
<link rel=”icon” type=”image/png” href=”images/image.png”>
<link rel=”icon” type=”image/gif” href=”images/image.gif”>

Problems with favicon:

* IE6 does not show always favicon, till now it does not show Yahoo, Google, Facebook etc.  web icons
*Tricks may work, these did not work when I had tried so not confirmed-
– IE6 only displays the favicon after the site is bookmarked.
– Try deleting your bookmark and clearing your cache and history. Then, go
back to the site and bookmark it again. It /should/ show after that.

References :

* W3C – favicon – http://www.w3.org/2005/10/howto-favicon

* W3C metadata Profile –  http://www.w3.org/2005/10/profile

* Favicon -Wikipedia – http://en.wikipedia.org/wiki/Favicon

Troubleshooting tricks:

http://bytes.com/topic/html-css/answers/155056-ie-6-favicons

http://www.photoshopsupport.com/tutorials/jennifer/favicon.html

Advertisements

About M Moniruzzaman
A passionate software engineer, have been developing applications on various platforms such as Android, iPhone, .Net (C#) technologies and web based ASP.NET, PHP, JavaScript, jQuery technologies for more than 10 years. Especially I have expertise on developing applications for Android and iPhone, as well as service oriented, client-server based applications where clients will be reside on Android/iPhone that communicate with WCF(.NET) service hosted on server. I have completed certification in Microsoft Certified Professional Developer (MCPD) on .Net 4 . I have completed my graduation in -- B.Sc. (Engineering) in Computer Science and Engineering, ShahJalal University of Science and Technology, Bangladesh. Thanks, M. Moniruzzaman (Zaman)

3 Responses to How to add favicon to web site

  1. Johnc495 says:

    You have brought up a very good details , thankyou for the post. beaabaedfkkd

  2. Johnb863 says:

    Great website! I am loving it!! Will be back later to read some more. I am taking your feeds also fcgbdeefcdeb

  3. Wow! This could be one particular of the most useful blogs We’ve ever arrive across on this subject. Actually Wonderful. I’m also a specialist in this topic so I can understand your hard work.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

%d bloggers like this: