Photoshop cs5 tutorials for FAVICON Customiz Part 7(B)

Part 7

Photoshop cs5

WEB LAYOUT AND OPTIMIZATION

CREATING A FAVICON Part (B)

Figure 7-2

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” />

 

email
GD Star Rating
loading...
GD Star Rating
loading...
Photoshop cs5 tutorials for FAVICON Customiz Part 7(B), 7.0 out of 7 based on 2 ratings

Posts You May Also Like to Read:

About shakil .

Shakil . is a Founder and Web Designer, Ahoban Network of Ahoban Network (আহবান নেটওয়ার্ক). Google+ | Twitter | Facebook | LinkedIn | Pinterest | YouTube | Email me



             

Speak Your Mind

*

CommentLuv badge
This blog uses premium CommentLuv which allows you to put your keywords with your name if you have had 3 approved comments. Use your real name and then @ your keywords (maximum of 3)