Everything about favicon, Apple touch icon and RealFaviconGenerator
Author: Philippe Bernard
I'm a web developer and the author of RealFaviconGenerator. I created this site because I felt frustrated when I tried to generate the favicon of my previous web project.
The first question was about the platforms you would like RFG to support. The winner is… the Open Graph image, used by Facebook when you share a page.
Beyond the raw results, the social networks are the undisputed winners. Most votes for Coast and Yandex were from people who voted for everything. Whereas many feedbacks were only for OG and Twitter, or OG alone.
Options
Three options were proposed:
Small pictures: RFG resizes pictures as needed to generate the icons. Regarding small icons (16×16 and 32×32), it is sometimes better to edit them manually, or to draw them pixel-by-pixel. RFG would allow you to upload your very own custom 16×16 and/or 32×32 icon(s).
Smaller package: RFG generates 20-something icons and about 15 lines of HTML. Many people don’t want to clutter their HTML with so much code. RFG could create much less with very few side effects.
Embedded instructions: The instructions to setup your favicon (and the HTML) are given by RFG web site. The Zip file itself contains only the images and related files. In other words, the package is not standalone: if you leave RFG too soon, you end up with a useless archive. The package could contain a text file to remind the instructions.
Embedded instructions is the most wanted option. I thought most people would want a smaller package, while I considered the embedded instructions as a nice-to-have. I was wrong, and that’s the point of asking for opinions.
Tools and framework
This is my favorite part. There were less votes here, only 17. I was not surprised: the form was in the result page, where the user is presented the material he came for: the package and HTML code. Most people probably didn’t want to hear about anything else. But I could feel the interest is real. Unlike the platform and options forms, where several users selected everything, all votes here were for one tool or framework. So I could really hear a visitor asking for his favorite solution.
The winner is Grunt, by a short advance. Gulp and Ruby on Rails were nearly as popular. Symfony got no vote, but that’s okay. The test was run for only 3 days (1st day was a Sunday) and the question was asked to people who didn’t come for this.
I’ve just started something I should have done long ago: survey users for direct feedback.
During a few days, you will find three forms right in the interface of RealFaviconGenerator. The first one is about the supported platforms.
The second one is about options. Here you will find usual suspects (at least from my point of view).
The third one is for integration. RFG generate HTML, but this is not the only way. What do you use? Build tools such as Gulp? Framework like Ruby on Rails?
Apple released Mac OS X “El Capitan” a few days ago. Safari comes with pinned tabs, a cool feature to keep some sites around. The feature itself is not new, but Safari makes it really neat (at 0:48). Guess what? There is a new icon. RealFaviconGenerator lets you design yours in seconds. Time to generate your favicon again!!
The new icon for Safari’s pinned tabs
No, Apple didn’t recycle one of the numerous existing icons, such as its famous Touch icon for iOS. It specifies a new, proprietary icon. The big news is its format: SVG. For (arguably) the first time in favicon (and derivatives) history, a vector format is used instead of a classic bitmap format, usually PNG. I’m not sure Apple chose it for its scaling ability. Tabs icons are small. But it is probably easier to play with colors with a vector image. Which Safari does when a tab is rolled over or selected.
Unlike most favicon-related images, this new icon comes with design requirements. Well, one requirement. The icon must be monochromatic. Black with a transparent background. The icon is completed by a “theme color”. When the tab is not selected, Safari renders the icon in grey. When the tab is active, Safari uses the theme color. So it should probably be the dominant color of your original icon or logo to make it consistent with your site.
Support in RealFaviconGenerator
Creating this icon can be more challenging than usual. Many times, icon design takes place in the bitmap world. Gimp in my case. Creating an SVG picture out of a flat bitmap can be a daunting task. As always, RealFaviconGenerator’s mission is to provide no-brainer settings to get the job done in seconds.
Transparent favicon? Use Silhouette
If your icon has a transparent background, using its silhouette can be a winner. Take the demo icon:
Its silhouette fits the pinned tab just nicely:
But what if the original picture is not transparent, or if its silhouette is not relevant? Hum… We need something else. Take RFG’s logo:
Its silhouette is quite useless:
Monochromatization
Yep, “monochromatization” brings results when you google it, although it has nothing to do with graphics. Sorry.
The other option is to first turn the picture into a black-and-white version. You can test various thresholds in order to find the perfect setting for your particular case. Although the results vary from an image to another, there is normally a threshold that works well. During my tests, no picture was left behind.
What I get with RFG’s logo:
Very low thresholdLow thresholdMedium thresholdHigh threshold
Whatever the settings, RealFaviconGenerator uses potrace to produce a genuine SVG picture. This tool is impressive.
In order for the editor to be as reliable as possible, the images used as previews are first vectorized with potrace, then converted to PNG again. This way, you know that what you see in not a mere promise but the actual outcome.
With 60,000 active installs, Favicon by RealFaviconGenerator WordPress plugin is the most favicon-related WordPress plugin. Since a few months, the plugin looks for updates and notifies you whenever the favicon should be refreshed.
There is new stuff. The plugin is now able to update the favicon automatically. Next time Apple introduces a new Touch icon resolution for its latest iPhone, your favicon will be regenerated overnight.
This feature relies on the non_interactive_request parameter of the interactive request API. Each time you use the plugin to create a favicon, it not only installs the generated package. It also saves all settings: the iOS design, the compression rate… So whenever an update is available, the plugin is autonomous and can create your favicon update, yet taking advantage of the improvements of RealFaviconGenerator.
Is it the end of manual updates? Nope. Some updates require human interactions. For example, RealFaviconGenerator will someday supports Coast by Opera. This update does not make sense in an automated fashion. It requires you to pick the design that matches your icon and site. So still expect to work on your favicon again from time to time.
Until now, RealFaviconGenerator consisted in two universes:
The interactive API, aka “User interacts with the UI to create a favicon”
The non-interactive API. Post a favicon generation request to the web service and get your package a second later
Although similar, these two domains used to never speak to each other.
This time is over. Now, when you use either the interactive API of simply RealFaviconGenerator as a web site, the non-interactive request is never far.
RealFaviconGenerator, the web site
The regular way to use RealFaviconGenerator is accessing it via the web browser. A few clicks later, you are ready to download the favicon package. Until today, that was the end of the story. But you can now get the equivalent non-interactive API request:
Follow the instructions and you get a working API request.
Interactive API
The interactive API is not different of the classic web site: you get the same favicon editor and same options. When the client is back in control (for example the Favicon by RealFaviconGenerator WordPress plugin), the transaction is over.
But there is more: the API client receives the equivalent non-interactive API request. It can reissue the request as is to create the favicon again.
What’s next?
Expect some updates in the WordPress plugin in the next few weeks! Grunt and Gulp plugins are also on the TODO list.
Five days ago, Kacper Szurek sent me an email to warn me about a security issue in the WordPress plugin. It was fixed a few minutes ago. Please update to v1.2.13.
How dangerous this breach was? It would allow an attacker to trick the authenticated administrator of a WordPress site to download and install a faked favicon package. Because the package contains HTML code to be added to the header of each page, this attack could basically lead to code injection. Such attack would be quite sophisticated: the attacker needs to target a blog, contact its administrator and trick him to make him click on a forged URL.
Thank you very much Kacper for having reported this one!
Favicon caching is a classic issue when updating your existing icon. Here is the story: your web site had the same favicon for months or even years. And now you update it. Great! Except that all your regular visitors still see the previous version. Oh.
The well-known workaround is to version the favicon files by appending query parameters. For example, /favicon.ico?v=2. Now, RealFaviconGenerator lets you do just this.
RealFaviconGenerator adds versioning to all files, including the ones referenced by the various manifests. You can use whatever value that fits your web project, but the hash of a timestamp is offered by default, thanks to HashIds.
Alright. Favicon is not the most sensible topic around. Plus this icon is expected to be published and viewed by as much visitors as possible.
Or not. Maybe you’re doing some experiments with RealFaviconGenerator. Maybe you work on a secret project and you don’t want anyone to know before the D day. In any case, you need privacy. Now RealFaviconGenerator supports SSL.
The story of this new feature is a bit particular. It all started with a support request for the WordPress plugin. Apparently some plugins, such as the CloudFlare Flexible SSL plugin, rewrite the URLs to always keep the WordPress admin in the safe SSL world, even when he leaves his dashboard. And since RealFaviconGenerator didn’t support SSL until now, it was either CloudFlare or RFG.
Adding SSL support way the best way to fix this. Plus everybody expect SSL nowadays, including me. So here it is.
But something else happened. A few days ago, the press revealed that the NSA has stolen thousands of SIM keys in order to spy mobile phone conversations. To do this, the NSA hacked Gemalto, a company where I used to work (strictly speaking I was part of Trusted Logic, acquired by Gemalto a few years ago). I was working on SIM cards and even if I didn’t see a single real life SIM key, this event has a special meaning to me.
So now SSL is on and the timing is perfect. Your favicons are safe. This won’t make you sleep better, but at least this small issue is fixed.
Until now, RealFaviconGenerator created HTML5. Meet our two new friends: XHTML and Jade.
XHTML is a bit old-fashion nowadays, but many people still need it. The primary difference between HTML and XHTML is the slef-closing markup syntax. XHTML demands a final slash (<markup/>) whereas HTML doesn’t (<markup>). XHTML supportis not strict, though. The sizes attribute is not supported by XHTML but RFG still produces it. The main advantage of this code is the trailing slash which absence annoys developers who use editors with error detection on.
Jade is the other new format. Its elegant syntax makes HTML code shorter. This template language is often used with Node.js.
You know what the favicon is. This is this small icon in each browser’s tab.
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
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?
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 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
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.
