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:

]]></b:skin>
and this:
</head>

(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: