How to Create and Display Favicon to Make Your Site Stand Out in The Pile of Bookmarks

Favicons are a great way to make your site stand out from the crowd. It is also very easy to implement too. In this post I have explained how you can easily make a favicon and use it on your site.

What is Favicon?

Favicon is short for favorites icon. This is the icon that shows up on the left side of the browser’s address bar. Favicon is also known as bookmark icon, website icon, url icon or shortcut icon. Size of a favicon is 16×16 pixels.


How to Make a Favicon Easily in Photoshop

  1. In Photoshop open a new file (make sure the image size is 16 x 16 Pixels).
  2. Design your favicon. You can either start from scratch, use a picture, or a section of a picture.
    Note: The image size is rather small so I advise not to use a picture with a lot of graphic content.
  3. Save the favicon you created as ‘favicon.ico’ (you can save the image as .png or .jpg and then rename it to .ico)

You can even use MS Paint to make favicons too… all you have to make sure is that the image size is 16×16 pixels and the filename is ‘favicon.ico’.

How to Use Favicon on Your Site?

Adding a favicon to your site is really easy:


Upload the ‘favicon.ico’ file to the root of your webpage (‘public_html’ directory), eg. and you are done.


In this method you will use a rel=”shortcut icon” tag to add the favicon to your site.

1. Upload the ‘favicon.ico’ file to the desired location on your web host.

2. In the <head> of your html add the following line of code:

[lang=’html’] [/lang]

For a wordpress blog just open the ‘Header.php’ file and add the following given you uploaded the ‘favicon.ico’ file to that location.


Comments (7 responses)

  1. Noa Noa says:

    You don’t need Photoshop to create the ico file. Instead just go here – its free

  2. I must admit that I am really not of an expert in photo shopping and I have had my own issues (not medical or anything like that) trying to learn it. But it seems that tips and tricks showed me exactly the way in order to get a favicon using the Adobe Photoshop. However I did have some issues at first but after some effort I got it right and now my website looks absolutely stunning and remarkable!

  3. Bluffy says:

    Very well explained post thanks.
    very much needed by a newbie like me

  4. lol money says:

    Very informative post! Normally I don’t comment on blogs but this post deserves it 😀

  5. Jason says:

    In searching for sites related to work from home and specifically online jobs, your site came up. 🙂

Speak Your Mind