Favicons are a very useful method of branding your blog with your personal style, and are a useful recognition tool for your readers to identify your blog. If you are reading Blogger Buster in Firefox (or have bookmarked my site in IE) you will see an example of a favicon in the left hand corner of your address bar.
A while back, I wrote a post explaining how to replace the default Blogger favicon with your own. But since then, I've discovered an even easier method you could use to upload a favicon to your blog - you don't even need external image hosting to achieve this!
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
For general use, there are two different methods you could use to enable favicons for your blog:
- Upload your favicon (favicon.ico) to the root of your web host
- Call your favicon explicitly in the head section of your blog template.
However, those of us who host our blogs with Blogger do not have access to the root of our hosting account. So unless we enable a favicon by adding code to our blog template, the default orange Blogger icon will display instead.
In my previous post about favicons, I explained that you would need to upload your favicon image (with the .ico extension) to an external hosting account.
This method may have been problematic for those of you who don't have access to an external hosting account which supports the icon file type (Photobucket, Picassa and other free image hosts do not support this).
But guess what: you can use a different image file type (such as PNG, GIF or even JPG) for your favicon. What's more, you can even upload this to Blogger (for example, in the body of a post) which negates the need for any external hosting whatsoever!
To make it even easier for you to use a favicon ion your Blogger powered blog, I have reconfigured the Favicon Generator which you can find in the Tools section of this site to output favicons as PNG files rather than icons (with the .ico extension).
Here is how to enable a favicon for your Blogger powered blog in a few easy steps
- Ensure you have a copy of your blog logo (or another image you would like to use as a favicon). This should be in JPG format for use with the Favicon generator.
- Go to the Favicon Generator page, and upload your image, then click on "Create Favicon". After a second or so, the page will reload and you will see your newly generated icon appear in the box.
- Right click on your icon and choose "Save Image As...". This icon will be in PNG format, and you can rename this anything you wish. Save the icon to a convenient location on your computer.
- Next, go to your Blogger dashboard and create a new page. Upload your icon as an image in the post. If you do not already edit your posts in Edit HTML format, click on this tab and copy the URL of your image from the HTML code. The URL for your uploaded image will appear like this in your post's HTML code:
You need to save this post (albeit temporarily) so it would be advisable to backdate this post, then it will not be confusing for visitors who wonder why you are posting such a small image in your blog! - Finally, go to Layout>Edit HTML in your Blogger dashboard. Just before the closing </head> tag, paste the following section of code:
<link href='http://your-icon-url.png' rel='shortcut icon'/>
<link href='http://your-icon-url.png' rel='icon'/>
Be sure to replace the URLs in red with the URL you copied from your post. - Finally, save your template. Your new favicon will now appear in the address bar!
Note: if you use Internet Explorer, the favicon will not appear unless you have bookmarked your blog and refreshed your browser.
If you would prefer to upload your PNG icon to a different image host, you the method is almost exactly the same, except that the URL you will use to enable the favicon should match that where your PNG image is hosted.
Need Inspiration for your Favicon Design?
Here are some excellent showcases of favicons to inspire you in creating your own unique branded icon:
- Favicon Gallery (By favicon.co.uk)
- 50 Remarkable Favicons (by Smashing Magazine)
- The Favicon Gallery
- MpP Favicon Gallery
- Favicon Gallery (By HTML Kit)
- Download Free Favicon Packs (from Clickfore.com)
I hope this post has helped you to enable your own customized favicon on your Blogger powered blog.
If you've enjoyed this article, please subscribe for updates of future Blogger related articles.
23 comments:
Hey, thanks... I did it!!!
I had to save the file as a png at 33 pixels max in my photo program. For some reason the URL wouldn't work as a saved file in Blogger so I uploaded it to Google Sites and copied the URL from there.
I then used your code above as described and it worked perfectly.
Thanks for your help.
I saved the file as a 33 px png in my photo progam. For some reason, the url from the Blogger post didn't work so I uploaded the photo to Google Sites and copied the URL from there. I then used your code above and voila- perfect.
Thanks for writing this post.
hi.. thanks for your usefull tips..:-). i like your blog
worked great the first time, but what do i do with that 'dead' back-dated post? can i delete it now?
Cool.
& very easy, thank you.
Thanks Amanda. With your help, I have been able to tame blogger. Cheers
Hi,
This is great info but I can't seem to get it to work. Initially, I used an animated gif file with your recommended code and it did not work. So I used your generator and tried it again and . . .it still won't work - help.
Hi,
I hope this is not a duplication as my internet went down. Anyway, thanks for the info, but when I did those steps it is not working for me. Initially, I used an animator gif all it did was change it form B to e, Then I used your generator and got a png.It is doing the very same thing - help
Help - it is not working for me.
Hmm... I created mine, which initially appears in the title bar, but is then replaced by the Blogger "B" logo. Any idea what would cause that?
Hi Amanda,
I have created the favicon in png format, and uploaded it in a new post to get the html. However, I'm not quite sure where to paste in my Layout/ Edit Html.
Thanks in advance!
Cheers
yes....owesome ..keep me trying...
I am trying to fix my favicon on my blog (http://paper-mario-blog.blogspot.com) after it stopped showing up. I tested it from several browsers. IE7 works fine, so does IE8; Firefox 2.0.0.20 displayed it, but Firefox 3.0.11 does not seem to recognize it. It shows the Blogger icon instead. When I view the Page Info, I see that the icon is present and Firefox recognizes it, but it won't implement it.
Hi thanks for the tutorial, I have been searching all over for this, and all the other tutorials did not work. This was very helpful and easier than I thought. It's working properly on firefox but on explorer it only shows the e I refreshed the page but it's still there either way this is the first time it actually worked thanks to your tutorial :)
Merci
wwww.thehorrorpress.com
AMAZING!!!!!!
Had some trouble at first, but then I started just throwing the code in various areas and vwala!
Sweet thanks so much.
www.turfhugger.com
I've spent a lot of time trying to help people do just this and, in the end, came up with another system - http://www.Favicon4free.com
I hope that this helps someone
All the best
Keith
Thanks for sharing the information I was looking for a method to change my favicon.
Thanks for the great tip! Everything works fine when I view my blog in Firefox, but the favicon doesn't show up in Safari or in the blogrolls on other people's sites that have a link to mine. Is this simply a refresh rate thing or is there some other problem to look out for? Any advice most welcome!
Fencing Bear
Didn't work for me, will try one more time & then I give up. It might help if you actually showed the spot where one would post it, I thought I put it in the right spot but it didn't show up so I'm assuming I didn't.
Ok, it's not working because the favicon generator page is down...please fix!!
can meta tags from the Google webmaster tool will make your favicon vanish?
Great Post. Worked pretty easily with no real hassles. Thanks!
Post a Comment