Chris Parker | Emmy Winning Media Designer

Your 1-Stop for All Things Multi-Media

"From Start to Finnish Your Next Multi-Media Project will Sizzle"

Favicon… What is a Favicon?

The Emmy Winning Blog was created to cover everything multi-media, from print to the latest smart phone app.  Well, today I want to talk about an often overlooked little guy in the world of multi-media called the “favicon”.

A favicon, short for “Favorite Icon” is a tiny graphic icon used to bookmark or label an associated website.  You know what I’m talking about.  It’s that little icon next to the website URL located in your browser’s address bar.

That’s right, there it is.

BBC Favicon

Anyway, a favicon is usually based on a company’s logo or is a symbol for that web site’s content.  For example, a pizza web site may have a pizza slice graphic for it’s favicon.  No anchovies, please!

Slice

Large corporations such as Apple and Nike have their own familiar logos.  The Apple bite and the Nike swish.  Very iconic.

Think Different

Just Do It!

Meanwhile, my website, emmywinnerchrisparker.com, has a miniature portion of the masthead for a favicon..

Screen Shot 2013-01-21 at 3.43.41 PM

Here are two more examples from my own work, a technology company’s logo and a law firm that uses the universal scales of justice.

NSI TotalCare

The Dumond Law Firm

A favicon is simple to make, just create your graphic and then save it as 16 x 16 pixel .ico file.  To download an “.ico” file generator or photoshop plug-in just do a quick Google search and click on one of the many links provided.  The Photoshop plugin I used is here.  See even that site has its own favicon.

Once you have your “.ico” file just upload it to the root directory of your website sever and then create a link element with a rel attribute in the <head> section of the document to specify the file format, file name and location.

Here’s the html code I use for my favicon:

<link rel="icon" 
      type="image/png" 
      href="http://example.com/myicon.png">

As long as my “Emmy_Favicon.ico” graphic is in the root directory, my website will reference it.

Anyway you can learn more about “.ico” files from Wikipedia.

So what does a favicon do?

Well, besides appearing in your browser’s address bar it is also visible as a bookmark giving the user a quick and easy visual reference cue, not to mention the benefits of product and company branding.

Oh, in addition a favicon can go way beyond just a simple web icon.

The favicon for J-pop singer ReniReni:

Reni Reni Pop Singer

Add a little animated magic and voila!

Never under estimate the power of the favicon, or the power of “Moe” energy.

As always “share” and “like” the favicon vibe!

Independent short films and the ever changing movie theater…coming soon to a blog near you.

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

One Comment

  • Posted June 5, 2012 at 3:56 pm | Permalink

    Chris:

    Thank you for educating me on the attributes of the favicon.

    Yes, we all need a good favicon.

    Who would have ever thought it possible?

    Jon

One Trackback

Leave a Comment