Improve your web life with favicons and snippets

Excerpted from “Adobe GoLive CS2 Tips and Tricks” by Adam Pratt and Lynn Grillo.

Adobe® GoLive® CS2 makes it even easier to create state-of-the-art web pages. Try these two handy features and you’ll see what we mean.

Creating favicons

Have you ever wondered how to create custom website icons?

Figures 1: You can create custom browser icons, or favicons, with GoLive CS2.

Due to recent developments in the Web browser market, more and more web designers want to create these custom favorites icons called favicons. GoLive CS2 makes it easy to create and manage these custom icons that are used in the address bar and bookmarks of most modern web browsers.

Figures 2: GoLive CS2 makes it easy to create and manage custom icons.

Start by creating a 16x16-pixel image in a graphics application such as Photoshop or Illustrator. When your mini-masterpiece is complete, add the image to the SmartObjects folder in the Extras tab of the Site window. Note that you can't just put a GIF or JPEG in your site and call it favicon.ico. It might work in some cases, but in many instances it fails. Believe us, we tried. Now select the source image and choose Site > Smart Objects > Create Smart Favorite Icon so GoLive can convert your source image into the .ico format.

The Settings dialog opens when you create the icon file, and you can control a few different options. The .ico file is an interesting format that supports multiple image sizes and multiple bit depths all in one file. Given these capabilities, you can choose the bit depths you want to create, and if your Photoshop source file has layers or layer sets, you can even create different sizes for your icon. If your source image only has one layer, just choose Use Single Image from the pull-down menu at the top of the dialog.

When you’re done adjusting the settings, save the file, making sure you call it favicon.ico, and save it into the root level of your website. Remember that your favicon.ico file is a Smart Object, which means that if you update the source file, GoLive will update the favicon.ico file for you.

After you upload the favicon.ico file to the root level of your web server, most browsers should pick up the icon automatically when you visit or bookmark the site. However, be aware that even the browsers that do support it handle it differently. For example, Microsoft Internet Explorer 6.x for Windows will not show the favicon in the address bar until that URL has been added to the favorites, and Apple Safari will not show an updated favicon until the browser cache has been cleared.

Using Snippets

Snippets are, very simply, pieces of a page that you can use over and over again. A few examples would be an address, a table of data, or a piece of JavaScript. If you find that you are using one element on lots of pages, turn it into a snippet for drag-and-drop ease of use.

Let’s create a snippet so you can get the hang of it:

1. Choose File > New, click Web, then choose Pages in the center pane and HTML in the right pane to start with a new, blank page.

2. Type your name and address onto the page.

3. Select everything you typed and drag it into the Application-wide folder in the Snippets area of the Library palette.

The folder will automatically pop open, and you’ll see a new file there called snippet.agls. The filename should be highlighted so that you can easily rename it. If it is not, press Return/Enter to highlight it. Call it address.agls (Figure 2).

Figure 3: When you create a new snippet, give it a descriptive name.

Now follow these steps to complete the process:

1. Choose File > New Page to get another new blank page.

2. Drag the snippet you named address.agls onto the new page.

Tada! You have successfully created and used a snippet. Remember, you can create a snippet out of anything on a page—including grids, tables, text, images, and more. If you have a styled table that includes an image and text, and it’s surrounded by additional text, you can grab the whole kaboodle and save it as one snippet.

To modify a snippet, double-click the file in the Library palette, make the changes, and then save the document. The changes will affect only the snippet you’ve edited, not the pages on which the snippet was already used.

Try the samples

There are some very handy samples included in the Snippets area of the Library palette. Go through and drag some of them onto a page to see what’s there. Note that some of the included snippets are for use in the body of a page, whereas others, such as the meta snippets, are for the head portion of the page. Likewise, some snippets are easily used in the Source Editor, and others are perfect for the Layout Editor. Play around, and you’ll see how flexible snippets can be.

Excerpted from “Adobe GoLive CS2 Tips and Tricks” by Adam Pratt and Lynn Grillo. © 2005 Adam Pratt and Lynn Grillo. Published by Adobe Press. Used with the permission of Pearson Education, Inc. and Peachpit Press. To buy this book, visit www.adobepress.com.

About the author