Pixel Art: Create a Better Favicon For Your Website

Favicons are small pixel-size icons which are short for Favorite Icons, or icons that are intended to be viewed next to a website title when bookmarked. They also show up in the URL section of a web browser and in tabs. The purpose of a Favicon is not just for visual impact, but it is an essential branding tool, that can support the greater branding images of a website like the logo, overall color scheme, and theme.

Pixel Art: Create a Better Favicon For Your Website


Having a good favicon can make a website more noticeable and relevant when a past visitor is searching through bookmarks, history, or favorites. It can also help for users to find a website quickly when trying to search their way through multiple tabs. In this post we're going to take a look at some great Favicons that represent the respective brand well, and also cover some tutorials and how-to's for creating your own effective Favicon on your website.

Tutorials and How-To's

Creating and implementing a Favicon is relatively easy. Favicons in the URL field and in browser tabs are at 16x16 pixels, but 32x32 pixels are used in some browsers in the Favorites section. Below is a step by step guide to first designing your favicon, and then placing it into your website.

Step-by-Step Guide to Putting a Favicon on Your Site

  • Open up MS Paint or another graphics program of your choice. MS paint works just fine since you'll be having to work in simple pixels and a simple color palette anyway, and because it supports saving files in the Favicon format: .ico. However, a Favicon can be created in another program and then translated into .ico with an online generator fairly easily as well.
  • Create a 16px by 16px document and begin designing within this space. It can be difficult to create something with a lot of detail in this small space, so be sure to check out the best practices and guidelines below for creating an effective Favicon. You may also want to create a 32px by 32px icon with more detail, since some browsers display Favorites at this size. For practicality purposes, though, 16x16 pixels is usually sufficient for most uses and modern browsers.
  • Save the icon in a .ico format. This can be done in MS Paint, through Photoshop with this plugin, or use one of the online generators below. It can also work to simply save the icon in any common web image format, and then rename the file to .ico instead of .jpg, .gif, or .png. However, this is just disguising the real format, and using this method may not be fully compatible among all browsers.
  • Place the icon in your images folder, or in the root folder of your website.
  • Use the following code in the head section of your webpage, preferably next to your meta tags or other link tags:
    <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" /> 

Further and More Specific Tutorials

Best Practices

As anyone can see, creating and implementing a Favicon is pretty easy. Most web designers know this, but above is a quick guide regardless. Now, though, let's look into Favicon design in a bit more detail. Like with any web design practice, there are a set of best practices when it comes to designing and implementing favicons onto your website. Below are just a few ideas, some technical, and some not.

Name Your Favicon "favicon.ico"

Many websites name their favicons "favicon.ico" for a number of good reasons. The most important reason is browser compatibility with IE. Yes, even with classic Favicons we must still deal with issues in Internet Explorer. Fortunately, issues are easy to overcome. IE6 may only recognize icons as favicons if the icon ends in .ico. There are ways to make other image formats (such as .png, .jpg, and .gif) work as Favicons by just altering the HTML code above, and it will work just fine in modern browsers. However, we won't even get into how to do that since it's just much easier and more compatible to make favicons in the standard .ico format.

Also, IE5 and earlier may not even recognize a favicon if it is named anything different than 'favicon'. Many will argue that the percentage of those who still use anything IE5 and earlier is next to nothing, and that it barely matters. While this is a very good point, it doesn't take much extra effort to name a favicon appropriately to include that small percentage regardless.

The third good reason to name your favicon exactly "favicon.ico" is for consistency purposes. When working with websites from developer to developer, this is the standard name for such an icon and therefore it can be recognized and worked with more easily.

Directory Structure

Place Your Favicon in the Top Directory

While our how-to example above did indeed place the favicon in an images/ folder, it is generally a best practice to place the favicon in the root directory of your website. While it is possible to place a favicon in any directory and link to it respectively, most developers place it in the top directory for consistency purposes.

It may make more sense to some to put it into an images folder since it is an image, but the standard developer-to-developer directory structure includes it in the top directory with the main pages.

Create a Multi-Resolution Icon

We were discussing above what the common size dimensions were for favicons. 16px by 16px was the most common, and many websites choose to just use this. A standard 16px by 16px icon works just fine in the majority of cases. Yet, there is a way to create a multi-resolution favicon that supports larger versions of the icon, just in the case that the icon was translated to a desktop or application icon. This prevents the 16px by 16px icon from being stretched out into something hideous, in the rare cases of its expansion.

Multi-Resolution Icon

For a detailed tutorial on how to create multi-resolution icons, check out this post: Creating a multi-resolution favicon including transparency with the GIMP. While this tutorial is based in GIMP, the same principles can be translated to Photoshop or another photo-editing program as well.

Use the 256 Color Palette

This simple color palette is the default Windows color palette. It is what most browsers that view your favicon will support, plus, the simplicity in colors means a better visual outcome for a design in such a small space.

Keep It Simple & Consistent with Branding

Of course, keep to the main purpose of using a favicon: let it support your website brand. Many favicons are a simple version of the website logo, or a relative image otherwise. They are in the same color scheme as the main color of the website, and don't stray too far away from the overall look and theme of the website. Never just use a random image or interesting piece of pixel art for a favicon. There's just no point to that. Make it relevant, specific to your branding, and relative to your website's overall look.

Also keep the design as simple as possible. There is just simply not enough room for extra design features such as drop shadows, texture, and so on. Clean lines and shapes are the best way to create a crisp, clean, and effective favicon. Without a minimal design, the overall use can backfire by becoming too crowded and blurred for effective branding.

Favicon Generators & Tools

Favicon CC
Favicon CC

Favicon Generator
Favicon Generator

Favicon
Favicon

A Showcase of Some Great Favicons

Cogmap http://www.cogmap.com

Hotwheels http://www.hotwheels.com

Logitech http://www.logitech.com

Reachgroup http://www.reachgroupconsulting.com

Iconshoppe http://www.iconshoppe.com/

Nimbupani http://nimbupani.com

Spoon Juice http://www.spoonjuice.com

Splitweed http://en.splitweet.com

M1design http://www.m1-design.de

Babbleblog http://blog.babbel.com

Rocket Theme http://www.rockettheme.com

Mix http://visitmix.com

Further Resources

Conclusion

Favicons are more than just a complimentary image, they are an effective branding tool, that when used right, can boost your website's overall brand and quality visitors. Favicon design should imitate a logo or branding of a website in order to work right, but one must also pay attention to the small technical requirements that make a favicon as versatile as possible among many different browsers and under varying circumstances. Without this attention, a favicon, which represents your website and/or business, can become distorted when enlarged or not available at all.

Website creators everywhere: pay attention to your favicon. Is it consistent with your branding? Do you have one at all? If not, improve your professional appearance and brand with a well-designed and well-implemented favicon.

Opinions expressed in this article are those of the author and not necessarily those of Onextrapixel.