Tutorial to create a favorite icon for your website?

How to create a favorite icon for your website?

Source: webmasterpals.com (with images)

It is very easy to create a favorite icon (favicon.ico) for your website. All you need is Photoshop and a free to download graphical viewer tool called IrfanView.

1. Create a document in photoshop with 32x32 pixels. Although the true size of favorite icon is 16x16 px, you will need to create 32x32 only then you will be able to magnify and create some graphics in photoshop.

2. Zoom the document for about 200% and next create a layer and name it as background. Fill some color say orange. 3. Create the Text on the next new layer

3. Once the graphics is complete, go to file > save optimized as then save the image as GIF or JPEG.

4. Once this done open the file with IrfanView image viewer. Select save as and click on Windows Icon (ICO)

4. Rename the icon to favicon and by default the extension is .ICO

5. Thats it. Upload this file to the public_html folder of your website. It should be favicon.ico

Before you see it work on firefox, delete all your cached pages and cookies from your firefox browser and then reload the page. You will be able to see the new favorite icon for your website.

Let me know if my little tip is helpful.

 

perhaps I missed something....but I didn't see where it tells you that you should add this code to your web page.

<link rel="shortcut icon" href="/favicon.ico" />

 

Yes it needs to be in your favicon needs to be in your public directory.

 

the easiest way with apache is
1. httpd.conf
OR
2. your .htaccess

enter:

AddType image/x-icon .ico

then in your domain /ROOT directory you have your

favicon.ico - file
AND
chmod +rx favicon.ico
!!!

then you will have in all files your favicon displayed.

if for whatever reason you wish to insert the line

<link rel="shortcut icon" href="favicon.ico" type="image/x-ico">

into every file,
then keep in mind that an absolute path like

<link rel="shortcut icon" href="/favicon.ico" type="image/x-ico">

works on server ONLY

if you use relative paths in each folder/sub-folder
then you have to assure to adapt in each folder the relative path

advantage of relative path in EACH file is that your favicon ALSO is displayed when ppl use an offline version of your pages!

 

i think if you have cpanel you need not worry about anything else. Just upload the favicon.ico in your public_html.

 

Thanks Hans!

 

favicons can also be animated gif's too....just pointing that one out