#59. Adding a Favorite Icon to a Page Favorite icons (or favicons) are the little custom icons that appear next to the address of a Web site or in the bookmarks or Favorites of your browser (Figure 59a). Although favorite icons are prevalent throughout the Web, they've been complicated to create and add to your Web pages. You had to track down specialized software to produce the uncommon image format (.ico) and then unearth the proper code required to integrate the icon into your page. GoLive CS2 simplifies this process with its introduction of Smart Favorite Icons. Figure 59a. Favorite icons are located next to a Web site's address in many modern browsers. They're often used to reinforce the branding of the site and help as a visual cue after you bookmark a page.
Adding a Favorite Icon Site-wide Although you can add a favorite icon to individual pages, you can just as easily add it to your entire site. Most modern browsers will look for a favorite icon file named "favicon.ico" in the root directory of a site. Knowing this, you can select your icon in the SmartObjects folder, choose Site > Smart Objects > Create Smart Favorite Icon, and save your exported file to the root of your site using the expected filename. |
Follow these steps to add a favorite icon to a page: 1. | Create your icon in Photoshop or Illustrator at 16 x 16 pixels. GoLive doesn't resize the image icon when it's created so it's best to work in the typical size of favorite icons in Photoshop. Opt for simple, clear shapes for your icon since their small nature make subtle details hard to distinguish. | 2. | When you've finished creating your icon, click the Extras tab of the Site window and save the file in the SmartObjects folder. | 3. | In GoLive, open the page you want to add the favicon to and drag the Smart Favorite icon from the Smart Objects set in the Tools/Objects palette to the page. GoLive recognizes that this belongs in the header of the page so it conveniently places the icon there for you. | 4. | With the Smart Favorite icon selected in the page header area, go to the Inspector palette. Drag the Fetch URL (aka the pick whip) and point it at your new icon in the SmartObjects folder in the Site window. | 5. | The Settings dialog opens (Figure 59b). Here you can save various versions of the icon at different bit depths. If you've designed your icon in Photoshop, you can choose to use individual layers or layer sets (now known as layer groups in Photoshop CS2). Click OK to continue. Figure 59b. The Smart Favorite Icon Settings dialog lets you choose to use a single image, layers, or layer sets (layer groups) from a Photoshop file as your icon.
| 6. | GoLive keeps the name of your icon file but appends the required .ico file extension. Choose a location to save the exported .ico file and then click Save. The icon is now represented in the Smart Favorite icon in the page header. | 7. | Now all you have to do is upload your Web page and favicon file to your server. You can also try to temporarily preview the page in a browser as you normally would: choose File > Preview In > your favorite browser. Firefox shows the favicon in action but other browsers may not display the icon until you've posted it to your site and browsed to it from there. |
|