5 tips for a nice-looking favicon

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.

Tagged on: , , , , ,

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

Leave a Reply

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