Adding a Favicon


One of the little touches that will finish off your Web site is if you add a favicon , that little icon that appears in the address bar of a browser when your site loads ( Figure 8.28 ). A favicon is another way to underscore your site's brand identification, and often represents the logo of the organization that runs the site. Favicons are only 16 by 16 pixels large, and virtually all modern Web browsers support them.

Figure 8.28. Here are the favicons for four different sites, as seen in Mozilla Firefox.


Before you can add a favicon to the index page of your site, you'll need to create one. There are dedicated favicon editing programs available for purchase, but we prefer to use one of the free online tools that converts a JPEG or GIF file into a favicon for you, such as the ones at www.chami.com/ html-kit /services/favicon/, or http://tools.dynamicdrive.com/favicon/.

Once you have your favicon file, which must be named favicon.ico , you'll add it to your site's pages in Dreamweaver. You'll do that with the <link> tag, which, while more often used for linking CSS style sheets, works fine for this purpose, too.

To add a favicon to your page:

1.
Obtain your favicon.ico file, and move it into your local site folder.

Because it's an image, it makes sense to us to put the favicon file into the images folder, but you can put it anywhere you want in the local site folder.

2.
Open the page to which you want to add the link to the favicon.

3.
Choose Insert > HTML > Head Tags > Link.

The Link dialog appears ( Figure 8.29 ).

Figure 8.29. The Link dialog allows you to add the path to the favicon file and its alternate text.


4.
In the Href text box, enter the path to the favicon.ico file.

or

Click the Browse button to open the Select File dialog. Navigate to the favicon.ico file and click OK (Choose).

5.
In the Rel text box, type "shortcut icon" (don't include the quotes).

6.
Click OK, then save the page by choosing File > Save.

After you next synchronize your local site to the remote site, the favicon will show up when you load the page in a Web browser.

Tip

  • You must repeat the process of adding the link to the favicon on every page in your site. If your site uses templates, adding the link to a template file will automatically add it to all the pages based on that template. For more about using templates, see Chapter 13.





Macromedia Dreamweaver 8 for Windows & Macintosh Visual QuickStart Guide
Macromedia Dreamweaver 8 for Windows & Macintosh
ISBN: 0321350278
EAN: 2147483647
Year: 2005
Pages: 239

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net