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.
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.
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…
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.
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 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.
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.
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.
Yep. RealFaviconGenerator now displays an ad at the top of each page. I don’t feel the need to justify this decision but I’d like to comment it.
First, let’s talk about money. Since June 2014, RFG has a Paypal Donate button for users who want to support the service. I’ve already thanked them personally but let me seize the opportunity of this post to say:
Thanks you guys!!!!!
Seriously. This is amazing. I picture a user who just spent a minute or two on RFG and, while downloading his package, actually goes through the Paypal process to give money for something free anyway. Free and small: let’s face it, RFG saves only an hour of your life, not your life itself.
How many? Well, I didn’t make serious stats. RFG received nearly 100 donations in 8 months, with a slow down recently. I think regular users willing to give have already did it. How much? I think the record was set to $25. Wow. Most donations are something like $5. In the end, donations barely cover the hosting costs.
I received a mail last week suggesting to accept bitcoins, which I did. Now I’m waiting for the millions.
To conclude with donations, I must admit this is not my preferred way to earn money from a web site. One user out of a few thousands gives a significant amount of money while all the others get the service for free. To this respect, I like the spirit of Flattr, a micro donation service. As a consumer, you allocate a monthly donation budget: $2, $4… your choice. Each time you want to support a web site, a blogger, a Youtuber or whoever, you Flattr-like him. At the end of the month, your budget is divided among the people you liked. I would find way fairer to get a few cents from 1% of my users instead of 5$ from 0.01% users. Unfortunately, Flattr didn’t receive the audience it deserves (yet?).
Ads are more in line with the previous paragraph. Of course, this is not “giving” anymore. But each user pays with the little bit of attention the ad requires. A really small prize paid by everyone (you don’t use AdBlocker, do you?).
I discovered CarbonAds in the Bootstrap web site. Their ads were light, non-intrusive and technical-oriented. So I put this in my “maybe later” list. A few days ago, I contacted CarbonAds to give it a try. Some code to copy/paste, some style to add and here it is. Now I’m looking at the stats.
Maybe I’ll test AdSense, too.
Well, I don’t know. At least there are two things I’m sure of.
First, I would like to make money from RFG. I think the service is useful. It fills a gap in web development. A small gap. So it won’t make me rich, but I want my small bucks.
Whatever happens, RealFaviconGenerator as it is today will remain free. In other words, whatever you do for free with RFG today will still be free tomorrow. No premium options, no API calls limit or stuff like this. This is a question of ethic. If I had planned to “close” the platform at some point, I would have had to mention it. This reminds me of MakerBot and their switch from open-source hardware to closed-source. Part of the community felt betrayed. Going from closed to open is obviously okay, and keeping closed is okay, too. But giving then taking back is not. And definitely not something I will do.
From the beginning, RealFaviconGenerator supports Android Chrome. Well, that was minimum service. Sure, the required icon was generated, but that was all. In particular, there was no “RealFaviconGenerator’s touch”, which is the ability to design an icon for that particular platform. Your master picture was used as is by Android.
Until now. RFG now provides full support for Android Chrome.
The icon editor is familiar: a set of sensible settings are offered so you can get the best of your icon and make is fit any Android device home screen:
Use the icon as it is. Easy one.
Apply margins and an opaque background. Classic. This one is especially useful when you have a picture with square corners. Because Android crops them, adding margins is a great workaround to keep the precious corners.
Drop shadow. Why a drop shadow? To copy Google. Look at the official Google apps: Gmail, Youtube or Chrome itself. They all have a thin drop shadow. You can make your icon stand out with the same effect.
In addition, RFG supports the new manifest introduced in Android Chrome M39. With this manifest come 6 icons. Apparently Google is willing to compete with Apple and its numerous Touch icons. As an option, you can also define the other fields of the manifest: web site aspect when it is launched from the home screen link, screen orientation, etc.
Older versions of Chrome are supported: the 192×192 PNG icon is still generated and declared in the vanilla HTML.
In the end, Google did a great move with the new manifest. It finally allows us to define a platform-specific picture for Android Chrome, which is good news. Android is different of desktop and iOS. Wanting a particular design for the home screen icon make perfect sense. That point has haunted me for some time and I’m glad I’m on my way for resilience 🙂
The Android Chrome icon editor is the blue print for the next improvements in the UI. In particular, icon design settings can be used along with a dedicated picture. This is a long due TODO for iOS and Windows.
I hope you will like this new addition. Let me know what could be improved!
iOS lets you define a startup image. When your visitors add your web site to their home screen, this image is displayed for a short time when the home screen link is clicked.
Now you can create this image with the help of the non-interactive API. Well, “this image” actually means “these 7 images”. And the HTML code is not trivial. Definitely not something you want to deal with a few hours before the release of your next web project.
The RealFaviconGenerator non-interactive API was released a few weeks ago. At that time, the Grunt plugin was its first client and. Its features were limited to the options available in the classic UI: iOS and Windows 8 icons design. That was long ago and 5 new platforms are now supported by the API.
Until now, the icon used by Android Chrome was the original master picture, without modification. The original plan to apply a specific design to Android was to use the 192×192 PNG icon, with a few issues. Like the fact that several browsers, like IE11, can use this picture if it finds it.
RFG’s API generates this manifest along with its 6 icons. The picture can be designed with a background and margin, like the iOS icon. It can also have a slight drop shadow, like several of the official Google apps icons.
Firefox OS lets you turn your web site into an app. Add a manifest, submit it to the Firefox Marketplace et voilà! No surprise, a Firefox application comes with its own set of icons. Firefox defines a set of guidelines and RealFaviconGenerator implements them all: the square icon, the circle icon, apply an overlay, etc.
Do you know Yandex Browser? Me neither. However, it is quite popular in Russia. An interesting option if you target this country. Yandex Browser comes with a kind of super-bookmarks page named “Tableau”, similar to the Speed Dial of Opera. This platform, too, comes with a manifest. No hassle, RealFaviconGenerator takes care of everything.
Open Graph image aka “Facebook picture”
The Open Graph image is used by Facebook when you share a web page. Without an explicit declaration, Facebook hopes for the best and picks a picture of the shared page. Often not what you wanted. Although this is not a favicon, it is really important to have this image and RealFaviconGenerator offers the opportunity to create one. Useful if you had no plan for this image.
If you want to play with these new features, give a try to the non-interactive API. Not interested in the API? You will see these new features appear in the UI in the next few weeks. Come back soon!