What is a favicon and does my website need one?

Favicons are small icons that are vital in branding your website and appearing in Google search results

Favicons are small icons that are vital in branding your website and appearing in Google search results

What do I need to know about favicons?

A favicon is the tiny square icon that appears on the tab on your web browser next to the title of your page. It will also appear on your mobile or tablet as a shortcut icon if you save a web page to your home screen.

It’s another way of making your website branding consistent, so that your logo appears everywhere it should be.

But favicons have just got a lot more important, since Google has redesigned their mobile search to include them, in the top left corner of the search result, just next to the site’s web address.

Screenshots of what favicons look like in browser tabs and Google search results

So what do I need to do to make sure my site has a favicon?

Most professionally designed websites will have one already. If not, systems like Wix and WordPress will allow you to upload one (although they might use a different name for it, such as Site icon).

You know you need to upload a favicon when you look at your website and:

  • you don’t see a logo next to the title on the browser tab
  • on Chrome, you see the generic globe icon instead of your logo Generic globe favicon on Chrome browser
  • you see the logo of the website software you’re using – for example, WordPress Generic WordPress favicon

But when you look at your website and don’t see a logo next to the title on the browser tab, or you see a generic logo (like the Wix or Joomla logo), you know you need to upload a favicon.

How do I generate a favicon?

The original favicon has a special .ico format, which is a special format you can create on specialist favicon generator websites. These are tiny though, so as screen sizes and technologies have improved, you’ll need to create bigger versions to look good if it’s saved on your mobile homescreen. Software like WordPress prefers bigger icons, at least 512 by 512 pixels.

Making a favicon can be an art form in itself. Don’t try and put the text of your entire logo on there, as it won’t be visible when it’s so small. Stick to a letter or two in your logo’s font, or a graphic element from your logo.

Why has Google added favicons to search results?

Putting favicons on mobile search results is a smart move from Google as it brightens up the list of text-based search results, plus your organisation gets to showcase its logo before people have reached your website.

It probably won’t be long until this format has been rolled out to desktop searches too, so it’s worth getting ahead of the curve.

Check now to make sure there’s a nice icon in your Google search results, which will make your brand stand out from the crowd!

Share 'What is a favicon and does my website need one?'

More from the blog

How website accessibility with screen readers increases your reach

How website accessibility with screen readers increases your reach

A well-designed website can be a powerful tool for sharing discoveries โ€“ through text, images, and interactive content โ€“ yet these formats donโ€™t work for everyone. Some people find them difficult to use or overwhelming to process, while others arenโ€™t able to access...

Top tips for preparing images and videos for your website

Top tips for preparing images and videos for your website

Words matter. Theyโ€™re the backbone of your story. But when your audience spans academics, potential investors, study participants, and members of the public, you need your content to pop and engage your audience. Doing a little preparatory work on the images and...

EU vs UK website accessibility rules: is your site affected?

EU vs UK website accessibility rules: is your site affected?

Website accessibility is about making sure every visitor can use your site, regardless of ability, circumstance, or device. This might include someone with a long-term visual or hearing impairment, or someone relying on assistive technology to navigate online. Why is...

Subscribe to our Maximum Impact newsletter

Want to make an impact too?

Leave us your details and we’ll be in touch to have a chat about how we can help.

Contact Form - small