In this Adobe® Photoshop tutorial, you will be learning about the various techniques involved in the creation of Favicon. Favicon is a little custom icon that appears next to a website's URL in the address bar of a web browser around 16X16 pixels. So if you like a good design challenge try your hand at this one. This tutorial can also be implemented in CS2 and CS3.
All you need to add a Favicon to your site is a Windows Icon (.ico) file called favicon.ico that you upload to the main directory of your website.
You'll need the Windows Icon (ICO) file format Photoshop Plug-in to export to the .ico file format. You can download the plug-in from Telegraphic. The plug-in reads and writes ICO files in 1, 4 and 8-bit Indexed and 24-bit RGB modes, and also reads and writes 32-bit "XP" icons (with 8-bit alpha channel). Make sure to install the plug-in before you begin this tutorial.
Because 16 x 16 is such a small canvas area, it can be very difficult to be creative. So instead start your project with a canvas set at 64 x 64 (always use even multiples when you plan on resizing files). Do this by selecting File --> New, and opening a new canvas that is 64 x 64 pixels in size.
If you already have a logo you should reduce it to the 16 x 16 size to see if it holds up. If it doesn't look good at this size, work with the 64 x 64 canvas and try creating a simple design that incorporates colors from your website's palette. When you're ready to test the design select Image --> Image Size menu and enter 16 x 16. Click on Resample Image and choose "Bicubic Sharper" from the drop-down menu (CS only for this step). This is the best setting for making sure that an image doesn't blur as its being resized.
If you feel the icon is not quite what you wanted, just keep tweaking it until it is perfect. At this tiny size it can take a few tries before you get it right.
Go to File-->Save As and make sure you name the file favicon.ico. Under Format you must choose Windows Icon (ICO) from the pull down menu. This format will only be available in Photoshop after you download and install the plug-in. In the next step you'll need to upload this new file to the root folder of your website, so it's a good idea to navigate and save it to that location on your hard drive now.
Connect to your server and upload your Favicon.ico file to your website. You must place it into the same directory as your home (index) page, and leave it loose, making sure not to put it in an images directory or other folder. Some browsers will look for a direct link in the HTML source code to your site's favicon.ico file. You can help these browsers by adding this link in the head section of each page on which you want the Favicon.ico to appear.
Here is the link code to include: <link rel="Shortcut Icon" href="/favicon.ico">
If your new Favicon does not show up right away, try refreshing the page — or put a '?' at the end of the url, which will trick a browser into thinking the page is new and not cached.
Popularity: 12% [?]
Links you may find interesting -