How to create a favicon
A favourite icon, called favicon, is the small icon that is displayed in the browser address bar, and it will also show in your bookmarks. It is a lot easier for the user to find the bookmark of your site, if you have created a favicon, and attached it to your website. If you look in your browser bar right now, you can see a pink little graphic square, this is the favicon of this site, making it easy to remember that you may have visited this site earlier. In short: using a favicon will improve the overall look of your website. So, how do we create a favicon? The favicon of this site is made in Adobe Photoshop.
Favicon information
Favicons have the extension .ico, and they must be named favicon.ico. The dimension of the icons must be 16×16.
Photoshop
To make .ico files in Photoshop, you need to download a plugin. This can be found here, it’s a Windows Icon Photoshop plugin. When you have done this, then you can start by creating a new file, but remember that it needs to be downsized to 16×16, so you can create a new file with the dimensions 128×128, 64×64 and so on (you get the idea?). Then, design your new amazing looking favicon, and last but not least, go to Image Size and click on Resample Image. This option is better than just selecting Image Resize, because it will make sure that the image does not blur when you scale it down.
Upload the icon
The only thing you need to remember here, is to upload it to your sites root directory.
Edit your header
You also need to edit the header section of the files in your website. It should look like this:
<head> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> </head> |
That’s it! Now you can test in your favourite browser, it looks better now, right?
Continue reading...
