Need to create a favicon? Having the right logo for your company is important. However, are you using it in the most effective ways to brand yourself online?
One opportunity that many companies miss is creating and using a favicon for their website. In this article, we’ll tell you how to use your logo to create a favicon. Mostly to increase your brand recognition and grow your business. You already know how important having a website is I’m sure.
What is a Favicon?
Let’s start by talking about what is a favicon is and giving you a few examples.
The word “favicon” is an amalgam of two words, favorite and icon. It’s a small icon or symbol that shows up in the navigation bar of a web browser when someone visits your site. Very important for your social media channels.
It is sometimes referred to as a bookmark icon because it also appears next to your site name when a user makes your site one of their favorites.
Favicons were first supported by Windows 5, released by Microsoft in 1999. Originally, they appeared only if users bookmarked a site, and a side benefit was that site owners could then tell how many people bookmarked them by viewing the number of favicon requests.
Today, favicons load automatically so there is no way to count the number of users who bookmark your site. However, favicons do increase brand recognition and help you present a consistent online image.
Favicon Examples
Now let’s look at a couple of examples of favicons to give you an idea of how they can help you. First up is the favicon for Google:
Note that the favicon in this case does not include the entire Google logo. Only the capital G in an array of rainbow colors. Furthermore, this favicon has its roots in Google’s logo and is instantly recognizable.
Second example, YouTube’s favicon uses the play symbol that appears on all YouTube videos as its favicon:
Both of these examples illustrate ways of starting with a logo and tweaking it to create a favicon. Unless your company has a simple and instantly recognizable logo like the Nike swoosh, you’ll probably need to get a bit creative with your favicon.
How to Create a Favicon
Now let’s talk about how to create a favicon for your site. The process is fairly simple, and we’ll walk you through it step by step.
Choosing the Right Size
Most importantly, the first step is knowing what size your favicon file should be. That in itself depends on knowing where you’ll use it. The standard size is 16 pixels, which you can use in most browsers and in your users’ Favorite bars. However, there are some alternatives.
For example, 57 pixels is the size for the iPod Touch icon and first generation iOS systems. Newer systems require 114 pixels, and 96 pixels is the standard size for Google TV.
Do you need all of these sizes? Probably not. What we recommend is two sizes. First the standard 16 pixels and secondly, a 128 pixel size for the Google Chrome Store and other places where you need a large icon. If you plan on marketing an app to iPhone users, then you’ll also need to create the appropriate favicon files for those uses.
Choosing the Right Format
The file format of your favicon is the next thing to consider. Since there is no single standard format, you’ll have to create two at minimum.
For instance, the first is the ICO format, which is the only format supported by Internet Explorer. It can support multiple sizes and bit depths, which is useful.
The second format, which may be preferable for some uses, is the PNG format. This is a fairly standard format for images and makes it possible to store your favicon as a very small file. An important consideration to ensure fast loading times.
Creating an Image
The next step is creating an image. Look at your logo and ask yourself what its most important elements are. What will people recognize instantly?
Because the favicon is so small, you can’t include text. It must be a single, striking image to be effective. Consider doing what Google did and taking a recognizable visual element and perhaps tweaking the colors to incorporate other colors from your logo.
An alternative is to simplify an image from your site. For example, a real estate company might use a simplified version of the house that appears in their logo to serve as their favicon.
Avoiding Favicon Pitfalls
Now let’s talk about how to avoid some common pitfalls that companies sometimes run into when designing a favicon.
First of all, the first potential pitfall is not simplifying your logo sufficiently for it to translate to a favicon. Remember, a logo that is overly complex may end up being virtually incomprehensible as a favicon. Furthermore, you can get around this issue by choosing the most recognizable visual element of your logo as your favicon.
Another pitfall is ending up with a favicon that isn’t easily viewable in a navigation bar. You may need to tweak the colors to ensure that people can see your favicon when it appears.
Messing around with the proportions of an image can turn it into a strange-looking favicon. Always make sure to view your favicon at the proper size to make sure that it hasn’t transformed into something unrecognizable.
Implementing Your Favicon
Once your favicon has been designed, the next step is to implement it so that you can use it on your website. This process has two steps: exporting your favicon, and adding it to your site.
Exporting Your Favicon
Exporting your favicon is very easy in a PNG format, and a bit more complicated in an ICO format. However, there is an easy-to-use tool that can help you do both easily even if you’re not technically savvy.
To create an ICO file, the easiest thing to do is to download the Iconbuilder extension that is available both for Photoshop and Fireworks.
Iconbuilder comes with a Windows template that you can use to make the ICO files you need. You can simply delete the sizes you don’t need and proceed. You don’t need to have any technical know-how to do it.
Put your artwork in the correct box and choose the Windows present. Press the Build button, and then you’ll be able to preview each size of your favicon before saving it.
Once nice thing about using Iconbuilder is that you remove any options you don’t want simply by clicking on the sidebar. That includes sizes and color depths.
Iconbuilder has the ability to create a set of PNGs for each resolution you create, which simplifies the process.
Unfortunately, favicon creation sometimes ends up getting postponed until the last minute. However, what we like about Iconbuilder is that it makes the process easy and allows for the quick creation of multiple sizes and file formats.
Adding Your New Favicon to Your Site
The final step in the favicon creation process is adding your new favicon to your site. This can be done by simply creating a bit of code.
Access the code for each one of your web pages and use it to point to the favicon file. You should use the link element in the head of each page, and make sure to include the proper rel and type attributes. Here is an example:
Structuring it this way will allow you to change the favicon even on sites you don’t host, such as Tumblr. The benefit of that is that you can control your branding anywhere on the web, ensuring that your brand image is consistent.
You don’t need to adhere to any particular file naming structure when you create your favicon file, but make sure to use the link element to prevent the user’s browser from having to make multiple requests to find it.
Once you have added the path to your favicon to your website, save your changes and you’ll be ready to go. So, the next time a user visits your site, your new favicon will appear in the display bar of their browser. Furthermore, it will also show up next to the name of your site every time someone bookmarks a page from it.
Conclusion – create a favicon for your website based on your logo
Wrapping up, creating a favicon for your website is a good way to consolidate your branding and maintain a consistent online image. However, the process of creating a favicon requires some creativity and patience. Although, the payoff is greater brand recognition – a worthwhile trade to make.
Ideally, you should create multiple sizes of your favicon. However, if you simply want to get started and get a favicon in place, the one size to create is 16px, which you can use in Internet Explorer and other browsers. After all, you can always create the larger sizes later if it turns out you need them.
Understandably, your logo is the perfect starting point to create a favicon. Study it, break it down into its component elements, and soon you’ll have a favicon to represent you so your brand is front and center for your users.