Web Design

Use these quick tips to create a “Favicon”, a personalised icon to be displayed as a bookmark icon next to your website, and on the browser navigation tabs.

What’s a favicon?

A favicon (short for “favourite icon”) is the small image that appears on the browser bookmark bar and navigation tabs. It won’t necessarily improve your traffic, but it will definitely improve the branding and general appearance of your website, whilst allowing readers to navigate to your site easily in a list of bookmarks.

How to create a favicon

A favicon is a 16 pixels x 16 pixels icon, and utilises the .ico file extension. It’s usually rather difficult to put complex graphics or images into a frame of this size, which is why webmasters generally concentrate on using simple images or lettering for this purpose. As you can see, we only use part of our full Hallam logo for our favicon.

Because favicons are such simple icons, you won’t need to be a whizz on Photoshop in order to create one. Even Microsoft Paint should be enough to create a great looking icon. All you’ll need to do is create a 32 pixels x 32 pixels JPEG image in MS paint, and use this online service in order to convert the JPEG file into a .ico file. Favicons can also be generated as .png or .gif files, for those of you able to work with more advanced image editing software.

Once you’re happy with the image you’ve created, you’ll need to upload it to your website. You can either upload the image to the root directory of your site, or host it online using any one of a number of image hosting services.

When you’ve done this, you’ll need to edit the HTML of your site and link to your favicon from inside the head tag. Which starts like this: <head> and ends like this: </head> The code you’ll need to use will be one of the snippets of code below, depending on the file type of your favicon. Simply change the URL in the line of code to the URL at which your image is hosted.

Once you’ve edited the HTML and pushed the edited code live, your uploaded favicon should replace the blank document icon that regularly appears on sites that haven’t yet designated a favicon. Hopefully, adding a favicon will not only help you improve the appearance of your website, it should also help promote trust from your customers on your website.

Further Reading

Why your business should have a Favicon

One response to “How to create a favicon”

  1. Susan Hallam Susan Hallam says:

    I like to use a “favicon generator” that you can find here:

    It let’s you make a favicon from any image….

Leave a Reply

Your email address will not be published. Required fields are marked *