Favicons are those little icons in the Address bar and next to your Favorites. When I migrated to Blogger, I lost my custom favicon and inherited the default, orange “B.” To restore it to my original “j.u” favicon, I performed some first-grade slight-of-hand trickery (It’s really easy).
- Choose a favicon host.Although possible, Blogger doesn’t make it easy to upload non-post files. To get your favicon online, you need to sign up with an image host. I chose ImageShack since I had a few things on there already. Others you could use include Photobucket or even GooglePages.
- Create my favicon.If you’re creating your own, simply create a 16 x 16 pixel image. You can save it as a GIF or PNG. They should both work.I already had a favicon, although it was in .ico format. When I was on my own server, that was fine, and correct. ImageShack, however, doesn’t allow the uploading of .ico files. I had to convert my file to a standard image format. I chose PNG.
- Upload my faviconI uploaded my favicon. Imageshack gave me a few choices of code to use to display my favicon. I copied the “direct” URL and pasted it in the next step.
- Add favicon to templateOnce my favicon was online (it took less than 4 minutes), I inserted the appropriate HTML into my Blogger template.
<link href="URL_TO_YOUR_FAVICON" rel="shortcut icon">
The whole process took less that 10 minutes, and almost less than 5. If you’re ready to dump that orange B for a spiffy new icon that better represents your blog, the four steps are all you need. If you need help with any of the steps, feel free to leave a comment.Update: If you’re getting some kind of parse error in Blogger, it’s probably looking for a closing tag. Try this code instead (note the added slash toward the end). <link href=”URL_TO_YOUR_FAVICON” rel=”shortcut icon” />
October 15, 2007 at 11:52
I find GooglePages works well for hosting favicons. I have had bad luck with imageshack. They keep deleting the darn thing then I have to upload it again. Just a bit of a pain.
I like your favicon. Very clean. If you are looking for some free ones check out http://www.freefavicon.com/. They have some nice free ones there if you don’t feel like making your own.
October 15, 2007 at 13:03
Good info about imageshack. I’ll have to watch for that. Though I haven’t had any issues with them so far.
February 15, 2008 at 10:03
Can you show me where exactly in the html text you entered the detail. I’ve tried a couple of different locations after and before and can’t seem to get it to work.
I’m hosting my .ico file via tripod and it appears all should be well…but no luck so far.
February 15, 2008 at 10:06
I would also LOVE to know how you got the stretch layout to accommodate your header/banner. I have worked endlessly with blogger to not resize my custom header image with no luck.
http://www.hospitalitytechnologymadesimple.com.
If you could solve that problem for me I would be IMMENSELY grateful!
February 16, 2008 at 01:32
Kevin: It looks like you figured it out. I can see your favicon.
For blogger, the easiest thing is to create an image that fits your header area exactly. Your site is 930×84.
To deal with stretch (or fluid) layouts, you can use a horizontal repeating background similar to this. Going the second route would mean diving a little into CSS.
June 16, 2008 at 13:58
Thanks for the tip. I’m having a problem placing the HTML though and was wondering if you could help? Whenever I try to paste it into the head section of my “edit HTML” on blogger it gives me an error message saying that it’s unable to save it. Do you have any suggestions? Thanks!
June 16, 2008 at 17:56
Veronica: Is it a “parse” error that you’re getting? More than likely it’s looking for a closing link tag. Try the code I added above.
… I just looked at your site and it looks like you got it. How did you resolve it?
June 16, 2008 at 21:10
Thanks for offering to help out. I actually found the following code on another site and it worked. Thanks again!