|
Favicon.ico — How To Create A Favicon In Photoshop
A Favicon
is a little custom 16 pixels by
16 pixel icon that appears next to a website's URL in the address
bar of a web browser.
All you need to add a Favicon to your site
is a Windows Icon (.ico)
file called
favicon.ico that you upload to the
main directory of your website.
(you need the .ico
extension and the 16pixel x 16 pixel sizing
call it favicon)
Download
The Plug-in
(if
you need it)
You may need the Windows Icon (ICO) file
format Photoshop Plug-in to export to the .ico file format.
You can download the plug-in from
Telegraphics. or
.......
here another site for
the plug-in.
or
The plug-in 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 plug-in before you begin this tutorial.
Start Now
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.
(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
pixels in size.
Leave at screen res (72)
Creating and sizing the design The Design
If you already have a logo you should reduce
it to the 16 x 16 size to see how it holds up
after size reduction.
If it doesn't look good at this size, work with the 64 x 64 canvas and
try creating a more simple design that incorporates colors from your
website.
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.
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.
Uploading The Favicon.ico File
Upload your favicon.ico
file to your website.
You must place it
into the same directory as 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. You can help these browsers by adding this link in the
<head section> of
each page on which you want the
favicon.ico to
appear.
Usually it is important only in the index page
as a website brand.
Inserting the CODE
Open your index file in
code view and insert the code between the head
tags
<head>
put the code
somewhere between the head tags
</head>
Here is the link code to insert:
<link rel="Shortcut Icon" href="/favicon.ico">
Once you've added this code, save and upload
your modified pages.
Caution
The Windows Icon (ICO) file format will not be available until you have
downloaded and installed the plugin, and then Quit and Restarted
Photoshop.
You might have to refresh your page ( flush the cache) to see the
change.
Inspiration
If you need some inspiration have a look through this
nice collection of
favicons. You might find something that triggers an idea for your
own.
|
BRAND
your Web