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:
- 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).
- Resize the square image you want to use as favicon to 16x16px.
- Save the shortcut as .gif file as it is the most browser friendly format for favicons.
- 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.
- 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.
Thanks for article. I also have tutorial for creating/adding animated favicon. If you are interested – then welcome!
I was just thinking about that, hmm interesting hmm. Well thanks for the post really handy, to me anyway.