Online conversion tools for creating favicons such as Flavicon are useful and very clever, however they can be a little laborious, especially when you can create one straight out of photoshop.
(I’m not going to go into animated favicons as personally I think they look pretty cheap and tacky.)
So you’ll need to install the Windows Icon (ICO) file format Photoshop Plugin which is available for mac and pc and you can download from Telegraphics, this will allow you to open and save files with the .ico extension.
If you already have a logo design, then create a new document 16px x 16px, place your logo onto the canvas and resize to fit, it’s tempting to make your canvas the dimensions of the logo but don’t do this as the browser your site is displayed in will stretch your icon and not please anyone, it has to be square. If your logo isn’t square then you will have to leave some whitespace to the sides or the top and bottom.
If you don’t have a logo designed or you are creating a specific favicon which is different to the sites logo then a 16px x 16px canvas isn’t going to be the easiest size to work with so create a document at 64px x 64px and create your favicon, once complete you can then go in the top menu, find IMAGE > IMAGE SIZE and scale your image down to 16px x 16px as the diagrams below indicate which were made for my portfolio site DesignFreedom
If you think your icon needs transparency simply unlock and hide your background layer, follow the next steps and it will save with transparency.
Once you have your 16px x 16px design go to save as command in the file menu and give the file the name ‘favicon’ and now that you’ve installed the .ico plugin the .ico (Windows Icon) option should now appear in your file formats list as shown below, select this and hit save.
Hey Presto, you have your favicon, to make it active on your site simply place in the same folder as homepage (index file) and let it hang loose, make sure you don’t place it in the folder containing all your other images.
This is all you will have to do for most modern browsers to display your favicon, however some browsers will need a helping hand so install this into the header tags in your html code <link rel=”Shortcut Icon” href=”/favicon.ico”> this will need to be done on all the pages you wish to display the favicon.
It’s worth mentioning that some older browsers won’t display favicons, so only users using more up to date browsers will see your beautifully crafted work, but it’s a simple and quick process so worth doing to enhance the appearance of your site for those users who do see them all the time.
