 Creating Favicons and the ICO format
You
will need two things to complete this tutorial
-
 There is a nifty little plug in for Photoshop out there that is
available to allow you to create favicons for your websites. you can
download it from Telegraphics
and place the favicon file into your plug in folder. You do not need to put it in any other folder. You must close and reopen photoshop for it to be available to you.
- This file to complete this project
The basic sequence for creating a favicon is the following:
- Get a simple picture, not too complicated
- Crop what you want in your favicon to a square
- Resize the square to favicon size. Touch up if needed. (complex images
look like inkblots at this stage so keep it simple sally!)
- Save the file as an ico file using the pluggin you installed.
Try it on our image
 1.
Open your books.gif file.
2. Select your Rectangular marquee tool from your tool box. While holding
down your shift key, create a square selection around the books, leaving
very little white space. You can use your space bar periodically while
drawing with your selection tool and shift key, to reposition the
selection as you draw.
 2.
Click Image Crop. We crop this way, instead of setting the image size and
cropping with the crop tool, so we can control the re-sampling of the image
when we resize. Resizing is the next step!
 3.
Click Image=> Image size. Set the size to
- 16 pixels wide
- 16 pixels high.
- Check Constrain Proportions
- Check Resample Image Bicubic
Click ok.
4. You are ready to save your 16 X 16 pixel image as an ICO file.
Click File=> Save as.
- Select the location for saving your favicon in the save in dropdown
box.
- Set the name as favicon.ico,
- select file type as ICO from the drop down menu (if the plug in was
installed properly it will be in there.)
5. To use the favicon as your page URL icon in the address bar,
- you must add a line of code to the head of your document.
- Upload the favicon to the web along with your edited html document
Adding the favicon code to your html doc
Open your page in your editor of choice. Click to where you can view and
edit the source code directly. Find the area at the top where you have a tag
that opens the head of your document <head> and then find the end of the
head tag, </head>. Please the code below just before the </head> tag,
replacing the /favicon.ico for the actual URL or relative link to your
favicon on the web.
Uploading to your server
Upload your favicon using file manager or and FTP client to the
location you indicated in the URL you indicated in the above code.
|
