About   All Tips   Tips by Category   Tips by Ability   Help!

Favicons- Intermediate


I’m sure you’ve noticed how some blogs and websites have tiny little pictures beside the web address at the top of the screen. That little picture is called a favicon. This tutorial will teach you how to get one!

You will need to create an image for this tutorial. If you do not know how to create an image or have no desire to do so, you can go to Favicons 4 Free where they have several images to choose from. All you have to do is copy the code that they provide and put it into the HTML of your template. Easy peasy.

Still want to try your hand at creating your own? It is important to note that the instructions below create favicons that are visible in Firefox only. Click here for a more complicated tutorial on how to make favicons that can be seen in IE and other browsers.

You will have to dive into the HTML of your template for this one, making this an intermediate tip. DO NOT attempt to install your favicon without first downloading a copy of your current template. Be careful not to change anything within the HTML of your template, unless you are directed to do so.

Now...how to create a favicon!

1. Create an image that measures 16 x 16 pixels. This can be tricky. I suggest creating a very simple design on a transparent background.

2. Save it as a .png or .jpg.

3. Upload your image to Photobucket as a tiny image.

4. Open up a blank word or notepad document.

5. Copy and paste the following code into the blank document:

<link href="http://photobucket.com/yourfaviconimage.jpg" rel="shortcut icon"> <link href="http://photobucket.com/yourfaviconimage.jpg" rel="icon">


6. Replace the red portions with the direct link to your image. The direct link to your image can be found in photobucket, underneath the image.

7. Copy the modified code.

8. Click to ‘edit html’ on your layout page. Download a copy of your current template if you have not already done so.

9. Scroll down until you see</head>.


10. Paste the code that you modified in step 6 right above </head>. It should look like the code highlighted in blue above.

11. Preview and save if you like what you see.

Enjoy your new favicon!!!

For more help with favicons visit:
Blogger Buster
GoodNCrazy

8 comments:

Butterflygirlms Blog Designs (Heather) said...

This is exactly the way I use the Favicon! By the way, I LOVE your site. You have taught me alot of tricks & tips that got me started. I owe it all to you Jill, Special Thanks :)

Unknown Mami said...

I did this using the Blogger Buster instructions and I love it, but for the life of me I can't get it to display on IE. I don't like IE.

Jules said...

thanks for the tutorial. I will give it a try. :-)

Alexandria said...

You have such great tips! I've used a lot to makeover my blog!

Thank you!

I awarded you a blog award!
http://beforethebabywakes.blogspot.com/2009/09/bloggy-award.html

Jan said...

I followed your instructions, but something isn't working. I copied the code from "Favicons4Free", pasted it exactly as yours was pasted (although my code was about half the size of yours), but it said that the code was not well formed. I tried it with several of the favicons, but it would not accept it. I may try getting a favicon elsewhere and see if it works. I've gotten great info from you. Thanks for your patient teaching.
Jan
bobbypinsboardwalk@yahoo.com

Nativa said...

I am happy to report that I have been able to successfully put favicons on my three blogs. At one point I thought that they were not working but it is only last Saturday that I realized that they are. I eventually had to update my browser.
Take a look
http://passforphoto.blogspot.com
http://growthofblackhair.blogspot.com/
http://oleskoolmusic.blogspot.com/

My next project is to put a favicon on my cooking website.

All the best to you!

Braggin' Rights said...

Thanks for the wonderful tips! I didn't realize about the "sticky note" blog post, I really could use that in keeping my featured artisan at the top of the page for the week! Thanks so much!
Tracy
tcornell123@comcast.net

Sharon said...

Hi Jill!

I added the code but got an error message about code was not well formed. I needed to add an "/" to the end so that each of the two lines ended with ...icon" /> (no spaces - I had to add those because the comments won't accept it otherwise)

I am using FF - not sure if that will be a problem for others too...