< BACK TO ARTICLE INDEX
How to make a favicon
A favicon (pronounced fave-icon)
is the tiny image that appears to the left of the URL in your web
browser's address field and on your browser's favorites/shortcuts/bookmarks
menus. A favicon is also called a Windows icon and uses a .ico
file extension. There are two ways you can create a favicon: manually
with Photoshop, or using an online favicon generator.
Photoshop Method
This method is slightly more
time consuming then using a favicon generator, but it ensures that
you get a correct favicon just the way you want it at high quality.
Step 1: Create an icon image that
is 16 pixels square
Yes, that is not a lot of space!
This is probably the hardest part of the process. Getting your
logo or another image looking good in such a small space is a big
challenge. Your final image file must be 16 x 16 pixels, RGB, 8
bit color. There are a couple ways to get there.
The
first way is to start by creating a canvas in Photoshop with those
specs, as shown here in the File > New dialog. Once your have
your canvas, you can draw an image or add text using various tools
in Photoshop.
The second method is to start
with a larger image and reduce it to 16 x 16 pixels using the Photoshop
Image > Image Size dialog. If you are reducing an existing image
using Photoshop, you must also use the Image > Mode dialog to
set the mode to RGB color, 8 bit.
Whichever way you do it, in
order for it to look good you will need a very simple
symbol without much detail. As in this example of the Artisan Content
favicon at 1600%, you can enlarge the view (View > Zoom In)
so you can see what you're doing! But it's important to reduce
it back to 100% view size to get a feeling for how it looks at
actual size. You will probably need to tweak your design several
times, adjusting the colors, contrast, sharpness, etc. until you
get it looking good in such a tiny space.
Step 2: Save your file as .ico format
Photoshop does not come with
a standard way to save a favicon in the correct file format. To
do so, you will need to download and install an appropriate Photoshop
file format plug-in. A Google search will produce various options
for free favicon plug-ins. The one we use is available
free from Telegraphics (their requested $5 donation is recommended
by Artisan Content). Photoshop plug-ins are available from Telegrahics
for both Mac and Windows OS, and the plug-ins should also work
with other compatible programs such as Elements, AfterEffects,
Premiere, PhotoDeluxe, Corel PhotoPaint, Paint Shop Pro, Fireworks,
Painter, Photo Impact etc.
When
you download the plug-in you will also get instructions from Telegraphics
for how to install it, which is simply a matter of copying it to
the right location in your system. After you quit and restart Photoshop,
you will find the file format on the File > Save or File > Save
As menu.
Step 3: Place the favicon
file on your web server
Before you upload your file
to your web server it must named "favicon.ico." Then,
place it in your website's root directory, usually named "www," or
wherever your site's main index file is located. Do not put the
favicon.ico file in an images folder or in any other sub-folder.
If you work with a CMS and do not have direct access to your website's
directories, you will need to have your web developer, web administrator,
or IT person place the file on the web server for you.
That's it! You should now see
the icon in your web browser's address field and the bookmarks/favorites/shortcuts
lists.
Favicon generator method
This method is quicker and easier
than using Photoshop, but without the same power to manipulate
your final product. Generally, though, using a favicon generator
will give you a perfectly good favicon. Simply go to http://www.favicongenerator.com/ and
follow the simple instructions on the page to quickly create a
favicon.
ShareThis