Creating a Favicon for Your Website

/in

A favicon is a small icon associated with a website or a web page. Many favicons are simply the logo of the organization or business. In a browser, a favicon appears next to a website title when bookmarked. You will also see them in your browser tabs, and if you’re using Internet Explorer, the address bar. Firefox previously allowed them in the address bar, but removed this feature early last year to increase security and hide fraudulent SSL-esque favicons.

Why use a favicon?

Having a favicon is by no means essential to your website. However, a favicon becomes part of your site’s identity, gives your site a professional look, and can actually improve the overall quality of a website. Because we notice images before we read text, a favicon can also help your visitors find your website quicker in their bookmarks or from a group of open tabs.

One other reason to include a favicon is that most browsers look for one. If a favicon is not found, a 404 error is reported on every visit. This is a waste of resources on the server and bandwidth, which is especially important on a high traffic site.

Notice the tabs that do not have a favicon. They just get a blank square. Which do you think gives your site a better identity?

Creating a favicon

Size and Design Considerations

Favicons only measure 16×16 pixels. It can be difficult to design anything with much detail in this small space, so be sure to keep it simple and readable, and stick to a 256 color palette. If you’d rather work on a larger canvas, start with a 32×32 or 64×64 pixel image and either scale it down before you save your final or you can even save it in the larger size. Just keep in mind browsers will scale it down to 16×16.

If you already have a logo, try scaling it down to 16×16. If it holds up and still looks good, go ahead and use it. If not, try creating a modified version of your logo or a simple design that uses colors and elements from your website’s design.

An image of 16×16 pixels works for most cases, but there is a rare chance the icon could be translated to a desktop or application icon, which would mean your 16×16 icon would be stretched out to a much bigger image that would be of very poor quality. If this is something that concerns you, there is a way to create a multi-resolution favicon that supports larger versions of the icon. ICO files have the additional property that they can contain multiple versions of the same icon within one file but at different color depths and pixel resolutions. Now that is pretty cool.

Format

Save the image as an ICO file and name it “favicon.ico”. This is the standard name which can be recognized easily by other developers and browsers. The most important reason is browser compatibility with Internet Explorer. Firefox and other modern browsers will accept the file in other graphic formats, such as the PNG format; however, it’s best to do it this way to include everyone, even IE users.

When you save your image, you may notice the ICO extension is not available as a format choice. You may be tempted to just save it as JPG or other image, and then go back and change the extension to .ICO, which is not a good idea. That only masks the true format, and while it may work in some browsers, it won’t work in all. You will need to download the .ICO Format plugin for Photoshop from Telegraphics, which allows you to open and save .ICO files. Place the plugin into the Plug-ins File Formats directory inside the folder where Photoshop is installed. It is also a good idea to convert your image to indexed color before saving.

If you don’t have Photoshop, or don’t want to deal with extensions, you can visit a number of online icon editors which allow you to convert your image into an .ICO file. Here are a few:

Put your favicon to work

Once you’ve created your icon, add it to your website by placing it in the root folder. Verify it’s there by visiting http://mysite.com/favicon.ico in your browser. Change mysite.com to your site’s address. Sometimes it doesn’t show up immediately. If you don’t see it, try clearing your browser’s cache and restarting the browser. If that doesn’t work, try putting a ‘?’ at the end of the URL, which will trick a browser into thinking the page is new and not cached.

If you uploaded it to the root directory and named it favicon.ico most browsers will find it. If you placed it in another location, then include the following in the head section of your webpage, preferably next to your meta tags or other link tags:

<link rel=”shortcut icon” type=”image/x-icon” href=”/favicon.ico”>

Replace “/favicon.ico” in the above example with the actual location of your favicon.ico file, for example, “/images/favicon.ico” if you have placed it in your “/images/” directory.

For Inspiration

Check out these sites for some favicon examples:

This post was written by:

Fawn Kildoo

Associate

For more information on this post, or our Software and Web Development services, please email us at contact@zekiah.com.