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: