How to Create a Favicon Using Your Business Logo

Favicons should not miss in your marketing arsenal if you are serious about branding.

A favicon, which is a short form for “favorite icon”, came into being after the development of the Internet Explorer browser in the year 1999. It is a small square image that appears before the website URL in a browser’s address bar, the browsing tabs, and near the website name in bookmarks. Usually, it is the website or business logo reduced to 16 x 16 pixels but you can use any of your images.

While they are not among the vital website elements, they will differentiate you from your key competitors and help your potential customers remember you easily. But if you are new to the world of branding and online marketing, the word “favicon” might sound new to you. So, what is a Favicon?

You do not have to create your favicon from scratch if you already have an established logo for your brand. All you have to do is tweak the logo to come up with a recognizable favicon. Here are a few steps to follow when doing that. 

Step 1: Choose the Size 

The first step involves the selection of a favicon size. The size you select highly depends on where you intend to use the favicon but the standard size is 16 x 16 pixels. 

The standard size is useable in most website browsers and the favorite bars but you will have to choose 57 x 57 pixels for iPod Touch icons and iOS systems. Most new systems demand 114 x 114 pixels and Google TV requires 96 x 96 pixels. 

You do not need a favicon for every device. So, create only two sizes: one standard measuring 16 x 16 pixels and another measuring 128 x 128 pixels for the Google Chrome Store and the other places that require a large favicon. If your brand targets iPhone users, you will have to create one that can work on their devices. 

Step 2: Choose the Format 

There is no standard format for favicons and you should therefore choose at least two for your branding. The ICO format is the most important because most internet browsers support it. Besides, this format also supports various bit depths and sizes. PNG is the second most important format because it is currently the industry’s standard for images. It allows the storage of very small files.  

Step 3: Create the Image 

When it comes to creating the image for your favicon, identify the most important elements of your logo. What would you want your target audiences to recognize immediately?

Favicons are small and therefore you cannot include text – it will only work if it is a single impressing image. Therefore, you have to simplify your brand’s logo.

A quick example, if you are a pet care service provider, take the image of the dog or cat that appears on your logo and simplify it to work as the favicon. Tweak your brand colors to fit in the favicon. 

Remember to simplify the logo adequately because a complex logo may not be comprehensible as a website’s favicon. Also, ensure that the favicon is viewable in the navigation bar.

Step 4: Implement the Favicon

After the design of your favicon is complete, you have to implement it and start using it on your website. You can do that by exporting it or adding it directly to your website. Here is how to do that.

Export the Favicon

To export your favicon, you have to convert it to PNG format or ICO format. While the conversion process might sound complex, all you need is a free tool, such as the Iconbuilder file extension, which is available for both Fireworks and Photoshop users. The extension offers a Windows template for use in the creation of ICO files. Iconbuilder allows users to delete the sizes they do not need and leave those they want. Most importantly, you do not require any technical knowledge to use the tool.

Ensure that your artwork is in the right box and select the present Windows. Click on the Build button and preview the size of your favicon. Save it at this stage.

One benefit of using the Iconbuilder extension is that it allows users to remove the options they do not need, including the color depths and sizes. Besides, it allows the creation of PNGs for every created resolution, therefore, simplifying the favicon creation process. If a need to postpone the creation of multiple file formats and sizes arises, Iconbuilder will help you do that. 

creation of ICO files

Add the Favicon to Your Website

This is the final stage of creating a favicon using the design of your logo. All you have to do to add the favicon to your website is access the code of every webpage and point to the files. Ensure that the link elements are on the head of your pages and remember to include the right type and “rel” attributes.

Proper structuring of the favicon will allow you to use it on the websites that you do not host, including Tumblr. Furthermore, the structuring will allow you to control the branding of your business on your website and keep your brand image consistent.

While you should not stick to any file naming structure during the creation of your favicon file, you have to use the right link element. This will eliminate the chances of users’ internet browsers making multiple requests to access the file.

Remember to save the changes after adding a path to the favicon. The file will appear on the navigation bar of a web browser each time someone visits your website or bookmark.

Conclusion

Even though a favicon will not affect your Search Engine Optimization (SEO) directly, it will help in building brand awareness. It will appear near the title of your webpage and therefore help people find your content easily. Moreover, it will boost your visibility on social media sites, give your brand a professional look, and strengthen the credibility of your business.

It will keep you updated with the technology of today. Above are the steps to follow when creating one from your logo.

Hot Topics

Related Articles