|
What is a FAVICON?
A Favicon is a small custom icon
that appears next to a website's URL in the address bar of a web
browser. And when we say little, we mean 16 pixels by 16 pixels. So
if you like a good design challenge try your hand at this one.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 pull down
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
the eProImage Webmaster
If eProImage hosts your website, you can simply attach your
favicon.ico file to an email for our webmaster. (
webmaster@eproimage.com )
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.
 |