5 tips for a nice-looking favicon


Favicon is the shortcut icon that is shown next to the url of a website or next to site’s name in browser tabs. You can see our favicon in the screenshot above. To create a great favicon you should consider these:

  1. Select the image you want to use for your favicon and trim part of it so you have a square part of the image (for example if your image is 450x400px trim 50px so it is 400x400px).
  2. Resize the square image you want to use as favicon to 16x16px.
  3. Save the shortcut as .gif file as it is the most browser friendly format for favicons.
  4. Name your shortcut favicon.gif and upload it to your root folder as some browser recognise the file named favicon as shortcut icon by default.
  5. For best results and for having a favicon compatible with all browsers that support shortcut icons place the following code anywhere between your <head> and </head> tags:

<link rel="shortcut icon" href="URL" />
Replace URL with the path where you stored your favicon.

2 thoughts on “5 tips for a nice-looking favicon

  1. I was just thinking about that, hmm interesting hmm. Well thanks for the post really handy, to me anyway.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.