Thursday, August 5, 2010

Notice anything different?

Look closely. Very closely. You probably won't notice it right away, but today I made a favicon for my blog! What's that? Well, it's that little tiny picture that appears next to my blog URL on the top of the screen, and it also appears next to my blog name if you add this site to your favourites.


If you don't already have a favicon for your blog, I suggest you make one! It's simple, doesn't require any HTML knowledge, and, to be honest, is quite cute. Here's how:

Step 1:
Make an icon that you'd like to use for your favicon. It doesn't have to be anything elaborate, because the image is so tiny you probably won't see any detail. For mine, I simply used a coloured background and added a black "P". Paint is really good for this. Make sure to save your image on your computer! Oh, if you already have an icon that you'd like to use, feel free to use that. You only need to make one yourself if you don't have anything usable.

Step 2:
Click here to visit a favicon hosting site and upload your image. It gives you the option to download the icon, or to host it on their site. I recommend choosing the second option. Highlight and copy the code it gives you under the "Host it on IconJ (Direct link)" header.

Step 3:
Go back to blogger, sign in, and edit your blog's HTML. I suggest you copy and save your current layout before you change anything, in case you mess it up accidentally! Once you've done that, find the part in the code that looks like this, without the spaces:
< t i t l e > < d a t a : b l o g . p a g e T i t l e /> < / t i t l e >
It should be close to the top. Now, paste the code you copied earlier on the line directly underneath this.

Step 4:
Click on the preview button, just to confirm that nothing else was accidentally changed in your layout. Press save, and you're done!

Wasn't that simple? The whole process, including making your icon, should only take fifteen minutes or less. Enjoy your new favicon!

Credit: I was inspired by this blogger to create my own favicon.

22 comments:

Marce said...

I like those kind of things, good going Emidy, looks great, simple and professional like.

Juju at Tales of Whimsy.com said...

Whoa! You made that so easy! Thank you! I just made one :) (thanks to you)
What do you think?

Nymeth said...

Love the new Favicon! Well done :D

Nely said...

Oooh purrrty. Good job. :D

Emidy said...

Marce - Thank you Marce! I love it.

Juju - Yay, I'm so glad you tried it out! Yours looks fantastic.

Nymeth - Aw, thank you!

Emidy said...

Nely - Thanks so much!

Melissa said...

I love it, Emidy! Thanks for the tutorial, too :)

miss cindy :) said...

thanks for sharing this :)

Sara said...

Oh so cool! Love it! Thanks for sharing Emidy :D

Linna (21 ♡ pages) said...

I've always wondered how you make favicons work with blogger- awesome tutorial! (:

Emidy said...

Aw, I'm so glad you all like it! Hope you get to try it sometime.

GMR said...

Wow...thanks for the tip! May have to try that out..... ^_^

Elle said...

Wow, this is great! I never knew you could change your favicon on a blogger blog. Thank you for the detailed rundown, I really appreciate it! Yours looks fabulous!

Darlyn said...

i will do it!thanks emidy!

Jan von Harz said...

I learned this trick during the last Blogiesta, very cool.

Lea (YA Book Queen) said...

Very cool! And thank you for the tutorial, I'll have to try it out :)

The Blue Bookcase said...

Thanks for the step-by-step! I've been meaning to do this for ages!

The Blue Bookcase said...

PS - stopping by from the hop :)

Aths said...

Wow.. it's awesome!! I have it on my list of tasks to do, but I've been lazy about finding the how-to-do. Thanks for sharing! :)

Emidy said...

I'm glad you all liked the tutorial! Hope you get to try it out.

Anonymous said...
This comment has been removed by a blog administrator.
Helen's Book Blog said...

SO useful and easy! Thank you. And, I am a new follower (I learned about you from Aths at Reading on a Rainy Day)