|
Creating a favicon using Adobe Photoshop |
| Print |
|
E-mail
|
|
Written by Chette Soriano
|
|
Tuesday, 13 September 2005 |
|
A favicon, shortcut for Favorites Icon, adds a subtle touch of individuality to a website. It is a graphic which is typically displayed next to the website’s name in a browser’s bookmarks or address bar.
Most favicons have a dimension of 16 x 16 pixels, and use the .ico file format. Some newer browsers, however, already support .gif and .png.
- Download the ICO plugin for Adobe Photoshop at the Telegraphics website. To install, extract the file to your Photoshop's file format folder. This is typically located at C:\Program Files\Adobe\Adobe Photoshop CS2\Plug-Ins\File Formats
Take note that you can use other tools to create favicons. I also use Microangelo and IrfanView. I have a personal preference in the Photoshop-plugin technique because of its flexibility.
- Using your favorite graphics program (such as Adobe Photoshop or Macromedia Fireworks), create a new canvas. It is recommended that you use a canvas size with a multiple of 16, such as 64 x 64 pixels.
- Create your graphic. Keep it simple, and don't apply too much anti-aliasing.
(Continued)
- Resize your graphic to 16 x 16 pixels. If you are using Adobe Photoshop, navigate to Image > Image Size, and enter 16 pixels in Width and Height. Next, to minimize blurring, select Bicubic Sharper from the drop down. Click OK.
If the graphic looks blurry, experiment with the aliasing and the sharpening filters.
- It’s now time to convert your image to the .ico format. If you created your file in another graphics program, load it now in Photoshop. From the menu, go to File > Save As. The Save As dialog box will appear. Under Format, select ICO (Windows Icon) from the dropdown. In File name, enter favicon. Click Save.
- Upload the favicon.ico file in your web directory.
- In the web pages that you want your favicon to appear, include the following code between the <head> tags:
<link rel="shortcut icon" href="/main/images/favicon.ico" />
Make sure that you enter the correct path to your favicon in the code. For example, for this website, the following code was used:
<link rel="shortcut icon" href="/main/images/favicon.ico" />
Trackback(0)
 |
TrackBack URI for this entry
Subscribe to this comment's feed
