A favicon is the little custom icon that appears in the browser tab just to the left of the page’s title. It is most often just the logo for a website shrunk down to 16 X 16 pixels. Below is an example of a site that has a favicon and one that does not.
When someone bookmarks your site, your favicon will appear with the page title in their list of bookmarks. This is an effective way to stand out and give your website a nice, professional image.
If your website doesn’t have a favicon yet, this simple guide will help you create one and explain how to display it when visitors come to your site. Even if you’re not real tech savvy, creating your own custom favicon is actually much easier than you might think.
Step 1: Create Your Image
If you already have a logo or an image that represents your site, simply open that file with an image editor like Adobe Photoshop or Fireworks. If you don’t already have such an editor on your computer, there are other options available, like pixlr.com, a great online alternative that is free to use.
If there is a lot of extra white space around your logo, be sure to crop it out. If your logo is a little more complex and does not display well as a 16 X 16 image, you may need to simplify it, or even use a different image altogether. However, if you go that route for your favicon, you should still try to incorporate the same primary colors of your website into the new image. While it is acceptable to use a different image, it is recommended that you use your logo if at all possible to help with the company’s branding efforts.
Once you reduce the image size to 16 X 16 pixels, save your file as a .jpg, .png, .gif, .bmp, or .tif.
Step 2: Convert Your Image
You now need to convert your image to a .ico file. There are several online tools that you can use to accomplish this. A good, free icon generator is available at prodraw.net. Simply upload your image, select the icon size, and voila. You can download your brand new .ico file.
Step 3: Upload Your Image
Now that you have your favicon.ico file, you can upload it to the root directory of your site. Do not place it in any folders. The image should be visible when you go to www.yourdomain/favicon.ico after uploading it (of course replacing “yourdomain” with your actual domain name). Do not place the favicon in an image folder such as: www.yourdomain/images/favicon.ico.
Step 4: Add Basic Code
Most modern browsers can detect that your favicon is present in your root directory and display it in the browser tab. While you don’t need to add any code to your pages, you will still want to add include simple code in the <head> section of your HTML to ensure that all browsers display your favicon properly. Below is the code you’ll need to add.
Keep in mind that there will be other elements in the <head> section of your webpage, such as the title tag and meta description, as well as references to any CSS files you have. The above code can be added anywhere between the beginning <head> and ending </head>.
Note: The "vnd.microsoft.icon" MIME type has replaced the older "image/x-icon" type as the official, standardized favicon MIME type for .ico files on the web.
Favicons For Apple Devices
You can also create favicons for Apple iOS devices. You’ll simply need to create 4 different sizes of your icon, and save them as .png files. The default size is 57 X 57 pixels. Apple also recommends that you use 90 degree corners instead of rounded corners when creating these images. After these image files have been created, you’ll just need to add this code within the <head> tag of your HTML.
If a static favicon isn’t quite cool enough for you, here is a great guide on creating animated favicons http://www.wikihow.com/Make-an-Animated-Favicons.
There are several other great online tools as well as different ways to create a custom favicon, and if you have a better method or favorite tool, please share your ideas in the comments below.