Friday, April 8, 2011
Make a Favicon
Have you ever wondered how you get the cute little icons next to a URL? They are called favicons and if you don't already have one, you can! This so easy. Use your graphic editing software to create an artboard in a perfect square. The finished size is only 16x16 pixels -that's TINY but you can create a larger file to begin with and shrink it down if you need to.
Create you art! You can do whatever, image, letter, shape, etc. Just remember to keep it simple. Fine details will get lost that small. Once you are happy with your design, save it as a .jpg, .png, or .gif and pop over to Favicon.cc This is such a quick and easy way to create a favicon. Love it!
You don't need to register or login unless you want to keep track of your icons on their site. Just click import image, find your icon and import. Since you designed it as a square you can just keep the dimensions and hit the upload button.
Once your file is uploaded, you will see a simplified pixel version of your icon and the finished product down below. You can edit the individual pixels here if you need to change things a little. Tweak it till you are happy then click the Download Favicon link. It will save it to your desktop as an .ico file which is the file type need for the browser to display your new icon.
Some blog platforms allow you just to upload the .ico image right to their template. If yours doesn't have a spot for it you'll need to find it a home. So upload this little image to anywhere that will let you link to it via URL such as Photobucket. I just use my webserver.
Once it's living at it's new home you can add it to the html portion of your code. In Blogger, look under the HTML portion of the design panel and look for this code (click to enlarge):
Add the green portion to the code and change it to reflect the URL of your image. Save and refresh and you should see the little icon next to your web address.
Check out some great examples of favicons from Smashing Magazine.