How to Make Favicon.ico Tutorial

Perhaps you've noticed that sometimes websites have icons instead of the default icon? This is an example of a default icon.

Here is the same page, but with a custom favicon.ico file.

This is what the favicon file looks like in the favorites list.

How Do You Make Favicon.ico Files?

Create a file that is 16 x 16 pixels with 16 colors. Then use a program like http://irfanview.com, or http://gimp.org to save it as an ico ( icon ) file with the name "favicon.ico". You can also visit Favicon UK. They have a free online icon maker that sends your favicon.ico file to you via email.

Note, you can't simply save a graphic file with .ico extension and hope it works. It must be a favicon.ico format.

How Do You Install Favicons?

Name the file favicon.ico ( must be a real icon file ), and upload it into your web directory in the root of your html files. For example you would put it here: http://www.domain.com/favicon.ico

If anyone bookmarks your web page now it will list that favicon will show up in their favorites and when they return to your website.

If you want them to have the same favicon on every page you'll have to add some html code into your headers

What about Apache MIME types and Favicons?

By default your httpd.conf file should be set with "AddType image/x-icon .ico", but if it isn't, you need to get your server admin to add that line.

Hire Digital Crunch to Make a favicon.ico for You

We'll make you a favicon for only $1. Click the live help button and have a simple picture ready that you want resized and converted to a favicon.ico file. We can also help you install a favicon and get the code on your site to work (again $1 covers all of this).

Where can I Get Free Favicons?

Here are some freeware icons that you can use that I actually found elsewhere:

Download the Favicon zip package.

free favicons

Download the Flag Icons zip package.

free favicons

If you book mark this page, there will be a "DC" in your favorites. You won't be able to see it until you restart your browser though if you are using Internet Explorer. Mozilla and Opera display the icon upon loading the page..

How Do Favicons Increase Traffic?

Anything you can do to stand out will increase traffic. A favicon is one of hundreds of ways. We like favicons because they aren't intrusive, don't take any extended download times, work just about everywhere, have a good "cool" factor and only take about 15 minutes to setup.

There are several favicon search engines too:

http://www.peerbot.com/ - doesn't work in Opera
iconsurf - I'm listed at: http://iconsurf.com/goto/digitalcrunch.com/
Icon Battle - add your site and vote on different favicon.ico files for usability, a cool site.

HTML Code for Favorites Icons:

You can also force a favicon on another location ( like via https ) by using the following code in your header:

Modern browsers that support PNG and GIF format can also use the following html code (and unless you specify a file other than a favicon.ico, this will also work in other browsers:

Mozilla for example, can do this:

But then Internet explorer will not show your icon. Note that Internet explorer doesn't follow the W3C HTML recommendation, but Mozilla does. So it might be better for compatibility to use the one that both Internet Explorer and Mozilla can understand.

Stop 404 Errors

You will keep on getting 404 errors everytime someone book marks your page in Internet Explorer if you do not have a favicon.ico file.

In other browsers, like opera or firefox, you will get a 404 error every single time they view your page.

So to stop these, put up a favicon file and they'll go away!

Using mod_rewrite and Serving a default Favicon

If you are a server admin and your clients are filling up your logs with 404 errors, you can use a mod_rewrite rule to stop favicon 404 errors in your httpd.conf:

  
  ServerAdmin me@mydomain.com
  DocumentRoot /var/web/myhost
  ServerName www.mydomain.com
  ...
  RewriteEngine On
  RewriteCond  %{DOCUMENT_ROOT}/%{REQUEST_FILENAME} !-f
  RewriteRule  .*favicon\.ico$         /var/web/favicon.ico [L]
  ...

Just put a default favicon.ico file in the /var/web/ folder and if your clients don't have one, it will use yours by default.

Blocking Favicon Requests for Busy Sites

If you have a busy site and are getting hammered for favicon.ico requests you can filter them and reduce the server load by editing your httpd.conf:

# Immeditaely cease looking for a favicon.ico
Redirect 404 /favicon.ico
# use smaller 404 message instead of custom page

    ErrorDocument 404 "No favicon"