Part 7
Photoshop cs5
WEB LAYOUT AND OPTIMIZATION
CREATING A FAVICON Part (B)
Otherwise, if the image looks too fuzzy or just not quite right, undo the resize (Ctrl+Z/Ô+Z), edit the image as needed, and try resizing again. You may need to simplify the graphic, apply a sharpening filter, increase the contrast, and/or add more saturation to get the file to look good at the smaller size. Be patient; you’ll get it.
STEP : 4
To save the 16×16 px graphic as a favicon, select File > Save As to open the Save As dialog box. Navigate to the location on your computer that you want to save the fi le into, name your graphic favicon, select ICO (Windows Icon) (*.ico) from the Format menu, and choose Save. INTERNET HINT: To convert any GIF, JPG, or PNG graphic into a favicon.ico file without the Photoshop ICO plug-in, use the free online Favicon Generator tool at http://www.graphicsguru.com/favicon.php.
STEP : 5
Next, you will add a reference to the favicon in each page on your site on which you’d like the icon to appear. Open your Web pages, one at a time, in your preferred Web editor and add the following line of code (which can be typed on the same line) to the <head>…</head> section of the page:
<link rel=”shortcut icon” type=”image/x-icon”
href=”/favicon.ico” />
Th is line of code ensures that the browser being used to view the site can locate and display the specifi ed favicon fi le. If desired, you may upload the favicon graphic to another location on your server. However, if you do that, be sure to also update the link accordingly. For example, you could place the favicon graphic inside a folder called images, as in:
<link rel=”shortcut icon” type=”image/x-icon”
href=”/images/favicon.ico” />
loading...
loading...

