How to Generate a Favicon

A favicon (also known as a shortcut icon, tab icon, website icon, URL icon, or bookmark icon) is a small image – usually 16 x 16 pixels in size – that represents a website in a browser. This could be on a tab, in the bookmarks list, in internet history results, or in the search bar.

Typically, a favicon is a site’s logo (or a smaller version of its logo), but it can really be anything – as long as it’s on-brand, and helps the user identify the site at a glance.

For a quick demonstration, cast your eye up to the top of your own screen, and the tabs you have open right now. What images do you see there?

Here’s mine. At the far left is the immediately recognizable Gmail logo, then the blue page of Google Docs. Moving across, you have our WBE logo (tada!), plus the lion’s head of the Premier League (because I need to keep tabs on the soccer scores while I’m writing!).

Favicons are also useful when flicking through your bookmarks bar:

As you can see, favicons make it easy to immediately pick out the tab you need from the rest.

When a site doesn’t have a favicon – as is the case with my beloved pulled pork recipe above – your browser will usually generate a generic globe image to fill the space. And, as you can see, it’s not helpful for the user trying to navigate to the right place – nor does it do the site’s awareness or brand recognition any favors.

Favicons aren’t simply a “nice-to-have”, only to be considered when the rest of your website is up and running. Nope – they’re a must-have.

Every time a user bookmarks your site, a favicon’s there. Every time they access your website, a favicon’s there. And every time they scroll through their internet history, your favicon will be there – if, that is, you have one.

A good favicon:

• Increases awareness of your brand and levels of brand recognition
• Helps drive repeat visits and brand loyalty
• Gives your website a more credible, trustworthy, and professional sheen
• Offers indirect SEO (search engine optimization) benefits by increasing site usability and experience

So, now you know what a favicon is, and why they’re important. But how do you equip your site with one, exactly?

#1. Use Your Existing Logo – Or Create a New Image

Well, you’ll need to start with an image that represents your brand. It should be easy to remember, sport your business’ colors and unique “look and feel”, and be simple to spot in a crowded toolbar. For all these reasons and more, your logo – or at least an abbreviated form of it – is a great place to start.

Once you have this image – you can use a photo editor such as Photoshop or Canva to get it right – you’ll need to save it (.png or .jpg formats work best), ideally as 64 x 64 px. This will make it easier to edit, and you can scale it down to ideal favicon size (16 x 16 px) later.

#2. Convert the Image

With your image ready, you’ll then need to convert it to favicon.ico, which is the format most web browsers recommend for favicons. You can do this for free with an online favicon generator, of which there are plenty available – we’ll run through our top five below to help you pick.

#3. Upload Your New Favicon to Your Website

Next, you’ll have to upload your favicon (in .ico format) to your site’s root directory, to ensure that browsers can locate your favicon file, and display the image accordingly.

You can also edit your site’s HTML code directly, by adding the following piece of code to your header.

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

You shouldn’t need to do this last bit – most browsers these days will be able to locate your favicon without it – but it’ll ensure that older browsers can also keep up.

Online favicon generators allow you to upload an image and turn it into a favicon. Better still, some of these tools act as both an image editor and favicon generator – meaning you can design your logo, then turn it into a good-looking favicon.

Here are our top five.

#1. Favicon.io

Offering a slick, seamless UX (user experience) alongside its free favicon generation, Favicon.io is a top choice for simple, speedy results. You can generate a favicon from an existing image, make one from scratch, or choose from hundreds of emojis to give your favicon a more personal feel.

#2. RealFaviconGenerator.net

RealFaviconGenerator.net allows you to upload an existing image, or hit the “Demo with a random image” button for a quick, effective demonstration. Handily, you can also use its “Check your favicon” feature to view what your site’s existing favicon looks like, and identify any room for improvement.

#3. Favicon-generator.org

With a basic style and ads cluttering its interface, Favicon-generator.org has slightly more of a “rough and ready” feel than the first two tools we’ve mentioned already. But that doesn’t make it any less efficient – you can generate favicons for web, Android, Microsoft, and iOS, and even maintain the image’s original dimensions.

There’s also some useful info at the bottom of Favicon-generator.org’s main page around favicons (though, since you’re already reading this article, we don’t think you’ll need it!).

#4. Favic-o-Matic

The hipster’s choice, Favic-o-Matic sports a quirky, clever design, with catchy copy and slogans adding a touch of fun. It’s straightforward to use, but not lacking in functionality: its “advanced settings” allows you to alter image size, background color, and RSS feed URL. It does the job quickly, too – although the incessant display ads can get a little irritating!

#5. Favicon.cc

Favicon.cc may look like an early 90s reincarnation of MS Paint, but don’t be fooled by its stripped-back visage. It boasts all the functionality you’ll need to create your favicon, then export it correctly. You can even view the latest – and highest-rated – favicons to get inspired, and preview your own favicon before you download it.