A Favicon is a little custom icon that appears next to a web site’s URL in the address bar of a web browser. And when I say little, I mean 16 pixels by 16 pixels. So if you like good design challenges, try your hand at this one.
All you need to add to your site is a Windows Icon (.ico) file called favicon.ico that you upload to the main directory of your website.
Download the Plug-in.
If you are using Photoshop, you’ll need the Windows Icon (ICO) file format with Photoshop Plug-in. You can download the plug-in from Telegraphic. The plug-in reads and writes ICO files in 1, 4 and 8-bit indexing and 24-bit RGB modes, and also reads and writes 32-bit “XP” icons (with 8-bit alpha channel). Make sure to install the plug-in before you begin this tutorial.
Let’s Begin
Because 16 x 16 is such a small canvas area, it can be very difficult to be created. So instead of that, let’s start your project with a canvas and set at 64 x 64 (always use even multiples when you plan on resizing files). Do this by selecting File>New, and open a new canvas that is 64 x 64 pixels in size.
The Design
If you already have a logo then you should reduce it to the 16 x 16 size to see if it is enough to hold up. If it doesn’t look good at this size, work with the 64 x 64 canvas and try creating a simple design that incorporates colors from your web site’s palette.
When you’re ready to test the design, select Image>Image Size menu and enter 16 x 16. Click on resample Image and choose “Bicubic Sharper” from the drop-down menu (CS only for this step). This is the best setting to make sure that an image doesn’t blur as it’s being resized.
If you feel the icon is not quite suitable with what you want, just keep tweaking it until it is perfect. At this tiny size it can take a few tries before you get it right.
Saving The Custom Icon
Go to File>Save As and make sure you name the file with ico extension. Under Format, you must choose Windows Icon (ICO) from the pull down menu. This format will only be available in Photoshop after you download and install the plug-in. In the next step, you’ll need to upload this new file to the /root/images/ folder of your website, so it’s a good idea to navigate and save it to that location on your hard drive now.
Next Step - Put the Code
Open header.php at your word press template and put a tag
<link rel=”shortcut icon” href=”http://www.agushalim.com/images/favicon.ico” /> as follows in the <head>…</head> section
The Code
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
...
...
<link rel="shortcut icon" href="http://www.agushalim.com/images/favicon.ico" />
...
...
</head>
Once you’ve added this code, upload all of your modified pages.
Final Step - Testing
If your new Favicon does not show up right away, try refreshing the page — or put a ‘?’ at the end of the Url, which will trick a browser into thinking the page is new and not cached.
Troubleshooting
- Browser Issues: Microsoft IE 6 for Windows will not display the Favicon until the URL has been added to the favorites, and Safari for the MAC will not display an updated Favicon until the browser cache has been cleared. But choosing ‘empty cache’ from the menu won’t help because Safari stores Favicon in a separate cache. You must empty the icon cache yourself. Look for it in User>Library>Safari>Icons.
- File Format Not Available: The Windows Icon (ICO) file format will not be available until you have downloaded and installed the plug in, then quit and restart the Photoshop.
