How to add favicon to your site

What is favicon?

Favicon i.e. favorite icon or shortcut icon is an image with .ico extension used to display a more customized appearance to any website or the page in the browser’s address bar and next to the page’s name in a list of bookmarks. The favicon file is 16×16 pixels in size and contains text or image. As the icon size is so small, there is not much room for creativity but you can use static or animated even transparent png or gif favicons where generally website’s logo, main name or any graphic is used to stand out of the crowd.

How to make favicon image?

  1. Make your own favicon using Photoshop:

    You can make and generate your own favicon by creating 16×16 pixel image and converting it to ico format in Photoshop. You need to download a plug-in for Photoshop where you get the option to straight save the image as .ico extension. Use this link to download and install the plug-in.

  2. (or)

  3. Use Online tools available:

    There are many sites or tools online available some of mentioned below which lets you convert the jpg, png or gif images or text to ico format creating a favicon.

How to apply favicon to your page?

  1. Rename the image generated as favicon.ico and Place it to the root of your website.
  2. Copy and paste this link to the <head> section of your page defining the location of your favicon (root in this case)

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

Note: You can also use PNG or GIF formats for your favicon and you can have a different location too but ICO is a standard format and root is the standard location accepted by all the browsers.

This entry was posted in Designers View. Bookmark the permalink.

Leave a reply