Adding Favicon Code to your blog

Welcome to Blogging Sueblimely. To keep up with my posts you can subscribe to my RSS feed and follow me on Twitter. Thanks for visiting!

Table of contents for Favicons

Do your site a favicon.
Adding Favicon Code to your blog

If you followed my first post in this series you will now know how to create the image needed for your favicon (fav-eye-con) icon. Now we have to point our template/theme to that image for it to appear on our site. As you can see if you look in the address bar here I prepared one in advance

If you host the blog on your own domain

Upload your favicon icon file to the root directory of your blog domain e.g. in my case http://www.sueblimely.com

Now you need to point your site to the location of the uploaded favicon.ico. For Wordpress this involves editing your header.php file and putting the following code between the <head> and </head> tags.

Using both codes ensures your icon displays in different browsers.

Example:

(You can edit your header.php file from your Dashboard/Presentation/Theme Editor page or by editing locally and uploading the new version via FTP.)

Code for different image formats:

The format for the Favicons image is PNG, GIF, or ICO and 16×16 pixels or 32×32 pixels, best using either 8-bit or 24-bit colors. It is discouraged to use an other URL than root but we don’t always have the choice, like here a hosted blog.
Using two codes assures they display in different browsers.

For hosted blogs which allow you to change your page template file - eg blogspot (wordpress.com hosted blogs do not yet allow this facility) either:

upload your image to myfavatar. myfavatar will host your favicon icon and provide you with the code that you need to place in your template/theme.
Use a .png or gif image format instead of the .ico format (still 16×16 pixels) and upload this to your normal online storage location (eg picasa online, photobucket) and add one of these codes between the <head> </head> section of your template.

PNG:

GIF:

If your favicon image does not appear at first refreshing your browser or clear your cache should do the trick.

I hope all of this was at least a little clearer than mud. If not please let me know and I will attempt to explain more clearly.

Previous in series

Popularity: 2% [?]

Rate this:

2.5

Similar Posts:

7 Comments »

Comment by no image

Haochi (Who am I?)

2007-11-24 03:22:27

Adding those two lines of HTML code is optional for “If you host the blog on your own domain” because most modern browsers will fetch the favicon automatically, if you place the image under the root directory.

Rate this:

2.9

Reply to this comment

Comment by no image

Sueblimely (Who am I?)

2007-11-24 04:46:53

Most modern browsers will - I was covering all possibilities to be on the safeside so went with W3C recommendations Blogspot users with no access to their own domain were covered by using this too. It may have been less complex for people to learn using your way though.

I appreciate your input Haochi, thanks.

Rate this:

2.5

Reply to this comment

Comment by no image

Mighty Morgan (Who am I?)

2007-11-24 23:55:58

well thank goodness I now have a site that can offer me the cool tips and tricks to do all the fun little things I see other blogs have…..I’m gonna give a go at doing this well see what happens!

Mighty Morgan’s last blog post..Handwriting meme

Rate this:

2.5

Reply to this comment

Comment by no image

Sueblimely (Who am I?)

2007-11-25 03:40:41

It looks as if you have managed to add a favicon. Please let me know if there are other things you would be interested in learning - if you need to know something others will too so asking helps me know what people need to learn

Rate this:

2.5

Reply to this comment

Comment by no image

liezmaya (Who am I?)

2007-12-01 00:09:32

hey Thanks
liezmaya’s last blog post..Serial Drama Kasih tak Terbatas [DA AI TV]

Rate this:

2.9

Reply to this comment

Comment by no image

animated favcion generator (Who am I?)