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!!
Enjoy!!
13 comments:
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!
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!
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.
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
thank you so much for sharing your wonderful talents, i have changed my favicon, you can visit my site:
http://www.melandriaromero.net/
I love this tutorial... Thank you!!
Thanks for sharing this tutorial! I placed the code just under the < title > code & it worked perfectly! :)
Hi, thanks so much!! I really worked!! So glad I found your site!! :)
www.momthatblogs.blogspot.com
Hi, just learned that my new favicon is not showing up in IE, only in fox. Any suggestion about it? Thanks again!
Hi, thanks you for sharing this tutorial. I've done it!
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
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
How fabulous! I've always wondered how you do this! :) Thank you so much.
Post a Comment