Apr 6 2015

How to add favicon in your html website?

favicon is the short form of favorite icon also known as a Web site icon ,shortcut icon, bookmark icon or tab icon .It is the little icon that will display by browsers next to a page’s title on a browser tab, or next to its URL in the address bar .
Webtakersit's favicon

Webtakersit’s favicon

Does Your Site Have a Favicon?

You can see that ,how much favicon is important for our websites ,its look like a face of our website.. It’s critical for site recognition in a browser full of tabs, simply your website will look incomplete without that. It is very easy to add favicon in the websites ,but some developers and designers and forget to add it.

Technical details

  • Image size
  • Image format
  • What To Show as a favicon

Image Size

The icon would be in 16 X 16 pixels and will be in ICO format.

Image format

As the name suggests, favicons must use the icon (.ico) file format. In the past, it was difficult to convert a png ,jpeg and gif image to .ico, but now we can find so many free online converters . All you need to do is to create a 16×16 image.

Once you have create your 16×16 image, go and convert it by using a free service by clicking this link http://image.online-convert.com/convert-to-ico to and convert your image.

What To Show

These are some ideas which you can used to display as a favicon:-

  • Use your logo (or part of it)
  • You can add icon which communicates about your site which your site actually represents.
  • If your logo doesn’t display well at such a small size, then use the first letter of your business name with some stylish fonts
  • Like mentioned belowfirst-letter

    Where to add icon

    Add this tag in your website pages:-
    Untitled-3

    Why we do two entries?

    • Shortcut-icon tag: To install its own icon to be shown in the browser’s address bar
    • Icon-tag: To use a different type of icons and which in turns create saved linked to your website

    We use type “image/x-icon” because it is a MIME –type of file, it actually means that the above mentioned image is in ico format.
    And use type=”image/gif” for gif format image.

    The browser will browse the icon according to the type which that particular browser support,Thus browser that recognize gif will choose gif type,other will choose ico type.

    The browser will browse the icon according to the type which that particular browser support,Thus browser that recognize gif will choose gif type,other will choose ico type.

    Possible problem that comes while uploading favicon:-

    • If the icon,didn’t come up or pop up, then, make sure that your server sends the icon to the browser and displays it, it is prompting to save the file and transmitting it as a file,it can be simply resolved by typing http://websitename/favicon.ico in your browser’s address bar.
    • Second thing is that your server didn’t support. ico format.So you can also resolve this problem by writing :-AddType image/x-icon.ico in your .htaccess file or you can add two types in your tag as mentioned above.

    Let’s revise the same ,3 easy way to add a favicon in your site

    • Create a 16×16 image.Used png or gif format of image or directly used ico format
    • Convert your image to .ico format using a free service http://image.online-convert.com/convert-to-ico to
    • Upload you new icon to http://websitename/favicon.ico .
    • and use the above mentioned code in your html page

      Conclusion

      Adding a favicon is so easy. Favicons are important for site branding and recognition, and should always be added to your sites.
      I hope this article has removed the secret behind those little icons which display in the browser’s address bar and I am sure that this will help you to add favicon in your site

      (579)

      It's only fair to share...Share on Facebook
This entry was posted in HTML/CSS, Informational, learn website design, Web Technology, Website Design & Development and tagged , , , , . Bookmark the permalink.
Total Views:

(579)

Leave a Reply

Your email address will not be published. Required fields are marked *