Recipe 5.2. Creating a Web-Friendly Logo

Problem

You need a graphical representation of your company or organization to display on your web site.

Solution

Whether you're converting an existing graphic for online use or starting from scratch, keep these guidelines in mind when creating a logo for your web site:

Make sure the logo matches your business.

Your web site logo should closely resemble the logo from your offline materials, such as your storefront sign, business cards, or letterhead (see Figure 5-3).

Figure 5-3. Keep offline and online logos consistent, like those found on the receipt and web site (inset) for this San Antonio clothing retailer

Keep it simple.

Straightforward web logos that combine small, plain glyphs or graphics with a stylized text treatment of the name of the site work best (see Figure 5-4).

Figure 5-4. Deceptively simple text treatment and color usage combine to make one of the best web site logos

Keep it small.

Both the dimensions and file size of your web logo are crucial. The logo has to load fast, but as the most important graphic on your site, it has to look good in a small space, too.

Use a domain suffix for distinctiveness.

Although it's not absolutely necessary, adding a graphical .com, .biz, or other domain identifier to your logo can be a key part of your online marketing and branding strategy. It also offers an outlet for design cleverness, such as those shown in Figure 5-5.

Figure 5-5. Putting the whimsy in dot-com

Discussion

Your logo builds your brand everywhere it appears, but online it has a more specific role. Visitors to your siteespecially first-timerswant visual confirmation that they've come to the right place. Putting a fast-loading logo graphic in the upper left corner of your home page helps in that respect. You can make some minor modifications to optimize an existing logo for the web, but don't start over with a new logo unless you plan to use it everywhere (offline and online). Avoid adding photographic elements, color gradients, and animation to your logo, since those effects will make optimization more complicated, or force you to save a larger file than should be necessary.

Creating a web-friendly version of your logo will put your image optimization skills to the test. First, try to fit your web site logo into a horizontal space no more than about 150 pixels wide and 75 pixels tall. Thensince you'll likely be outputting a GIF or PNGexperiment with different palette and lossy settings to get the best balance between fidelity to the original and file size.