5 tips for a nice-looking favicon
May 23rd, 2007
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 450×400px trim 50px so it is 400×400px).
- Resize the square image you want to use as favicon to 16×16px.
- 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:
Tags: css, favicon, internet, web, web design, www
<link rel="shortcut icon" href="URL" />
Replace URL with the path where you stored your favicon.
