Based in Redhill, Surrey, UK

0333 9900 106

How smart is your Favicon?

Favicon design

Favicon design is a tiny graphic but it has huge importance

The ‘Favicon’ has been around on the web for a long time, even if you don’t know the name. Your Favicon design is the small icon which appears in a web browser in various places, representing your website. For example, in Chrome it appears on the tab showing the web page title, and in both Chrome and Safari it appears next to the site or page name in the bookmarks lists.

FactorEstudio Favicon
FactorEstudio favicon examples

Most websites have these, although they may have been set up years ago and might look blurred or illegible. As with everything web-related, things move on, and there are good reasons to review your Favicon design. For example, although Favicon designs were originally tiny, to appear in low-resolution address bars, nowadays they can appear quite large and in high-resolution.

iOS devices use a high resolution Apple touch icon to illustrate bookmarks and home screen shortcuts. A first generation iPhone needs a 57×57 picture, whereas a brand new iPad with Retina screen looks for a 152×152 picture. Android Chrome also use these pictures if it finds them. Windows 8 takes another route with a dedicated set of icons and HTML declarations.

Favicon design is not only a matter of pictures with different resolutions. For example, the classic desktop favicons often use transparency. But iOS requires opaque icons. And Windows 8 has its own recommendations.

Google search results display your Favicon

Google is rolling out a slightly new look to its mobile search results, and this small change is important. In Google’s announcement in May 2019, you’ll see that the green URL line is now black and has been moved up above the headline, and alongside it you’ll see the site’s ‘favicon’.

This means that an eye-catching favicon design is more important than ever. Google says: 

“With this new design, a website’s branding can be front and centre, helping you better understand where the information is coming from and what pages have what you’re looking for. The name of the website and its icon appear at the top of the results card to help anchor each result, so you can more easily scan the page of results and decide what to explore next.”

The announcement says the change is “coming first to mobile”. That suggests we’re going to see it on desktop search, which is even more important for most of us.

What should you do to update your Favicon design?

First – check what you’ve got with one of the online tools, like this. Many people will discover that their desktop browser icon looks a little blurry, because they haven’t added larger sizes in recent years. Even more may find that their iOS and Android touch icons are missing completely. If so, your website/graphic designer should review your Favicon design immediately.

Top Tip

Save hours of research and image creation with RealFaviconGenerator and its companion WordPress plugin. In a matter of seconds, you can generate all the icons you need for desktop browsers, iPhone/iPad, Android devices, Windows 8 devices, and more.

Save 20% on Favicon design

Just £60 +vat (usual price £75 +vat). Includes style and colour options, tested for legibility and impact. Supplied as a large high resolution PNG file to you or your website developer to generate all the icons you need via RealFaviconGenerator.

Call 0333 9900 106 or Send us an enquiry and quote Promo Code: Favicon20