Rose DesRochers - World Outside my Window

World Outside My Window is a blog about, controversial topics, current events, daily life, and the world as I see it.
Rose DesRochers - World Outside my Window


How to add a favicon to your Blogger blog and Wordpress Blog

October 28th, 2007 by Rose DesRochers · 8 Comments

A favicon is a 16 x 16 or 32 x 32 small icon that is used by some browsers to identify a bookmarked blog. Having a favicon on your blog allows visitors to quickly identify your blog in their favorite folder among the other bookmarked blogs.

You can see a favicon in the photo below.

Blogging Fusion Favicon

To create a favicon you can use an online generator such as
Favicon from Pics.

Upload you image by clicking the “Browse” button and then clicking “Generate Favicon.”

Once your favicon is generated you will be given a link to download you favicon. Click the download link and save the favicon on your computer.

You will need to unzip the favicon to your desktop.

Next upload your Favicon to a free file host. Please note - Blogger does not support .ico files. Fileden.com, however is a a free file host which accepts favicons.

For Blogger Blogs - Go to your Blogger admin panel and click on the template tab and then on Edit HTML.

Copy and paste the following code into your template.


<link href=’YOUR_FAVICON_URL’ rel=’shortcut icon’/>
<link href=’YOUR_FAVICON_URL’ rel=’icon’/>

Replace “YOUR_FAVICON_URL” with the URL of where your ico file is stored, and paste the code between the head </head> tags of your blog.

Save your changes and you’re done.

Wordpress

You will need to edit your header.php of your wordpress blog. Add the following code:

<link href='YOUR_FAVICON_URL' rel='shortcut icon'/>
<link href=’YOUR_FAVICON_URL’ rel=’icon’/>

Save your header.php file.

Note: Your favicon may not appear immediately after you’ve uploaded it. You may need to refresh your browser to see the changes.
Here is the favicon that I just created for Rose DesRochers- World Outside My Window. Rose

Rose Favicon

Wasn’t that easy?

In honor of Breast Cancer Awareness Month I have made the following favicon that you are free to use. Right click and save it to your own computer. Pink Ribbon

If you’re looking for a favicon to add to your blog why not view the selection of favicons offered by Blogger Talk Blog Forum and Blogging Community.

If you liked this post, why not buy me a coffee?

Tags: Blogging Tips
del.icio.us:How to add a favicon to your Blogger blog and Wordpress Blog  digg:How to add a favicon to your Blogger blog and Wordpress Blog  spurl:How to add a favicon to your Blogger blog and Wordpress Blog  wists:How to add a favicon to your Blogger blog and Wordpress Blog  simpy:How to add a favicon to your Blogger blog and Wordpress Blog  blinklist:How to add a favicon to your Blogger blog and Wordpress Blog  furl:How to add a favicon to your Blogger blog and Wordpress Blog  reddit:How to add a favicon to your Blogger blog and Wordpress Blog  fark:How to add a favicon to your Blogger blog and Wordpress Blog  blogmarks:How to add a favicon to your Blogger blog and Wordpress Blog  Y!:How to add a favicon to your Blogger blog and Wordpress Blog  smarking:How to add a favicon to your Blogger blog and Wordpress Blog  magnolia:How to add a favicon to your Blogger blog and Wordpress Blog  stumbleupon:How to add a favicon to your Blogger blog and Wordpress Blog

Related Post:
-Secure Your Blog against Highjacking
-WordPress Blogs Feeds Scraped
-WordPress Security Update
-Must Have Wordpress Plugins
-WordPress 2.0.7 Released - Security Holes

If you found this page useful, consider linking to it.
Simply copy and paste the code below into your web site (Ctrl+C to copy)
It will look like this: How to add a favicon to your Blogger blog and Wordpress Blog




8 responses so far ↓

  • Peter McCartneytest AUSTRALIA Windows XP Internet Explorer 7.0 // Oct 29, 2007 at 11:29 pm

    Hi! Just dropping by to say thank you for your input. Also, I wish you were around when I was trying to work out how to put a favicon on my blog. It took me ages to finally work it out. I think it’s a good idea myself. Adds a unique touch. In regards to the USB drives, my brother has a coffee cup warmer that has several USB connections, but I have failed to find out where to buy them. Your blogging forum site looks interesting. I’ll have to give that a go.

    Thanking you
    Peter McCartney
    Sydney Australia

  • Gerritest UNITED STATES Windows XP Mozilla Firefox 2.0.0.8 // Nov 2, 2007 at 1:04 am

    Love your favicon Rose!

  • Digital Frenzytest CANADA Windows XP Internet Explorer 7.0 // Nov 3, 2007 at 8:45 pm

    Thank you mommy and daddy for your help! :razz:

  • Matt Arnoldtest UNITED KINGDOM Windows XP Mozilla Firefox 2.0.0.9 // Nov 5, 2007 at 4:31 am

    I really need to update my favicon. I made it years ago. lol :???:

  • Mark Antonytest UNITED STATES Windows XP Internet Explorer 6.0 // Nov 7, 2007 at 4:54 am

    Hi Rose, favicons are always a good idea, to personalise your site, also for the users. I find them useful, if you have favourites galore!

    However, some people using IE6 these icons dissapear when temporary internet files are cleared. I made a post about how to keep them:

    http://digital-newworld.com/blog/wp-admin/post.php

    It’s for the benifit of people browsing the web who like to use Internet Explorer. :)

    Mark.

  • Andytest GERMANY Windows Vista Internet Explorer 7.0b // Dec 19, 2007 at 1:24 pm

    Oh, and did not know about it. Thanks for the information …

  • floundertest UNITED STATES Windows XP Internet Explorer 6.0 // Mar 31, 2008 at 2:13 pm

    Rose, I came here via a link you left in Blogger help group. I have worked on this all day. Getting tired now so will ask for help. I’m trying to put a favicon on my practice blog before I attempt it on my good one. I finally got the icon from ‘Favicon from Pics’ onto my desk top, then uploaded to Fileden.com. (You have no idea what a struggle it was.) Fileden generated some code. It has [img] before the http, then it’s closed farther down the line. I don’t remember ever seeing [img] before so I tried using the code as you said with and also without the [img] tags and both times I got this message:
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute “{1}” associated with an element type “href”.

    I really don’t know what I’m doing, so was just trying to follow your instructions. I guess looking at my source will not help you, because it didn’t accept what I did. If you see something quick to suggest that would be great. If you do not want to bother with it, just say you don’t have time; I will understand.

    When I look at the page where the generated code is, there is a line above it that gives more options. It says “Choose a different format: [img] - - Direct URLs - Linked URLs. Should I click one of those?

    If you don’t have time that’s ok, a favicon is not extremely important - guess I don’t really have to have one, but it would be pretty.

  • floundertest UNITED STATES Windows XP Internet Explorer 6.0 // Mar 31, 2008 at 2:16 pm

    Oh, I see it stripped out one of the options. It was the tag: less than, img, greater than. Will see if it will take this.

Leave a Comment