Just to be clear, a favicon is that little icon that shows up in the browser address bar. If you are wondering how to create one look no further! I’ve got a couple of options available for you.
How it Works
You need to create a 16×16 pixel image in the .ico image format. Once you’ve created the image it needs to be titled “favicon.ico”. The image then needs to be placed at the root level of your website, and in order for it to work, you need to add a line of code inside the tag on the pages in which you wish the favicon to appear.
Creating a .ico Image
Depending upon your software and its version, the ico export option may already be built-in. If its not, you can download a plugin (software specific) or you can take a look at some free web-based services that will automatically create an .ico for you based upon an image you upload to their site.
Create a .ico Image Using Free Web-Based Services
Dynamic Drive
http://tools.dynamicdrive.com/favicon/ has a great service. Simply choose the file on your computer, click create icon, and then download the final product.
Favicon.cc
Favicon http://www.favicon.cc/ allows you to create your favicon from scratch on their site, or you can import your own image. A nice feature of this site/service is that it allows you to make color corrections prior to exporting–multiple colors may look great at 100×100 pixels but at 16×16 (the size of a favicon) it may not look so hot.
*Favicon from Pics
http://www.html-kit.com/favicon/ This service offers more than just your standard favicon. Once you convert your image you are presented with option of customizing colors, creating an animated favicon, as well as an option to create the iPhone/iPod icons. Its all very easy to do, though you will need to add some extra lines of code to your pages if you plan on using a animated favicon or the icons for the iPhone/iPod.
Making it Work
Now that you have your favicon, you need to upload it to your web server (place it at the root level of your website). Once I uploaded my favicon to the web server, it showed up without the addition of any code to my pages. However, in the interest of consistency and insurance, its a good idea to include the line of code (see example below) in your pages if the appearance of a favicon is important to you.
Example
*if you’ve chosen to use an animated favicon or have created a favicon for the iPhone/iPod you will need to add some additional lines of code. http://www.html-kit.com/favicon/ Will generate the code for you once it creates your favicons.
TIP
- Before uploading your image to any of the services listed above do what you can using your own image editor to reduce the number of colors and busyness of your image. Remember the favicon is displayed at 16 x16 so its better to have 1 or 2 colors.
- Before uploading your image be sure to trip off any additional white space of the edges so that your image is shown as large as it can.
- If you want to use your favicon on the iPhone or iPod make sure the image you are uploading to the service is at least 60X60 pixels. Use http://www.html-kit.com/favicon/
- If possible, upload an image with a transparent background. Doing so will allow your image to show up on the grey browser tabs without a white box outlining it.
