How to create to a favicon

If you’re serious about branding your business, favicons should really be a part of your marketing arsenal. They’re not the most important aspect of a website, but it’s details like this that make sure you’re remembered by potential customers and stand out from the competition.

This guide will show you how to make a favicon, and how they can boost your marketing efforts.

Before we get into the guide, you will of course need web hosting to get a site online and add a favicon.

Take a look at Web Hosting solutions – we have packages to suit everyone, plus you can get 10% off with the code LCNBLOG10.

 

What is a Favicon?

Favicons are the small square images that are usually displayed before the URL in the address bar of a browser, in the browsing tabs, and next to the site name in a users list of bookmarks.

 

 

Usually, they’re just the brand or website logo shrunk down to 16 x 16 pixels, but any image can be used to represent a brand.

Favicon, short for “favourite icon”, was originally a new feature within Internet Explorer browser in 1999. When users bookmarked a site through Internet Explorer, they displayed the icon next to the website’s name in the favourites list.

[Tweet “A favicon image can help your webpage stand out in a congested bookmarks tab”]

 

The Importance of Favicons

While favicons don’t directly help search engine optimisation (SEO), they do help with brand awareness.

When someone bookmarks your site, your favicon will appear next to your page title in their bookmarks list, helping people to navigate to your content.

 

 

As well as boosting visibility, it ultimately gives your brand a more professional look and strengthens your credibility.

Even when users aren’t planning to visit your site, a clear favicon design that stands out among the rest can lead to users revisiting your site.

Related: Tips to make your website look more professional

 

How to create a Favicon for Your Website

 

Step 1: Create Your Image

You can design a favicon image using an editor like Fireworks, Photoshop, Corel Paint, or a free, open-source alternative like GIMP.

To support consistent brand identity, many businesses simply use their company logo.

To make it easier to edit, start with a 64 x 64 pixel square and you can scale it down to 16 x 16 pixels later. Then you need to save the file as a .jpg, .png, .gif, .bmp, or .tif.

 

Step 2: Convert the Image

Once you’re happy with the image, it needs to be saved as favicon.ico. This is the recommended format supported by most web browsers.

To convert your file to the .ico format, you may need to use an online tool such as iconifier.net, prodraw.net, or faviconer.com.

There are many available. Simply upload your image, select the icon size, and you can then download your brand new .ico file.

 

Step 3: Upload the Image to Your Website

The .ico file needs to be uploaded to the root directory of your website. Then the image should be visible when you go to www.yoursite.co.uk/favicon.ico.

 

Step 4: Add Basic HTML Code

To help older browsers find your favicon image, you can edit your website’s HTML page.

Most modern browsers will find your favicon file without the need to add any code, but to make sure all browsers display it properly, add the following to your header, within the tags of your page:

 

<link rel="icon" type="image/x-icon" href="http://example.com/favicon.ico" />

 

Creating a favicon for your business is a simple way to improve your online branding. It can make a big difference to the user experience and improve your company’s image at little or no extra cost.

 

Your Say!

Have you got one for your website, or have you never even heard a Favicon? Either way, if you use the internet regularly, you’ll see dozens of them daily.