Adding a Favorite Icon To Your Site, The How To
December 14th, 2007 by Mack
A favorite icon gives you branding strength and more importantly something your members can recognize in a long list of favorites. It is pretty much straight forward 101 stuff, but I am going to do my best to break it down into simple steps for any management platform.
(Gathering thoughts into sentences....Almost there)
The Basic Concepts
The code you will be adding is very simple
-
<link rel="shortcut icon" href="http://www.yoursite.com/images/favicon.ico" />
Where to stick it
On a regular basis your going to be looking for the first file that loads in sequence. (ie header.html, header.php, header.tpl, etc) Now you need to find the below code that references to the CSS stylesheet for your site, for instance
-
<link rel="stylesheet"
You should add your favorite icon code above or below the reference to your stylesheet . Have a look at mine below for Wordpress.
-
<link rel="shortcut icon" href="http://www.yoursite.com/images/favicon.ico" />
-
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
-
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
-
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
-
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
-
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
Uploading
I am not going into much detail about this aspect. Just make sure it matches your given path in the above code.
Conclusions
That is pretty much it. You might not see any changes take effect until you clear your cache. On Monday I will be talking about creating favorite icons with transparent backgrounds.
Related Post
- Add a Working Mixx Bookmark Icon to the Blogger/Blogspot Platform : Classic or Custom Templates - It literally took me about 2 hours to figure out the syntax for blogspot. I have no idea how people put up with that compared to a self-hosted ...
- Free regular listings until October 31st - I have been working fairly hard lately to get some links in all my categories and you can help me out by submitting your site. Until, October 31st I w ...
- Top Entrecard Droppers Widget for Wordpress - I am embarrassed to say I Google'd this for almost 20 minutes before I realized how stupid I was to make this more complicated that it actually was.& ...
By Gerard McGarry on Dec 22, 2007 | Reply
Surely if you have the favicon.ico in the root of the website, most browsers automatically detect it? Any other reasons to put it in the code too?
By Mack on Dec 22, 2007 | Reply
I don't think they will detect it. I am pretty sure the code is mandatory.
By Mark @ TheLocoMono on Dec 25, 2007 | Reply
I followed your instructions but am unable to display it on my browser. The code is in my header file above the css reference but I am not sure if that is the right place.
By Mark @ TheLocoMono on Dec 25, 2007 | Reply
I figured it out, I checked the source code and realized I forgot the "http://" excellent tutorial, I am going to Stumble it and add it to my tool list.
By Mack on Dec 25, 2007 | Reply
Glad you got it worked out Mark and thanks for the kind words.