Let's talk about your project

Send to Gecko Designs

Gecko Designs, LLC
523 N Higgins Ave
Missoula, MT 59802

Phone:
(541) 912-9300

Fax:
(636) 552-7504

Gecko Designs, LLC - 1905 Alvina Drive, Missoula, MT 59802 - Phone (541) 912-9300, Fax (636) 552-7504

Dreamweaver Tutorial: Add a Favicon using Dreamweaver

January 19, 2010

What is a Favicon?

Adobe Dreamweaver CS4 favicon

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!

How do I get a Favicon on my website using Dreamweaver?

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!

Need web design help?

This stuff can be tricky! If you're having trouble and would like some professional assistance give us a call at (541) 912-9300 or contact us.

Contact Us Today!

Step 1: Creating a Favicon

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.

Favicon sample 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.

Adobe Dreamweaver CS4 code view

Step 2: Installing the Favicon on your Dreamweaver site

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" />

Adobe Dreamweaver CS4 Favicon code

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!

Meet the Adobe Dreamweaver CS4 Instructor who wrote this article

Adobe CS4 Training Classes, Seminars and Workshops

Adobe Dreamweaver CS4 On-Site Training