What is a favicon? Your first thoughts might be, how do I even pronounce this mystery item? Is it Fav-Ih-Con, Fav-Eye-Con, Fave-I-Con, tomato, potato. The “correct” pronunciation is Fav-Eye-Con as a Favicon is exactly how it sounds; your “favorite icon” (at least for the person operating the website). Okay Matthew, that sounds all well and good, but what does that mean? If you look at the image below,  you will see precisely what I am referring to. Located in between the home icon (default icon for the Mozilla FireFox browser) and the URL string you will find a 16×16 pixel icon. The example used here was from the website you are currently viewing, Break the Network.

Example

What is the point?

Let me answer this question by asking you a question. Whenever you see a “swoosh” logo located on some part of a person’s attire, what brand almost immediately comes to mind? The answer should be Nike. The same can be said about the famous golden arches in the McDonald’s logo or even Apple’s…apple.

The term professionals in the fields of marketing and sales use is branding. Branding is a very important weapon in the arsenal of any company/organization’s marketing division. Branding, as defined by the American Marketing Association’s Dictionary, (www.marketingpower.com) is “a name, term, design, symbol, or any other feature that identifies one seller’s good or service as distinct from those of other sellers.” In basic terms, you can connect a company/organization’s logo, slogan, image, or product with the name of the company or organization. Companies may create television commercials to provide prospective consumers with a visual of their logo and perhaps state their slogan. Then the next time you are in need of services/products similar to the ones advertised in that television commercial that rudely interrupted your favorite television show, you recognize the name, the logo, the slogan, and feel as if you already have a connection to that company. That simple connection puts that company over the top of another company selling a similar, perhaps better product.

For example, let’s say you see a commercial advertising Tropicana Orange Juice. This commercial highlights the process of actually making the orange juice, where the oranges used in the orange juice come from, and features their logo and a picture of their orange juice container. Keep in mind, in no way am I advocating which orange juice to buy, this important choice is yours alone (I drink Tropicana). Let us also say for the sake of argument, you’ve never had orange juice before and the next trip to the store you have decided you’re going to try it for the first time. You roll your cart down the aisle and are greeted with different containers promising and providing an array of goods. You look across the containers and like a friend in a crowd of strangers, the Tropicana container sticks out. Do you pick it up and purchase it? Advertisers try and make that decision for you by leading you to the point of purchase with techniques such as branding.

I could go on for days speaking about branding, which some of you probably feel as if I have already. However, it is an important principle that will help you understand the value a favicon potentially has for a website and its website owners (be it a company, organization, or individual). While it may or may not be the first thing you see on the website, it depends where your eyes are focused, a favicon provides you with one more place to feature your logo or something that can identify your website as well as your company/organization. Given that the location of the favicon is directly next to where you will eventually type in the URL of the next site you will be visiting, you can count on it getting quite a bit of views. As studies show, it only takes the average person a total of 3.5 times of seeing an image/slogan before they remember it. If you have your logo/slogan scattered throughout your page and as a favicon, rest assured that your audience will see it at least 3.5 times and therefor remember it.

How do I make one?

Now that you know what a favicon is and the potential importance such a small image could hold for your website, the next logical step in the process is figuring out how to make one.

Rest easy, no extensive knowledge of Photoshop, or any design program for that matter, is necessary to create this simple, yet effective, image. In fact, it can be created after following a small set of steps.

1. Open up a new document with the dimensions 16×16 (16 pixel width, 16 pixel height).
2. Fill in the background with your favorite color or a color that matches your website/logo.
3. If you have a logo now would be the time to paste it in and re-size it to fit the dimensions of the favicon document.
4. If you want to get fancy, add a 1 pixel sized border around the perimeter of the document in another color to really make it pop.
5. Save your image as favicon (make it a .jpg, .gif, or .png, does not matter which one as you will see in the next step).
6. Next, Google search “Favicon Generator.” – The reason we search this is because in order for the Favicon to function, it needs to have a .ico extension. There are a number of websites you can find/use on Google that will convert your image to a .ico format. For example, http://www.favicongenerator.com/. Upload your image to your favicon generator of choice. At this particular website, they provide you with the code to place in the <head> section of every page of your website in which you want your favicon.ico to show.
7. Upload your favicon.ico to the root directory of your website and place the code <link rel=”shortcut icon” href=”/favicon.ico” > into the <head> section of each page you want your favicon to show up.

That’s it!

Things to keep in mind:

1. It’s important that your logo can be identified. If it’s necessary that you only include a portion of your logo (a part of your logo that could easily be identified as a smaller version of the whole; for instance, the top right hand side of your logo, the center, etc) take that route rather than re-size the original size of your logo down to a pixelated black hole of nothingness.
2. You might have to adjust the favicon after you create it. Test it out on multiple browsers, see how it looks placed on top of the browser’s URL bar. If it doesn’t look right to you, chances are it won’t to other people.
3. If you want to work with a larger image and then do a total image re-size after it is created (such as the one Adobe Photoshop provides under Image>Image Size, at which in this step you would enter your desired dimensions for the re-size outcome), start with a document sized 256×256 (256 pixel width, 256 pixel height). This should re-size to 16×16 without any or very little pixelation.

Search some of your favorite sites and see if they are using a favicon! Many major businesses have decided to use this small and simple, yet effective, image to their advantage.

About the Author