Thursday, April 16, 2009

Creating and Adding a Favicon to Your Blog

Do you know what a favicon is? It's that little picture that shows up beside your blog address in the address bar of your browser. And, if you're using Blogger, chances are your favicon is a little orange "B". Now take a look at the address bar for this blog. See how there's no "B" there? Instead, you should be seeing a little ninja face/figure. Isn't that cool? (I think so anyway!)

So, besides the cool factor, why does it matter what your favicon is?

It matters because when your blog is added to an RSS feed reader, or when someone has a tab open to your blog (depending on the browser), that favicon will show beside the title of your blog! And we all know that standing out in this sea of artisans is super important, so why not use a favicon to set yourself apart?

Changing your favicon is easy to do, and if you want to change yours, here's what you need to do:

1. Choose a picture you want to use as your favicon. It helps to keep it simple here, because you will be shrinking the picture to minute proportions. Remember that things like text and fine details may get lost in the translation, so choose wisely! (It also helps to save it to the desktop so you can find it easily!)

2. Go here and sign up for an account. (You'll be sent a verification email, so go ahead and check for that and click the included link before you go to step 3.)

3. Sign in to your new account and find the part of the page that looks like this:

4. Click "Choose File", select the picture you're going to turn into your favicon, and hit "Upload Now".

5. You should see this now:

(Don't worry about how distorted that big picture looks, it's the tiny picture above it that matters!)

6. As long as the little picture is acceptable to you, type in a name and hit "Save It". (Be sure you have a check mark in the box that says "Set as my default favicon".)

7. On the left hand side of the page, click the link that says "My Favicon Code."

8. You're going to see a screen that looks like this:

Copy all the code in the top box and IGNORE THE INSTRUCTIONS IN THE YELLOW BOX!!! (They won't work with blogger anymore, so we have to cheat a little!)

9. Open a new window and log into your Blogger dashboard.

10. Click "Layout" and "Edit HTML".

11. Back up your template by clicking "Download Full Template" here:
(Just save it somewhere and leave it alone. It's just in case something goes wonky!)

12. Scroll down the page till you see this:

and this:

(It's going to be about 2/3 of the way through all that code, and one will be right on top of the other.)

13. Paste the code you copied between those two bits of code you found. It should look similar to this:

14. Hit "preview" and wait for the page to load. As long as you see your new favicon showing in your address bar, go ahead and hit "save template". (If you don't see it, hit "clear edits", tell it "ok" and try again. If it still won't work, just clear your edits, back out, and let me know so I can try to help!)

Congrats! You now have a new favicon for your blog!

p.s. I haven't forgotten I promised you "target market answers"... I'm still working on them, so please be patient! :wink:


Ali P April 16, 2009 at 6:20 PM  

Thanks for this post Jenn, I've added a new favicon to my blog today, and it works ;)

Ninja Jenn™ April 16, 2009 at 10:31 PM  

awesome, Ali!

congrats! and thanks for letting me know it worked!


MQuin April 17, 2009 at 9:29 AM  

Jenn, I have a favicon, thanks to your post! cool!! I love it, thanks for sharing!

LoveBug Studios April 17, 2009 at 6:58 PM  

thanks Jenn - as always you give useful & helpful instructions. It works if one follows the instructions. :)

In my case, I actually had the "skin" tag in a couple of places, and in my template the "head" tag is nowhere near it, so it took a couple of tries to get it right.

Janet April 20, 2009 at 11:35 AM  

Hey, great idea! I didn't feel like signing up for Yet Another Account on Yet Another Web Site, so I just took a graphic I had, shrunk it down to 40x40 in Photoshop, uploaded it to my Picasa album, and then referred to your instructions to see where to bung it into my Blogger template. Worked like a charm!

Ninja Jenn™ April 22, 2009 at 2:50 AM  

so glad you all found this one useful!

and thanks for letting me know... i'm off to check out the new favicons on all your pages!


Franni May 5, 2009 at 10:19 PM  

Perfect directions!! Thank you for your help.

Ninja Jenn™ May 5, 2009 at 10:28 PM  

glad you could use them Franni!


Claudia June 2, 2009 at 4:00 PM  

Aren't you the best! Thanks so much, I've added a favicon to my blog. It worked!

Label Cloud

Powered By:Blogger Widgets

  © Blogger templates ProBlogger Template by 2008

Back to TOP