Adding a Shortcut Icon/Favicon
A shortcut icon is the little image that appears next to a Web address in most browsers. You don’t have to add one, but it can be a nice touch:
If you create a basic image, some image-editing tools have the ability to save into the .ico format directly. Or you can just create an image and use this favicon tool: http://tools.dynamicdrive.com/favicon/.
For this example, I just went into Photoshop and made a simple square image. A favicon ends up being square, and you can upload a larger image to the tool above, but it’s probably helpful to create a relatively smaller image, so that you can get a sense of what it will look like at a small size. Ultimately, the image needs to be 16 × 16, so you’ll probably want to learn how to reduce the size of your image to either 16 × 16, or somewhere around there. I just made this image at 30 × 30 (see Figure 7.13).
Figure 7.13. A Photoshop window showing an image resized down to 30 × 30 pixels.
So you could use a tool like SnagIt to make such an image, hire a designer, or you could try the open source image-editing program GIMP. (Try looking for it on Google—it’s a free equivalent to Photoshop.)
When you have an image you want to convert, visit http://tools.dynamicdrive.com/favicon/. Click the Browse button, locate your image file (it should be in PNG, GIF, or JPG format), and then click the Create Icon button (see Figure 7.14).
Your image will be uploaded, and it will give you a preview. Then click the Download FavIcon button:
And click the Save button to save it somewhere on your computer. (Don’t change the filename.)
Next, go into Drupal, into the Theme settings area (or global settings) as described earlier in this chapter, look for the Shortcut Icon Settings section, and click to uncheck the “Use the default shortcut icon” option (see Figure 7.15).
Then click the Browse button and locate the file you just converted (for example, favicon.ico), as shown in Figure 7.16.
Then click Save configuration when done:
Click the “Home” link to “return home”:
And wait a moment or two. Eventually, the page should reload, and depending on what browser and browser version you are using, the favicon should load:
