The United SVG Favicon Myth

In 1999, a single favicon.ico was all it used to take to have a full-fledged favicon. Life was good. Almost 20 years later, RealFaviconGenerator creates 10 files for the very same task. It used to be a lot more. Whatever it is on Twitter or StackOverflow, people are wondering if this figure could be lowered. And suggest the obvious solution: a single SVG image.

This idea is not as good as it sounds.

Why you want a united SVG image

The case for a single SVG image is straightforward.

Creating a single image is easier and faster than building eight of them or more. Actually, if the logo of the company already exists as a square SVG image, you can use it as is. Look Ma, no dedicated favicon image!

In the event of a logo change, all copies must be updated. Multiple copies of the same logo make the process error prone, although tools such as plugins for WordPress, Gulp or Ruby on Rails reduce the pain. But a unified image cannot be challenged.

SVG images are compact. Take RFG own favicon images. The GZIPed SVG is only 2.23KB, slightly less than the 32×32 PNG icon (2.34KB) and clearly lighter than the Touch icon (11.8KB). Only the 16×16 PNG outperforms it, with the ridiculous size of 1.22KB.

And finally, as a software engineer, I value the idea of a single file. DRY and all.

Why you shouldn’t want a united SVG image

Because of design.

iOS vs Android

Let’s compare iOS and Android. The home screen icons of iOS are opaque squares with rounded corners. These are not guidelines but rules enforced by iOS: it rounds the corners itself and fills transparent regions with black. For example, if the RFG logo is used as is as a touch icon, its corners are rounded by iOS and the result is rather poor (in particular for the bottom corners):

You’d better make sure your touch icon complies to iOS way of doing things.

Now, Android. Unlike iOS, Android has no enforced restrictions. Even when it transforms your icon, it makes sure to not break it. Good. You can re-use your touch icon as is and Android will handle it nicely.

But this is not the end of the story. Although Android plays the nice guy with icons, it clearly has opinions about them. Android 8 is in adaptive icons, with icons of various shapes, depending on the device. Take this screenshot:

Here Android enforces round icons. The Google Maps icon was designed especially to match this criteria and is thus displayed as is. Photos and Gmail are not round so Android transform them and the result is good looking. But neither Photos nor Gmail original icons are opaque squares. They make use of transparency to match their respective logo shapes. This is not new. Back to Android 6, Google native app icons were already coming in all shapes but square.

Conclusion: for optimal results and seamless integration in iOS and Android, you should prepare two icon designs. Not one.

As an example, this is what Brandon Semilla did:

iOS, Android, macOS…

Different designs, alright. How many?

iOS

As discussed above, opaque image with corners that can be rounded without breaking the design.

1 design.

Android

Already raised above. Plain logo with transparent background.

2 designs.

macOS Safari

Although Safari dropped the favicon in regular tabs, it introduced the mask icon for pinned tabs.

This is a monochromatic SVG icon, which Safari fills with grey when the tab is inactive or with a custom color when active.

Does this icon require a particular design? Well, it can be automatically derived from the original icon if:

  • The logo is a natural silhouette
  • It has a clearly dominant color

For example, designers from Airbnb must not have brainstormed for hours about their pinned tab icon:

The demo image of RealFaviconGenerator can be turned into a silhouette automatically, too. But its blue-and-yellow style makes the color choice a design decision:

Often the silhouette also requires a decision. RealFaviconGenerator logo has no natural silhouette:

3 designs.

Windows / Metro

Whatever you call it “Windows pinned site icon”, “Windows start menu icon” or “Windows Surface icon”, a site can come with an icon for the Metro UI style introduced by Microsoft with Windows Phone 7 and later with Windows 8 (classic/desktop and RT).

The icon can fill the tile (starting from Windows 8.1) or come with a background color. In the first case, the touch icon for iOS can do the trick. In the later case, the problem is similar to the one already described with macOS Safari pinned tab. Plus you might consider using a color from the “Microsoft palette”, ie. one already used by native Windows apps.

Because Windows builtin app icons are white silhouettes, you might want to choose this route, too.

4 designs.

Classic desktop design

The only requirement for the desktop favicon is to look good despite of its small size. Most of the time, the web site logo works just great. But sometimes it doesn’t fit the small, square space allocated to the favicon.

For example, ebay’s logo is used as is as the Touch icon:

For the desktop version, a totally new design was created:

Possibly 5 designs.

Conclusion

Yes, the time a single file was enough to implement the favicon is long gone. The same applies to fixed resolution web sites. Remember when web sites shameless used to introduced themselves with “Best viewed in 1024×768”? Favicon did not become (that) more complex. Platforms did.

Alright, RFG still generates 10 files, there is definitely room for improvement 🙂

Favicon – Why you’re doing it wrong

You know what the favicon is. This is this small icon in each browser’s tab.

The most famous favicon
The most famous favicon

Web developers are familiar with the classic favicon declaration:

<link rel="shortcut icon" href="/favicon.ico">

Each web site comes with its favicon. A must have. But wait, what is needed exactly?

The many faces of the favicon in 2015

With the iPhone and so many new devices created during the last 10 years, the favicon is no longer a single 16×16 picture. It has many usages, many sizes and many designs.

The most well-known derivative is the Apple Touch Icon for iOS. This icon is used when your visitor adds your site to his home screen. No Touch icon? iOS generates a miniature of the bookmarked web page and uses it as the icon. Not great.

With and without Touch icon
With and without Touch icon

Android and Windows 8 follow the same trend, each one with its own approach.

With so many buzz around mobile web and responsive design, it just becomes mandatory for the favicon to address these new platforms. Basically, if you still stick to the classic favicon.ico, you’re 10 years behind schedule.

Why is that?

It’s a mess

Creating a single 16×16 icon is easy. But what if we want to support iOS, Android, Windows 8 Metro and desktop browsers? We need 4 picture at a minimum. If we want to do the job completely and address everything (first generation iPhone, latest Retina iPad, Android Lollipop, IE 9, MacOS Safari…), we can create up to 26 pictures. Sounds like we gonna have a great day.

There are not only a lot of pictures. Declaring them is also tricky. With Windows 8.1 and IE 11, Microsoft introduced the new browserconfig.xml. The main purpose of this file is to create “live tiles” and make your Metro tiles dynamic. This is also where you declare your 4 pictures dedicated to IE 11. For example, the 310×310 tile picture, which is actually recommended to be 558×558, for high density screens (but still declared as the square310x310logo picture in browserconfig.xml. Is that clear enough?). Android Chrome M39 also comes with its own manifest. No XML but JSON here.

So we not only have to create a lot of pictures, we also need to learn a lot of stuff. Just to create a compelling favicon. Hum…

Design matters

So, creating 20-something icons is surely not funny, but this is something we can deal with. This task can be automated. Give a script our picture and the sizes we want, it will create them all in no time.

But wait! Creating a multi-platform favicon is not only a matter of size. Each platform has its own design requirements. For example, transparent icons fit the Android home screen well. But iOS prevents them. It simply fills the transparent regions with black, which is generally not what we want.

The Touch Icon of StackOverflow has its transparent background set to black by iOS. Was it intended?
The Touch Icon of StackOverflow has its transparent background set to black by iOS. Was it intended?

We not only have to generate a lot of icons. We have to craft them, platform per platform. Damn.

Google doesn’t help

Nowadays the first step to fix anything is to launch Google. Let’s do this and find the information we need. For example, what are the sizes of the Apple Touch icon? Let’s google “touch icon size”.

The first two results for "touch icon size"
The first two results for “touch icon size”

The first result is from StackOverflow. Exactly what we would expect. Unfortunately, the first answer is two iOS versions behind: it talks about the 144×144 touch icon for Retina iPad running iOS 6. iOS 7 introduced the 152×152 picture, and iOS8 adds the 180×180 picture. You have to scroll to the 4th answer to get it right.

All is not lost, the second result are the Apple specs themselves. End of the story? Not really. The specs were not updated for iOS 8. Nothing beyond 152×152 is documented there.

Okay but what we really need here is a favicon generator right? We don’t care about all these information after all. Google again, “favicon generator” this time.

Google answer for "favicon generator". No self-promotion intended of course :)
Google answer for “favicon generator”. No self-promotion intended of course

Out of the 7 first results, 6 of them only generate the favicon.ico you needed in the pre-iPhone era. Only one covers the whole spectrum. It appears that this is RealFaviconGenerator, the very site you’re visiting and reading right now. I was as surprised are you are.

So Google surely brings the correct answers but we still have to figure them out. “I feel lucky” doesn’t work with favicons.

Conclusion

If you want to master the art of favicon, the Favicon Cheat Sheet is a great place to start. It lists a lot of information in one single place, which is very valuable by itself. Mathias Bynens also does an excellent job at updating his famous article about Touch icons. The RealFaviconGenerator’s FAQ also deals with a lot of tips and tricks and references.

What if you don’t really wanna know everything about favicon, but simply get the job done quickly? Well, you have the next-gen favicon generator option. Which is, by the merest chance, this site. Yes, among 1 billion web sites, this article was just published by the site it was referring to as the best site ever. You didn’t see that coming and nor did I.

Apple touch icon turns black

You’ve just generated a cool Apple Touch icon for your latest web project. Everything is ready and you decide to give it a try by adding the homepage to the home screen of your iPhone. The result is okay but… you can’t remember all that black in the original icon.

Apple Touch Icon turns black
Apple Touch Icon turns black

The reason: iOS forbids transparent icons. And it must have listened for the Rolling Stones hit for too long because it fills the gaps with black.

Bottom line: do not use transparency in your Apple Touch icon. RealFaviconGenerator helps you do just this.