Quick Step: Add a Favicon

A favicon is the tiny square image that appears next to the address bar in your browser. Adding a favicon to your web site takes less than five minutes.  You can do it while you wait for your tea kettle to whistle and it really tightens up your image.  A favicon completes the branding of your web site, makes it easier for people to find you in their bookmarks/favorites, and shows the world that you pay attention to detail.

Favicons are only 16 x 16 pixels, so the images used for them are very simple (often logos).  To make your own favicon:

  1. Crop your logo (or another image evocative of your business)to a perfect square, using an image-editing tool like Photoshop.  OR, use a tool like favicon.cc to draw your image pixel by pixel.
  2. Reduce the image to 16 x 16 pixels to see how it will look.
  3. Save your image as a GIF or JPEG.
  4. Visit Dynamic Drive and upload your image.
  5. Click the “create icon” button.
  6. Download your favicon and save it somewhere you’ll be able to find it.  Do NOT change the name of this file.  It needs to be called “favicon.ico” in order for browsers to recognize it.
  7. Upload the favicon to the server where you host your web site.
  8. Paste the following line of code into the <head> section of the pages on your site: <link rel=”shortcut icon” type=”image/x-icon” href=”/favicon.ico”>

You may have to wait a few hours before the favicon starts showing up in browsers.  If you still don’t see it the next day, you may have made a small mistake somewhere along the way.  Check to make sure you haven’t changed the name of the file, and that your favicon is saved into the same folder as all of the pages on your web site.  If you’ve put it in a separate folder like “/images,” then the code in the <head> will need to say href=”images/favicon.ico” instead.

Thing-A-Day: No Frills Meat Indentity Branding

This weekend I re-organized my studio.  I never realized how much my half-finished projects were stressing me out until I finally tackled my bin of cut but un-sewn plush pieces.  I thought that perhaps I could turn them into kits, like the ones I have for making mini hams, but it wasn’t worth the time to make detailed instruction booklets. Could I somehow turn them into simple, no-frills kits?

Yup.

nofrillsbag

Inspired by the recession, the Helvetica movie, and the joy of removing physical and mental clutter, my thing-a-day was some quick and dirty identity packaging.  The design takes a (huge) page from the no frills supermarket packaging I used to see growing up.  Sure, the kerning could be better but what you you want?  It’s no frills.

nofrillssteak nofrillspork

nofrillsbacon nofrillsminis

The Six C’s of Branding for Creative Professionals

As a designer, I’ve a done a little branding for other companies, but it is WAY harder to brand yourself.  Though I know all of the steps, it can still feel paralyzing, so I’ve been forcing my husband to take me through them one at a time.  And just in case you don’t have your own branding-savvy spouse hanging over your shoulder, I’d like to help you through them, too.

First of all, let’s talk about branding for a second.  What is it?  A lot of people confuse branding with advertising, or think that branding is just for companies looking to cover up an unsavory reputation with slick graphics, but branding really boils down to one thing: customer/client experience.  Branding involves not only your letterhead and business cards, but your customer service, the quality of your work, your prices, etc.  When someone hires you or buys your work, is their experience fun, inexpensive and easy, or is it sophisticated, detailed and personal?  Your visual branding, (like your logo) exists to give people an idea of what kind of experience to expect from you, so that’s the part of branding I’ll focus on in this post, but it can be difficult to distill a set of abstract concepts and feelings into the color and shape of a few letters.  Luckily, you don’t have to pull it all out of the air or know a lot about design to brand yourself successfully.  Here are the steps to get started:

Step 1: Collect

To begin with, you have to describe the experience of hiring/buying from you.  What adjectives and phrases describe your art or design style? What’s it like to work with you as a professional?  I chose to include words that describe my current portfolio (very kid-oriented) as well as words I hope will describe my future portfolio (more sophisticated and diverse).  Here’s a partial list of what I came up with:  craft, sophisticated, irresistible, inventive, clever, whimsical, reproduction, intricate, clean, intelligent, joyful, original, non-traditional materials, requiring a second/closer look, professional.  There were more, but I’ll spare you.  The point is that this is the brainstorm step, so there’s no limit on the words and phrases you can come up with.

Step 2: Cull

Now that you have your giant list of words, it’s time to put them in order.  Which are the most important feelings to get across?  Is there a particular pairing of words or phrases (like “joyfully elegant”) that is unique to you and your work?  Put those first.  Next, cross out the words that describe every working artist on earth.  Things like “creative,” “original,” and “professional” are useless in visual branding because every creative professional in the world has these qualities.  People wouldn’t hire you if you didn’t.  When you’re done, circle the top 3-5 words or phrases left on your list.  Mine were: craft, sophisticated, irresistible and clever.  My husband also added “contemporary,” to define my style within a period of influence.  Lots of design these days has either a vintage or futuristic look and he thought it was important to distinguish myself from that.

Step 3: Compare

The good news about visual branding is that you don’t have to start from scratch.  You’ll get most of your clues from other companies who already did the work (and paid a pretty penny for it).  Take the first word from your list and come up with 3-5 companies or individuals that espouse it for you.  You can see some of the logo images I collected for various adjectives below.

 

Notice what some of these logos have in common.  Though they’re certainly not identical, the logos in the “clever” column all use thick, sans serif fonts, mostly capitals and primary colors.  Some of them also use circles or oval shapes.  The logos in the “irresistible” column, on the other hand, use mostly lowercase letters in addition to candy colors or shiny effects.  They use no frames at all.  The logos in the “sophisticated fun” column again use all caps and mostly sans serif fonts, but the letters are much thinner and there are two which use rectangular frames.

Not shown here are some of the craft logos I collected through Imgspark (you can’t copy them off the page, sadly), which is a fantastic tool for finding inspiring images and creating mood boards online.  Those logos made clever use of graphics to imply their particular craft.  A glass company used layers of transparent colors to imply a stack of colored glass bowls, a sewing studio wrote out their name in stitches, and a paper company used shadows to make part of their logo look like it was peeling off the screen.

Step 4: Combine

Now that you have some design elements to work with, it’s time to combine them in a way that makes sense.  I decided to go with a sans serif font in all capital letters, since that seemed to be the most common direction of the companies I looked at.  But I also wanted my logo to look irresistible and tactile, so I decided to put it in bright colors, and to add just the tiniest bit of shadow to make it look like it was cut out of paper, rather than typed on a computer.  To heighten the effect, I decided to use some peeling edges like I saw in the paper company logo.  See Friday’s post for my latest proof of concept for this.

Step 5: Create

This is the fun part.  Now you get to go to places like myfonts.com and try out your name in hundreds of different typefaces (search for fonts by tag, like “rounded” to narrow it down some).  You can also try out Color Scheme Designer 3 to put together color combinations.  If your logo calls for it, this is also the part where you’ll sketch out an icon (like Chronicle’s eyeglasses).  Once you’ve decided on the general elements, you can still play a lot with specifics (see my page on playing with type layering, for example) so don’t be afraid to try out all kinds of sizes, arrangements and effects.

Step 6: Come Back

When you’ve got something you like, put your design away for a few days.  See if you still like it when you come back to it.  This step is really excruciating for me because it means I can’t move forward with anything else (like my new web site), but it’s also crucial.  Your potential customers will see your logo with fresh eyes so you should, too.  As frustrating as it is to have the editing process drag on, I have never regretted sticking to this step.

To see a photo journal of this process from beginning to end, check out Jon Contino’s post about branding a new software company called Lussumo.  I hope this was helpful to those of you who find self-branding as difficult as I do.  If you have additional tips, please share them in the comments.

All logos in the image above are the property of the companies they represent.  They are reproduced here through fair use for the purpose of education only and should not be duplicated or used for any other purpose.