Dreamweaver - Favicon A Favicon is a multi-resolution image included on nearly all professionally-developed sites(within the address bar). The Favicon allows the Webmaster to further promote their site, and to create a more customized appearance within a visitor's browser. Often, the Favicon reflects the look and feel of the web site or the organization's logo. To begin, you'll need the following:
Fire up Photoshop! Download The Plugin Now quit Photoshop and restart the program (The Windows Icon (ICO) file format will not be available until you have downloaded and installed the plugin, and then Quit and Restarted Photoshop.) Let's Begin The Design |
||
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 (Version CS only for this step). This is the best setting for making sure that an image doesn't blur as it's 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 - try zooming in and using the Pencil Tool - a pixel at a time. |
64 x 64 pixels
|
|
|
||
Go to FILE...Save As and make sure sure you name the file favicon.ico. Under Format you must choose Windows Icon (ICO) from the pulldown menu. This format will only be available in Photoshop after you download and install the plugin. 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. Uploading The Favicon.ico File 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. Troubleshooting 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. Browser Issues: Microsoft IE 6 for Windows will not display the favicon until the URL has been added to the favorites (Bookmark in Mozilla Firefox), and Safari for the MAC will not display an updated favicon until the browser cache has been cleared. But choosing ‘empty cache’ from the menu won't help because Safari stores favicons in a separate cache. You must empty the icon cache yourself. Look for it in User...Library...Safari...Icons. |
||
Saving the Icon