All you need to add a Favicon to your site is a Windows Icon (.ico) file
called favicon.ico that is placed in the main directory of your website.
First - Download The Plugin
You'll need the Windows Icon (ICO) file format Photoshop Plugin to
export to the .ico file format. You can download the plugin from
Telegraphics. The plugin reads and writes ICO files in 1, 4 and
8-bit Indexed and 24-bit RGB modes, and also reads and writes 32-bit "XP"
icons (with 8-bit alpha channel). Make sure to install the plugin 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 creative. So instead start your project with a
canvas set at 64 x 64 @144 ppi (always use even multiples when you plan on
resizing files). Do this by selecting File>New, and opening a new canvas
that is 64 x 64 @ 144 ppi in size.
The Design
If you already have a logo you should reduce it to the 16 x 16 size to
see if it holds 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 website'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 for making
sure that an image doesn't blur as it's being resized.
If you feel the icon is not quite what you wanted, 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 favicon.ico. Under
Format you must choose Windows Icon (ICO) from the pulldown menu. This
format will only be available in Photoshop after you download and install
the plugin. In the next step you'll need to upload this new file to the
root folder of your website, so it's a good idea to navigate and save it to
that location on your hard drive now.
Emailing your favicon.ico file to Bullock's
Webmaster
If Bullock Professional hosts your website, you can simply attach your
favicon.ico file to an email for our webmaster.
We will then place it in the directory in your home (index) page, and
leave it loose, making sure not to put it in an images directory or other
folder.
Some browsers will look for a direct link in the HTML source code to your
site's favicon.ico file. We can help these browsers by adding this link in
the head section of each page on which you want the Favicon.ico to appear.
Here is the link code to include: <link rel="Shortcut Icon" href="/favicon.ico">
If it was necessary to add this special code we will take care of this for
you.
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. You may need to wait 72 hours
for your ISP to update their cache for your web browser.
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 favicons 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 plugin, and
then Quit and Restarted Photoshop.
|
