Blogger is a very popular free Blogging platform, but each free blogs comes with the same exact default favicon that Blogger is using. You can help set your blog apart by getting your very own unique favicon plus there are a lot of benefits with having your own favicon. This post is in response to menopauseprincess. She asked about Blogger blogs having their own favicon.
Creating or finding your favicon
If want to create your own favicon, you can follow my guide on creating your own favicon. You can also find a free favicon from the 20 free favicon resources I have collected. I’ve used both unique and free favicons, I just try to use a favicon that represents what my website is about or something that is rememberable.
Uploading your favicon
You will need to find an alternative host for your favicon because Blogger does not host custom favicons. A lot of free file hosting services will not host .ico file types, so these are not good options. If you don’t have your own web hosting account, there is a service called myFavatar that will host your favicon for free. Flickr will allow you to host .ico files also, so if you have an account there already that may be a good choice.
Linking to your favicon
You will need to do some updates to your templates in order to get your favicon to show up. This part might get tricky, so if you need any additional help please don’t be afraid to ask. To edit your Blogger templates, after you login go to “Layout” –> “Edit HTML”. Now you will need to add the following line of HTML between the start <head> and end </head> tag:
<link rel="shortcut icon" type="image/ico" href="http://example.myfavatar.com/favicon.ico" />
Make sure you update the location of your favicon to the exact web location where you uploaded your favicon. If you do use myFavatar to host your favicon, they will actually provide you with the exact code to paste into your templates.
Testing your new Favicon
Typically when you save your templates and reload you should be able to see the new favicon. But occasionally there may be settings in your browser that may prevent your favicon from showing up, so you may need to reload or clear your cache in order to see it right away.
Comprehensive Guide to Favicons Series
If you liked this post, subscribe to my full RSS feed. Learn more about rss feeds with my quick guide. You can subscribe through e-mail too.
Thanks so much for remembering this Sarah, I’d even forgotten I’d asked this question. This information will be very helpful for all folks on Blogger. You rock girlie!
No problem and thanks for asking! I couldn’t forget that you asked, I’ve been planning the post for a while. Just finally got it finished.
You are fabulous! I’m not the most tech savvy person so I’ve been working on this since I posted the first comment, but 4 hours later-Voila! I have a favicon, yea!!!! Thank you!
Your new favicon looks awesome! Great job!@#!$#%!
Hey Princess,
Your favicon looks awesome. I’ll have to change mine now since I have a new design up and rolling.
Great tutorial Sarah as always
Monika
@Sarah your icon has a black BG! is it meant to be this way?
btw, i just noticed blogger hosts blogs on my own domain too! will try them someday!
I have seen some animated favicon. What format should the graphic be if you want the favicon animated.
@Monkia: Thanks :c)
@Felix: Black is the transparent color for .ico graphics.
@david: Favicons that are animated are .gif format. Now, it will work but not everywhere if they are still looking for a favicon.ico images. So what I would suggest is to create a .gif and link it in your header:
<link href=”/favicon.gif” rel=”icon” type=”image/gif” />
Than make sure you also save the same image as a favicon.ico and stick in the same folder so browsers or other services still can find your favicon if they are still looking for the old format.
Not very hard at all. I am a bookmarker and never use RSS feed, so it is VERY useful for me. It actually is a little annoying for me to bookmark site with no favicon.
Fine post Sarah
This is a nice post, Sarah. I keep meaning to have someone design some of these for my sites. I didn’t realize you could even do it for the freebie Blogger blogs. Love your jar.
[...] Adding a Favicon to Blogger by Sarah at BlueJar [...]
hmmm, I’m wondering if Blogger has somehow got it blocked, ’cause I followed the directions to a “T” but it’s not showing up. I do appreciate your post on this, and now I’m going to try to figure out how to hide the navigation bar in blogger. The previous codes don’t seem to work anymore. sigh…………
This would be great useful information if only I used the blogger platform - still, thanks for the tips!
When I see a website without an favicon the first thing I think is Amatuer Webmaster. Such a simple thing to add to show that you are a professional that takes note of the ‘little things’.
I enjoyed your perspective on how favicons create traffic.
Hi,
has anybody a good idea why this:
——————————————————–
————————————————————
is not working right under the head tag? I’ve been fu..ing around for I don’t know but couldn’t solve it. It works well when I use google web creator but not when I store the ico on rapidshare. Why???
[...] Adding a Favicon on Blogger [...]
[...] It’s that easy for a WordPress blog. But, the non-automated way to do this is to add a couple lines of code to your header file, which is exactly what Blogspot bloggers should do. [...]
Hey thanks this was very helpful. And now I’ll go make a favicon…
A favicon is an excellent way for people to remember your site when they bookmark it.