The creation:

You have a snazzy logo and want the icon next to the URL bar to match it. How you ask? Sit back, read, enjoy the ride. Oh, and I’ll throw in a couple snapshots too.

In this example, I’ll be using a quickly created logo for demonstrative purposes.

Open the image in Photoshop and select the crop tool.

Then, type “16px” in both the height and width fields in the top part of the screen. This will allow whatever you select with the crop tool in the next step, to automatically be adjusted and resized to 16×16. The reason why it’s 16×16 is because that is the standard Favicon size most widely accepted by all browsers.

Select the following area, this EXACT area will be your favicon upon accepting the changes.
Note: Make sure that at the top of your screen you have the ‘delete’ radio button clicked, and that after selecting the area you click the ‘Approve’ check mark on the top right part of Photoshop.

Now, export it into a web readable format. This is the important part. All favicon’s use a bit depth of 32 colors. Aka, if your cropped image has 60 colors, it’ll actually REMOVE any of those extra colors creating an undesirable effect. Let’s use a promised result by first clicking “Save for Web and Devices” or ALT+CTR+SHIFT+S for short.

Now, use the following settings and save the file as “favicon.gif”. After you have it saved, rename it to “favicon.ico” and that’s it! You officially created your own favicon using Photoshop from a logo. Not so bad, is it? What do you do with it you ask? Click the “Show it off!” tab above to see and grab the snippets of code that make this shining piece of work display next to the site’s URL.

The snippet, the problem, and the solution

So, we’ve got the icon, but what do we do with it? We insert it into the header of our HTML page.

First, using your favorite FTP Client (we recommend FileZilla) to upload the favicon to the ROOT of your site. Generally, this is the same place as your index.html is stored.

After the icon has been uploaded, we can now tell the webpage that when loaded, to look for this icon and display it in the browser. To do this, we need a snippet of code.

1

<link rel="shortcut icon" href="/favicon.ico" />

What this does is allows the browser to say “Find this particular file starting at the root of the site, check its bit depth… and if all is well.. set this image to be the shortcut and default URL icon for the site”.

Add the snippet above inside the HEAD tag and your site will now use the Favorite Icon (Favicon).

I did all that, why is it not showing?

One answer. Cache.

Most browsers (like FireFox) stores a website’s data, icons, etc in a caching system. When revisiting that site during the current session state it will try to use as many previous resources as possible. This includes CSS, JavaScript.. and as you guessed it.. images. Since your Favicon is indeed an image and your site didn’t have an image about ten minutes ago, it used a blank clear one instead and stored it for later use.

In order to see the updated version go to “Tools -> Clear Private Data” and ONLY check the “Cache” and “Offline Website Data” checkboxes. Then clear it and close FireFox. If it asks you to restore your previous session, start a new one.

Viola!

Enjoy adding that final touch to your already amazing website.

→ Download Source / Examples ←

Source ZIP Includes:

• Nukleeur Logo
• Favicon
• HTML file with Favicon Snippet

What exactly is a Favicon and why don’t I have one already?

Favicon stands for “Favorites Icon”. It’s the little icon beside your site’s name in the favorites list, before the URL in the address bar, as a bookmarked website on the desktop, in the “Links” bar and on the windows taskbar.

If you don’t have one, this is because you have not specified in the HEAD element of your HTML pages to look for a favicon.

Still scratching at your head?

Here is Google’s favicon.