Saturday, January 10, 2009

How to change the favicon on your Blogger Blog

My good friend, Anne, asked if I could write a tutorial on how to change the favicon on a Blogger Blog! If you're wondering what a favicon is, let me explain! It's the graphic next the url address in address box! You know this......

Click picture for better viewing.


It's actually quite easy to change the blogger image to one that is unique and fits your blog. Here's a step by step tutorial on how to do it!

1. You need an image that ranges from 16 x 16 to 32 x 32 pixels in size. You can create this on Photoshop and then resize the image. When saving it to your hard drive save it as PNG file.

2. Once you have an image, upload it to the internet. You can use Photobucket, Flickr or you can even publish it in a post on your blogger blog!! (You'll need to get the url address once it's been uploaded.)

3. Now you are ready to change the favicon. You will need go into your layout page and click on Edit HTML. Scroll down just a bit (It's pretty close to top) and look for this code:

<title><data:blog.pagetitle/></title>

Once you locate the code you will REPLACE it with this code:

<link href='URL of your image' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

(You will need to add the URL address for your image inside this code where is says, URL of your image, in black)

4. Now you are ready to PREVIEW your page, to see if the favicon has been changed! If it is has successfully changed go ahead and click on save!

Enjoy!!

13 comments:

Happy Fun Pants said...

Awesome! I am so excited that you did this tutorial - thank you! :)

I'm going to have to fool around with it and find a graphic that fits what you recommend.

You rock!

Jennifer Uribe said...

Jenie - When I followed your directions, I got my new favicon to post, but it deleted my blog's title from the top of the browser window. It also made my Feedjit visitor tracker lose the name of my blog. I think that instead of REPLACING the code you suggested, you should PASTE the code in front of that line.

When I did this, I got my blog title back and the favicon stayed.

Thanks for the instructions!

Unknown said...

I was going to say the same thing as Mama Bear. If you replace the code, you end up with the url of the blog on your blog tab. If you put the code underneath, you end up with the favicon and the blog title as normal.

Unknown said...

Can you tell me how to save a file as a PNC in Photoshop Elements? It's not coming up in the menu and I can't seem to find any info on it...

da_angel_321 at yahoo.com

moonstar said...

thank you so much for sharing your wonderful talents, i have changed my favicon, you can visit my site:
http://www.melandriaromero.net/

Ami said...

I love this tutorial... Thank you!!

Violet said...

Thanks for sharing this tutorial! I placed the code just under the < title > code & it worked perfectly! :)

Mom said...

Hi, thanks so much!! I really worked!! So glad I found your site!! :)

www.momthatblogs.blogspot.com

Mom said...

Hi, just learned that my new favicon is not showing up in IE, only in fox. Any suggestion about it? Thanks again!

charmie said...

Hi, thanks you for sharing this tutorial. I've done it!

Lindsay said...

Thanks for sharing these tutorials! I just started my blog and you've helped so much! I've used this tutorial as well as making a button and scroll box! Check it out and let me know what you think! jellybeanscraftythings.blogspot.com

Heather said...

Favicon Generator can be found at this site:
http://www.favicon.co.uk/index.php

Thanks for the fabulous tutorials! Having a lot of fun! http://homemakers-journal.blogspot.com

Anonymous said...

How fabulous! I've always wondered how you do this! :) Thank you so much.