A favicon (or “favorite icon”) was the 16 pixel square image that precedes the website title in browser window tabs (see illustration). Favicons are now used for tile and touch icons, iPhones and Android/Chrome apps, so they need to be larger (WordPress likes a 512 x 512 pixel image) so that they can be distributed correctly on different devices and apps. Thumbnail logos, of which browser tab favicons are the smallest, are not legible, so we recommend a simplified logo, or an initial or monogram in the brand color(s). This applies to avatars and social media profile images as well.
Here’s our logo glyph at 75 pixels. It looks appropriate in a tiny browser tab or as an app image. Favicons have become hilariously complicated over the years, but the WordPress soultion has made favicons easy to implement for millions of website admins.
We design custom holiday cards. From concept to printing, we‘ll take care of the whole thing for you! Humorous, classy, nostalgic or modern, your card will be original.
Why select a commercially-produced holiday card from a catalog?
Your company information gets stamped inside of an ornate, foil-stamped, “fancy” mass-produced card. Forgettable and unoriginal, but still expensive—why send boilerplate greeting cards to your clients?
We’ll create a unique holiday greeting like no other, branded for your business. Your card will stand out amongst the other cards on customers‘ mantles.
Old fashioned two and three color printing often overprinted spot colors (colors generated by a single press run) to create a third color. Both of these Hungarian matchbooks are two-color press runs of the same red and turquoise green. The print on the left makes use of a third, “black” color by running the red on top of the green (overprinting).
Four color process printing practically makes two or three color printing obsolete, and we know the reasons for this, but there’s a charm to two and three color printing. Skill and imagination were required to make use of overprints that created new colors without additional press runs.
See more old two-color printing and overprinted design on our Pinterest page.
Image files should not go straight from camera to website
Large image files take up space and increase load time. Fast-loading websites require small image file sizes.
There are free image optimizers online. We were able to reduce the image (above) to about half the size of the Facebook-optimized image. Try a few of these online tools and bookmark an optimizer that you like. Your goal is sharp-looking images and a small file size.
Best way to optimize:
Use Photoshop “save for web.” Also Gimp, Corel or any other image-editing program.
Website image best practices (it’s not all about size):
A few basic rules for website images:
- Optimize images—small images load faster
- Use jpgs for photos and pngs for flat images (logos, type, vectors)
- Name image files meaningfully: “farmers-market.jpg” not “P103753.jpg”
- Use “alt text” to describe image (e.g. “vegetables at farmers’ market”) for ADA compliance and search rankings
Raster (or bitmap) images are fixed-resolution images, made of a grid of pixels. If enlarged they will be blurry and pixelated, with a “stair-stepped” edge.
Common raster file formats are jpg, gif, tiff, bmp and png.
Vector images can be enlarged to any size with no loss of resolution.
Vector images are created by a series of points that are joined using a mathematical formula that determines the vector between points.
A purely vector file format would be svg (scalable vector graphic). Adobe Illustrator files are typically vector, but Illustrator supports placed raster images, just as Adobe Photoshop files now support vector layers. Pdf and eps files also support both vector and raster images, so asking for an Illustrator, pdf or eps file does not guarantee that you’ll end up with vectors. If you need vectors, ask for a vector file. It may be delivered as an eps, pdf, svg or ai file.
Your logo should be in a vector format so that it can be reproduced at any size. Ask your designer for a vector pdf with type converted to paths to guarantee excellent reproduction at any size.
If you’re still spending money in the various yellow pages publications in your region, consider this:
- Expense: How much could you do online with what you spend on yellow pages?
- Diminishing usage: Every year, a yet larger percentage of your potential customers find phone numbers online.
- Multiple phone books: Competing books each offer only their fraction of the diminishing market.
- Lack of flexibility: Yellow pages contracts are signed for an entire year, far in advance of publication.
Online advertising offers control and flexibility. With search engine advertising, you control the message and the reach. One company we work with loves Google Adwords—they turn up the amount they pay per click when they are slow, and lower it when they are busy. Bing is used for about a third of searches, so Bing Ads is also an economical way to advertise online.
How do we turn this complex logo into a social media avatar?
Profile images on Facebook are automatically cropped to 160 pixels square for the profile page and reduced to a 32 pixel thumbnail in comments. Most logos are not ideal in a square (and worse, a tiny thumbnail) but there are workarounds. For many logos, an initial from the logo, or a visual detail in the branded colors will work— remember, the name of your company is written in large letters on your Facebook/LinkedIn/Twitter page next to your profile picture, so your profile image does not have to be legible.
Here we use the monogram detail from the logo, which retains legibility even in the 32 pixel thumbnail.
Here is another example, using a letter in the branded typeface and colors—simple and legible.
The same principles apply to formatting a branded favicon (a yet smaller representation of your brand).
In any case, look sharp—even when you are tiny.
With the loss of so many letterpress job printing shops in the 1970s and the explosion of inexpensive four-color offset printing in the late ’90s—presses are now set up to run full-color (four-color or process color) on all jobs. It’s considerably more expensive now to print two spot colors than to print in full color.
Some designers have reacted by creating four-color designs that mimic the appearance of two or three-color jobs. We came across an example in a vector tutorial by Rype (Ryan Putnam) on his Vectips site. He has given the piece an off-register look, as if the colors had not been perfectly aligned by the pressman. Color registration was a common problem in the past with web and large sheet-fed presses in which several jobs were run simultaneously (newspapers, the yellow pages, matchbooks, etc). Who could have imagined that someday we’d be nostalgic for low-quality printing—but it was appealing in many ways.
Guidelines for email signatures:
- Text only is dependably consistent
- Avoid attached images (logos, social media links, photographs, etc)
- Avoid HTML formatting—some recipients will see text-only
- Wise sayings and witty aphorisms may not be appreciated
The illustration shows how confusing images (logos, social media links, etc) can be. The sender believes that the message has no attachments, but the receiver sees five attachments. If there were a file attached, how would the recipient know which of the (now six) attachments is it? In addition, attachments in emails may be viewed with suspicion by spam filters and security software.
One thing that this sender did correctly was to make the contact portions of the signature live text—it can be copied and pasted. He also used a web-safe typeface (Georgia). There is simply no guarantee that the recipient will see your message in the typeface you specified, but the chances are increased with web-safe fonts.