Saturday, October 28, 2006
How to: Create a Favicon for your Blog or Site
Sharp-eyed readers will notice that Digital Alchemy is now sporting a brand spanking new favicon. For those who don't know, a favicon is just a small 16x16 pixel image that is displayed next to the URL in the address bar.
If you use Blogger or some other service to host your blog or site, then you may have noticed that most of the pages hosted on that domain have the same favicon. By creating your own unique favicon, visitors can quickly identify which tab is your site instead of seeing, say, the generic "B" favicon that Blogger uses.
Step 1: Either find an image that you like or create one. If you use a stock image, then you'll want to either crop or cut out a 16x16 pixel piece of the image since shrinking a large image down that much won't give you a very good looking favicon. Microsoft Paint can easily do this.
If you want to create your own image, Paint.NET is a good program to use. Many sites use a couple of letters for their favicon so it doesn't have to be very fancy. As an alternative, ImageAuthor is an online Java image editor that combines steps 1 and 2, but it can be a little complicated.
Step 2: To create the favicon, upload your image to a service like favicon generator.
If you want step-by-step instructions, a video tutorial for is available for Favicon from Pics below or here:
Step 3: Upload your favicon to a hosting service like Google Pages or OurMedia. If you use Google Pages, don't name your favicon "favicon.ico" since that'll give you Google's favicon.
Step 4: Finally, place the following HTML code just before the closing </head> tag, replacing the URL with the one belonging to your favicon.
For reference, I found this rather technical article very useful. Strictly for those who want to take a more hands-on approach.
If you use Blogger or some other service to host your blog or site, then you may have noticed that most of the pages hosted on that domain have the same favicon. By creating your own unique favicon, visitors can quickly identify which tab is your site instead of seeing, say, the generic "B" favicon that Blogger uses.
Step 1: Either find an image that you like or create one. If you use a stock image, then you'll want to either crop or cut out a 16x16 pixel piece of the image since shrinking a large image down that much won't give you a very good looking favicon. Microsoft Paint can easily do this.
If you want to create your own image, Paint.NET is a good program to use. Many sites use a couple of letters for their favicon so it doesn't have to be very fancy. As an alternative, ImageAuthor is an online Java image editor that combines steps 1 and 2, but it can be a little complicated.
Step 2: To create the favicon, upload your image to a service like favicon generator.
If you want step-by-step instructions, a video tutorial for is available for Favicon from Pics below or here:
Step 3: Upload your favicon to a hosting service like Google Pages or OurMedia. If you use Google Pages, don't name your favicon "favicon.ico" since that'll give you Google's favicon.
Step 4: Finally, place the following HTML code just before the closing </head> tag, replacing the URL with the one belonging to your favicon.
<link rel="shortcut icon" href="http://example.com/favicon.ico" />You're done!
<link rel="icon" href="http://example.com/favicon.ico">
For reference, I found this rather technical article very useful. Strictly for those who want to take a more hands-on approach.
Technorati Tags:
Labels: Technology
