January 19, 2010
A Favicon (short for Favorites Icon) is that cool little square image you see to the left of the URL on some websites. Favicons also appear in browser's bookmark listings and on browser's tabs. Favicons are a great way to give your website a bit of additional branding and customization. They're fun and easy to create and install!
Creating and installing a Favicon using Dreamweaver is a 2 step process. First we'll create the Favicon itself and then we will add a bit of code to our Dreamweaver webpage to display the Favicon in the right place. That's it!
A Favicon must be 16 pixels wide and 16 pixels tall. That's pretty tiny so keep your image as simple as possible. It's easiest to create your image at a larger size and then reduce the image down to 16 x 16 pixels using Adobe Photoshop.
Using Adobe Photoshop, start with a square canvas of any size and create your image. When you're finished, reduce the image size to 16 pixels by 16 pixels and save the image in one of the following formats: GIF, JPG or PNG.
Save our PNG format Favicon example image (at left) to your own computer and try it for yourself or create your own.
To be fully supported in all major web browsers, Favicons must be in the ICO (icon) file format. Unfortunately, Adobe Photoshop doesn't support this file format by default so we'll need to convert our image from GIF, JPG or PNG to ICO without using Photoshop.
Dynamic Drive has a great tool called the Favicon Generator that will do the converting for you and it's free! Use it to convert your image to the ICO format and then save the ICO Favicon to your computer.
You can name your Favicon ICO file whatever you want but for this example I'll call mine favicon.ico. If you decide to name yours something different, make sure that you refer to it correctly in your HTML code in the next step.
Upload your new Favicon ICO image to the images folder of your website and let's add a bit of code to your Dreamweaver page that will define the ICO image you made as your webpage Favicon.
In Dreamweaver, switch to Code View and scroll to the top of your document. In this step we will copy and paste HTML code into Dreamweaver to activate the new Favicon.
In Code View at the top of your page, locate the closing </head> tag which should appear just before the opening <body> tag. Place your cursor before the closing </head> tag and press return to create a new blank line.
Lastly, copy and paste the following line of code into Code View within Dreamweaver:
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
Remember, if you've named your Favicon something other than favicon.ico or saved it in a directory other than the images directory, you'll need to update your code accordingly.
That's all there is to it! Upload your files (make sure to upload both your HTML file and your new Favicon image) and have a look at your brand new Favicon in your favorite browser!