How To Create a Favicon: The Ultimate Guide

Why and How to Create a Favicon for Your Website

Having a favicon for your website is essential for brand recognition and user convenience. We explain what they are, why you need one for your website and how to create a favicon in the following guide.

You can read this guide entirely from top to bottom (which is recommended), or if you know what you need, you can skip to the section you require;

Now let’s get into the why and how to create a favicon for your website.

What is a favicon?

A favicon (short for icon icon) is a small icon on a website or other online content. It is the small logo or image that appears in the address bar or history drop down in most web browsers.

This small icon that appears next to the URL of your site is designed to help users visually identify websites, web pages, and web applications. Typically a favicon is designed when building your website. It’s important for your website to have a favicon installed because it does help with brand recognition.

Chrome browser tabs showing Favicon
Chrome browser tabs showing Favicon

The example above shows the tabs in on a Chrome browser. When you have a number of tabs open, you can glance and see which tab is which, making it far easier for the user.

Favicons are typically a small piece of graphic design in the form of a rounded square or circle (depending on the size of the icon and where it is being used in the website or on browser, etc).

Many companies use their own logos, or if their logo is complex, perhaps an element of the logo instead.

Example favicons from Australian brands
Example favicons from Australian brands

As an example, the above images are favicons taken from the websites of Australia Post, McDonalds, ABC and MYER.

A favicon is  also useful for linking to images or icons that you’ve posted to a website. Favicons also work as a social sharing icon, or social media profile image too.

^ Back to top

Why should you create a favicon?

Favicons are a key element of a website. It’s a symbol that reflects your brand or website, and helps makes a website click-worthy.

Related:  10 Steps to the Most Effective Website Launch Checklist

There are many different tools on the internet to create a favicon.

Why would you use some boring default image when you can get that extra bit of appeal by using a custom image and icon to create a brand-nameable website icon?

While all you need to create a favicon is an image, sometimes if you are running a personal website, you may not have a logo at all. In that case, some favicon creators use emojis or just letters or a word.

Favicon in DuckDuckGo search results
Favicon in DuckDuckGo search results

Some web directories and search engines, such as DuckDuckGo shown above, also use your favicon in their listings or search results.

^ Back to top

How to create a favicon

Now that you know why you should have a favicon for your website, let’s learn about how you can go about creating one for yourself.

Creating your favicon may seem simple, however not always straightforward. If you want to create a favicon with a custom look, there are many options for creating a favicon. A favicon isn’t just for a user; it can be useful to the server-side as well.

Here are three tips to ensure you create a favicon to be proud of;

Your favicon must be unique

Don’t just use a picture you found online, or a stock photo that you have downloaded. Your favicon should be totally original, as unique as your brand, and one that you can be completely proud of.

Ensure you make the favicon clear and legible

Because they will be shown at very small sizes, such as 16 x 16 pixels, you need to ensure any favicon you create works well at such a small size. Just like any corporate identity, to make it a genuinely iconic image, it needs to be sharp and legible, no matter the size.

Provide various image sizes

Not all web browsers and similar applications use the same size favicon. You will want to create your favicon in the universally adopted sizes, so it works no matter the device or software using it.

At a minimum, you should have the standard favicon sizes being;

  • 16×16 pixels: browser favicon
  • 32×32 pixels: taskbar favicon
  • 96×96 pixels: desktop favicon

However, you will find it’s not uncommon for some browsers and content management systems to request 48 x 48, 256 x 256 or even 512 x 512 pixel versions.

Related:  How to Find and Choose Great WordPress Plugins For Your Website

The upside is that by creating your favicon large, you can scale it down to suit any size lower than the original size you created it at. That way, it will almost exactly like the real thing.

^ Back to top

Free tools to create a favicon

When you are wanting to learn how to create a favicon, you may find the simplest way is to use one fo the following tools. These free online tools allow you to create one within the browser in no time at all. Favicon generators

Favicon.io favicon generator software
Favicon.io favicon generator software

There are many different online favicon generators that are available. Here are some of the ones I have used, and consider these my favourites:

favicon.io

Favicon.io in my opinion, is the best designed favicon creator of the bunch, and you will find that it is super easy to use.

Real Favicon Generator

Real Favicon Generator is great as well, and perfect for developers of other tools, as it has its own API and other tools you can embed within your applications.

Favicon.ico & App Icon Generator

Favicon.ico Generator is another very easy to use tool, which allows you to whip up a favicon in literally a few minutes.

Favicon by Real Favicon Generator

If you are one of the millions of people with a WordPress powered website, the Favicon by Real Favicon Generator WordPress plugin by the creator of Real Favicon Generator may be just the solution for you.

I’m positive that you will be able to create a favicon masterpiece using one of the above Favicon generators.

^ Back to top

Adding a favicon to your website

After you have designed your favicon and saved the files, you need to then upload the images to your website and add some code in the <header> section of your website template.

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000">

For example, the code above instructs website users browsers where to find various favicon files, such as the default favicon, a 32 x 32 pixel version of the favicon and a 16 x 16 pixel version.

^ Back to top

Conclusion

I trust that this post has shown you how to create a favicon, as well as why it is important that every website has one.

Related:  How to Get an SSL Certificate to Secure Your Website

In this guide, we covered the following sections;

Now you are aware that there are various techniques to create a favicon that have grown in popularity, however there is no magical one that is definitive.

Now that you’ve learnt all about how to create a favicon for your website, it is time for you to go ahead and do just that for your own website. Good luck!

Similar Posts