Few weeks ago, I created a favicon for my web-portfolio project. The result wasn't that good because I got crisp edges when I barely resized it in as tiny as 16 x 16 pixels size.
While I kept trying, one of my good friend Vaughan Risher suggested me to try IconBuilder. Big thanks to Vaughan, because this Photoshop filter plugin has produced some very high quality favicon files and it is really worth to try.
Read More
The result is pretty amazing. Here's how:
First of all, you have to download the IconBuilder Photoshop filter plugin for Windows. If you are a Mac user you can download IconBuilder for Macintosh.
To install IconBuilder for Windows, copy the entire contents of the IconBuilder 2.0 folder into the Photoshop plug-ins folder. By default, the path to the plug-ins folder is:
C:\Program Files\Adobe\Photoshop ##\Plug-Ins (where ## is the version number you are using.)
Launch your logo design file that you wish to appear on your website as favicon. If your logo PSD file is consist of multilayered graphic, you have to merge the layers before you go to the next step.
Inside the zipped file, you'll also find Windows.psd. Open the file in Photoshop and you will see some kind of grid framework to start with. There are boxes displayed in 4 rows which represent 4 different sizes of icons framework in 48px, 32px, 24px and 16px. Each row consist of 3 icon template boxes. Deactivate the visibility of Sample Icon layer.
Copy the merged logo to the Windows.psd file and resize it to fit the first 16 pixels box. In order to have perfect quality of placement, you can zoom-in your work canvas in 1200% magnification and use guides if necessary.
Duplicate the well set logo layer twice and put them on the two other boxes as careful as when you did it for first one. Merge those three identical layers whenever you're done.
Click to see bigger image
Go to the menu Filter > Iconfactory > Icon Builder to display the Icon Builder panel. You will see similar icon grid framework as seen in Windows.psd file at the left side of the panel. Click on the first icon template box. You will see the first box (with your tiny logo on it) in Window.psd is highlighted at the right side panel of Icon Builder. Hit Control (Command) key and Build button at the same time. Your logo will be displayed at the left panel soon after and do the same for the rest of icon template boxes.
Click to see bigger image
Click Save As button to produce favicon.ico file and upload it.
Put the following HTML code in between your ‹head› tags:
<!-- Favicon --><link href='http://yoursite.com/images/favicon.ico' rel='shortcut icon' type='image/x-icon'/>Reload your browser and see if you like your new favicon now ;)
See it in action!
Are you using Mac? No worries, you can read a tutorial: how to create a favicon with IconBuilder in Macintosh posted by Benedikte Vanderweeën.
Related Post:
Thank you! Very nice!
ReplyDeleteHow to create favicon using iconBuilder filter in photoshop tutorial tutorial is really a nice refernce to me. Thanks you for sharing this valubale tutorial. Keep blogging and thanks for sharing!!!!!
ReplyDeleteGreat tutorial, thanks!
ReplyDelete