TutorialsRoom.com, Where knowledge lands

How to add a favicon to your site?

create_a_favicon (1K)
A favicon is short for favorite icon. Favicon is the small icon that you see when you visit many sites next to the address of the site, in the tab of the site if your browser supports tabs and in the bookmarks or favorites. It is nice, it gives your site a professional look, and it is easy to implement. Favicon could be an ICO, GIF or PNG file, sometimes people use GIF for the animated favicon but I prefer the ICO format because it is the format that most browsers support. I will show you how to implement a favicon in your site using only free programs.
create_favicons2
  1. Choose a simple image file because it will be a small 16X16 pixels and open it in any graphics program (You can use Microsoft paint that comes with your windows).
  2. Resize your image to 16X16 pixels.
  3. Select your entire image (Ctrl + A in paint).
  4. Copy your image (Ctrl + C in paint).
  5. Now, open any simple icons editor, I use a free program called IcoFX.
  6. Create a new icon file (Press Ctrl + N if you are using IcoFX) and choose 256 colors 16X16 pixels.
  7. Paste your image (Press Ctrl + V if you are using IcoFX) and Save the file as favicon.ico.
    create_favicons1
  8. Upload the favicon.ico file to your site in the root directory of your site for most compatibility (example youresite/favicon.ico).
  9. Add this to the head section of your html file:

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

  10. You can change the href if you have uploaded the favicon.ico file in any directory other than the root of your site and you can use a complete address like "http://www.yoursite.com/favicon.ico".

More Useful Tutorials

Gone In Sixty Seconds! (What To Avoid In Your Site)
How to make the visitors of your site leave in seconds and never come back! (What to avoid in your site).

Some Hints For Choosing A Domain Name
Choosing a domain name is not an easy task. You have to take much time thinking before actually buying a domain name. These hints will help you choose a good one.

Current Comments (0)


Leave Your Comment (English Only Please)


(Required)


(Optional, will not be shown in public)


(Including http:// - Optional)



Type the sum of 5 + 3 (Required)


Copyright © 2007-2008 Hazem Osman. All rights reserved. Terms & Conditions