Digging into the Huge Value of Little Favicons

Have you noticed that small icon on your browser every time you used the internet? If you haven’t, try to take another look at it and for sure you’ll see what we are talking about. They sure are cute icons and they even look great especially if you have so many opened tabs that it sits there side by side with those tiny icons of different colors peeking into you. These are called favicons. And they are there for a reason not just for appeal.

So, today, we will try to take a deeper look into these tiny icons. We will know what these are for, how to design them and how to create them. You will also get a glimpse at some favicon samples. There are really some who are unaware of the value of favicons and we are hoping that somehow you’ll get a better understanding about this through our post. Let’s start by defining what a favicon is.

What are favicons?

Favicons are actually seen in your everyday computer and internet usage. These are small icons that represent websites. Like if you open a site, you will see a small icon next to the url in the address bar. Favicon is a combination of the words favourite and icon. It was first supported by Microsoft’s Internet Explorer for a browser bookmarking feature called favorites. Favicons are known as shortcut icon that are commonly 16×16 pixels, 32×32 pixels or 64×64 pixels in size. Bigger sizes for favicons are used so it will look good for retina users. It appears next the website’s name on your browser and can also be seen on your list of bookmarks once you bookmark it. Well, the first usage of favicons was to estimate the amount of traffic that visits a site by the number of bookmarks it receives.

Why do you need favicons?

Are these tiny icons important? This time, we will look into the value of favicons and how it can help both the site owners and the users. We will help you realize the huge value of little favicons. This goes to show that even tiny stuff, no matter how minute they are, would still give a big impact.

1. Improve user experience.

The primary usage of favicons is for improved user experience. Once you are working with many tabs on your browser, it would be easier for you to identify the sites that you are using. One look at the favicon will let you know which site you are about to open as seen in your tabs. Just imagine how your browser will look like if you do not have a favicon. It will merely be a blank page icon. Imagine if all websites are merely little blank page icons, aside from being dry, it will also take more effort for you to look at the sites you want. Read on Reasons Why User Experience Design is Important for a Website.

2. Branding.

Aside from making it easy for users, favicons are also important in terms of branding. You will not just place anything for the favicon but you will see to it that the favicon you have used is related to your brand and your website. Of course, this will be part of your site’s entire look and will also be part of how you will present your brand to the users. Most of the time, a favicon is based on the logo or the logo itself. We will look more into this in the next paragraphs. If you are designing a favicon, you can also check Tips in Choosing Colors for Brand Identity.

3. More professional look.

A website with merely little blank icon will look cheap and unprofessional. Users will look at it as something not worth visiting to and will also think that the website is not professional at all. So, make sure that you have a favicon for your website. It can affect your site’s visitors.

4. Easier to identify in bookmarks.

If you are fond of bookmarking websites that you find useful or you think will be useful for you in the next days, you will notice how valuable a favicon is. Look into your bookmarks. Isn’t it a headache to if you’ll see merely text and no favicons at all? The favicons will make it easier for you to identify the website that you would like to check at the moment without the hassle of checking every bookmark entry one by one. Your eye can easily be attracted and driven to the little favicon for every website you bookmarked.

5. It saves time.

Since we have mentioned about favicon giving a good user experience, part of that is how the users can save time merely through those small icons. With favicons, you can easily click on the website you want as it appears in your bookmarks (if you bookmarked it) and you can easily find it in your tabs especially if you have lots of open websites. So, instead of checking them one by one, the favicon can let assure you that you will be on the right site you are looking for. Designers really like it to accomplish more by working less.

6. Used for desktop icon.

Some websites use their favicons as website icons. This gives them a dual purpose. This can also let you easily identify it if you want to use it especially that its icon is just the same or similar to their logo and favicon.

7. Easier tab usage.

If you are visiting many websites at a time, you will find it easier to check if you’ll be going to the right site or not merely by looking at the favicon. You won’t need to open the site one by one. Just look at the favicon in each tab and you will know which site you’ll about to open.

Favicon Design Variations

Designing a favicon becomes challenging due to its size. But you will not really find it hard to do it since you will merely base it in your logo or in your brand. Of course, before you could create a favicon, you should make your own branding first which includes the colors you will use, the logo, website name and others. Then you will find it easier to create a favicon. There are different design variations for a favicon. Let us look into what these are so you will have an idea on what to do with your own favicon design.

1. Use entire logo.

Some websites use the entire logo as favicon which can be advisable if your logo isn’t that complicated. You also have to make sure that the details can still be seen if you make it smaller. So, you have to adjust it well.

Favicon designs from Site Point, Pepsi and Depositphotos.

2. Use a mascot.

If you are using a mascot or a character for your website, they can also be great as favicons because mascots immediately leave a mark on the visitor’s minds. Once you use it as favicon, they’ll easily recognize it. It can also be an effective part of your branding.

Favicon designs from PBS Kids, Mail Chimp and Naldz Graphics.

3. Show a part of your logo.

You can also get some parts of your logo and use it as a favicon. This is good for websites that have complex logo designs. But see to it that the part you are using from your logo is easily recognizable. Make sure that it really looks a part of your identity.

Favicon designs from Home Design Lover, Amazon and Behance.

4. Create a new design.

Aside from using the logo as basis, you can also create a favicon that is unique from the logo as long as it is still connected to the identity of the website.

Favicon designs from YouTube, Twitter and Flickr.

5. Use typography.

There are also websites that use the first letter of the name of their site of the initials of their site as favicons. Using typography is another good way to create favicons. Just make sure that it is readable and is also associated with the brand of your website.

Favicon designs from Paper Culture, Facebook and 99 Designs.

There are indeed different ways to design a favicon. The important thing is that it could still show the brand and identity of your website. You can even create animated favicons to make it catchier. Now that you know how you can design a favicon, let us look into the next part of the article where you can learn how to create a favicon.

How to Make a Favicon

You can create your own favicon using two ways. You can create one in Adobe Photoshop or you can just upload your logo in favicon generators. Choose whichever manner you like but whatever you choose, you will still get a favicon that would be fitting for your site. It’s really not that complicated.

So, let us first look into the different websites where you can generate favicons. If you are looking for an easier way to create favicons, you can use the favicon generators instead. You will merely upload your logo or an image to their website and they’ll give you your “favicon.ico”. Here are some of favicon generators:

Favicon Generators

1. Web Script Lab Favicon Generator.

2. Dynamic Drive.

3. Favicon Generator.

4. Favicon.

5. Favigen.

6. Favicon Generator.org.

7. DeGraeve.

8. Chami.

9. Genfavicon.

10. Antifavicon.

Using Adobe Photoshop

If you want to express more of your artistic side and you want to work on your favicon with all the creative juices you have, then do it in Photoshop. In using Photoshop, you have to do the following steps:

1. Download a plugin to install the .ico format since Photoshop doesn’t support that kind of format unless you install it.

2. Create a new document in with a 64×64 pixels size. Design your favicon and when you are done, resize it to 16 x 16. You can resize the image by going to Image>Image Size>Pixel Dimensions Width: 16 and Height:16. Check on the Resample Image box so you can access a dropdown menu where you have to select Bicubic Sharper to ensure that your image will look good when reduced.

3. If you are already happy with the result, then go to File>Save As>.ico. Be sure to select .ico format so you can create your favicon.

4. Your done!

But of course your still need to incorporate that to your website. Whether you use a favicon generator or Photoshop in making one, you will still have to go through this step. To do that, here are the steps:

1. Upload the favicon.ico to your website. Verify it by typing http://mysite.com/favicon.ico in the browser. Of course you have to change “mysite” with your site’s name. .

2. Now go to your site’s html. In its index page, just below the Head section, insert the following code:

<link rel=”shortcut icon” type=”image/x-icon” href=”/favicon.ico”>

For WordPress, below the HEAD of the “header.php” file, insert the following:

<link rel=”shortcut icon” type=”image/x-icon” href=”<?php bloginfo (‘url’) ?>/favicon.ico”>

3. Your done! But sometimes the favicon doesn’t appear at once. It sometimes takes hours or days before you see the favicon. Well, at least you are done with this step and you already have a favicon for your website.

Making a favicon isn’t really a hard task. As you can see, you can easily generate it. You can choose which option you would like to create your favicon although using a favicon generator is much easier.

Favicon Design Inspiration

You might want to look into the different favicon designs used by websites. We have here favicon galleries where you can find so many favicon designs. This might help you in designing your own favicon. Check on their usage of colors and shapes to make a distinct favicon for their websites.

1. Art Nectar.

2. The Favicon Gallery.

3. Fresh Favicon.

4. IconJ.

It’s Your Turn Now

Favicons are important even if they are teeny-weeny icons. It can help you build up a good branding and a good online reputation. We hope that we have given you valuable input about favicons. Now it’s your time to speak up. Share to us your thoughts about the value of favicons.