Welcome, Android Chrome!

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.

Android Chrome editor - Home screen

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.

Android Chrome editor - Options

Older versions of Chrome are supported: the 192×192 PNG icon is still generated and declared in the vanilla HTML.

Also new with Android 5.0 Lollipop is the theme color. When listing the running apps, Android lets you define the color that fits your site best.

Android Chrome editor - Task switcher

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 startup image now available via the API

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.

Special thanks to Taylor Fausak for his great iOS startup image reference! The official Apple docs are clearly outdated.

Oh, and if you think the photo used to illustrate this post is below standards: just try to take a screenshot of an actual startup image. The image appears for a second, at most. It is awfully hard! 😉

Five new platforms are available via the non-interactive API, coming soon in the UI

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.

Android Chrome

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.

Android Chrome M39 (still in Beta) introduces a new manifest file. Good news: this manifest comes with dedicated icons declarations. Problem solved!

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.

Coast by Opera

Coast is a popular browser of iOS. It defines a 228×228 PNG icon. With a trick: at time of writing, Coast… does not use this picture. But its support is planned for the next release.

Firefox OS

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.

Yandex Browser

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.

So what?

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!

GruntJS plugin for RealFavionGenerator is now available

The promise of RealFaviconGenerator is to let you create a multiplatform favicon within minutes, the same amount of time we needed 10 years ago when a single favicon.ico file was enough. This mission is good enough for many web projects where the favicon creation can be a one-time operation.

However, web development practices evolve and even the most static web projects now make use of build tools to automate certain tasks. CSS and JavaScript files got merged and minified. HTML pages are moved. Different versions of the same site are created. GruntJS and Gulp are the tools of choice to perform these tasks.

RealFaviconGenerator is now available in GruntJS as a plugin: grunt-real-favicon. This plugin lets you integrate RealFaviconGenerator to your web project workflow. For example:

grunt.initConfig({
  real_favicon: {
    my_icon: {
      src: 'pics/high_res_logo.png',
      dest: 'dist/path/to/icons',
      icons_path: '/path/to/icons',
      html: ['dist/index.html', 'dist/about.html'],
      design: {
        ios: {
          picture_aspect: 'background_and_margin',
          background_color: '#654321',
          margin: 4
        },
        windows: {
          picture_aspect: 'white_silhouette',
          background_color: '#123456'
        }
      },
      settings: {
        compression: 5,
        scaling_algorithm: 'NearestNeighbor'
      }
    }
  }
});

If you know GruntJS and RealFaviconGenerator, the code above should be familiar.

The plugin is just new. Expect it to evolve. I hope to receive user feedback and make it the reference for favicon generation with GruntJS!

Say hello to the iPhone 6 Plus and its 180×180 icon!

The iPhone 6 was released a few hours ago. Guess what? The iPhone 6 Plus and its large screen comes with a new Apple Touch icon: a 180×180 picture.

RealFaviconGenerator was just updated to provide you the latest set of icons to support all iOS devices. Sure, unless the iPhone 6 Plus becomes an instant hit, there is no hurry to update…

Update for Android – RFG’s package v0.8

Version 0.8 of the RFG’s package was released yesterday. It contains two fixes in one:

If you use the WordPress plugin, you may have already been notified of the update.

What’s next? Regarding Android, the next step is to let you design an icon dedicated to Chrome. Android look and feel is different of desktop platforms and iOS, so I think this feature make sense.

Android Chrome and its favicon

Favicon is more or less complex from a platform to another. I think Chrome for Android is the trickiest.

With iOS, things are not that easy but clear: Apple defined the Apple Touch icon, a proprietary mechanism. This approach makes sense. After all, when iOS was introduced, it required new, high resolution icons that did not exist anywhere else. As a result, we have a somehow proprietary markup with a specific apple-touch-icon relation attribute. The Apple Touch icon comes with an advantage: because it is specified for iOS, Apple can enforce design guidelines. Solid background, rounded corners, etc.

Unlike iOS Safari, Android Chrome (Chrome for short) does not define any proprietary mechanism. That surely sounds good. No one likes vendor-specific stuff. But this approach comes with a cost. More of this below.

As indicated in the specs, Chrome relies on two sets of icons:

  • Apple Touch icon. Yep, the primary choice for Chrome is (… was) the icon defined for its competitor. This is a sensible behavior: with so few support for high resolution icon, supporting the famous Apple Touch icon gives Chrome the best chance to find a suitable icon.
  • Two 192×192 and 128×128 PNG icons, with a preference for the 192×192 icon. These icons are based on standard HTML5 markups.

It is easy to figure out Google’s strategy: introduce a dedicated 192×192 high resolution icon and fallback to the Apple Touch icon when not available. Pragmatic, as it should be. But the devil is in the details, and when you try to create the ideal favicon, things become quite tough.

192×192 or 196×196

A small detail as a starter. I started to study Chrome’s icon for almost a year. In the beginning, it was a 196×196 icon. When I started this article, I re-read the specs, something I had not done for a while. I realize there was a change: 196×196 became 192×192.

As we will see below, this is a major change because today’s Chrome (version 37) does not use the 196×196 PNG icons that were designed especially for it.

Apple Touch icon or PNG icon

Since Chrome supports two kind of icons, which one does it use? Looking at the compatibility page of RealFaviconGenerator:

Android Chrome version Favicon Bookmark icon Home screen icon
31 16×16 PNG icon 152×152 Apple Touch icon 152×152 Apple Touch icon
32 196×196 PNG icon 152×152 Apple Touch icon 196×196 PNG icon
35 32×32 PNG icon 152×152 Apple Touch icon 152×152 Apple Touch icon
36 160×160 PNG icon 160×160 PNG icon 160×160 PNG icon
37 (latest version at time of writing) 160×160 PNG icon 160×160 PNG icon 160×160 PNG icon

Apparently, Google finally set its preference to the PNG icon, if it can find one.

This brings consistency: let’s design a PNG icon and Chrome will not pick anything from Apple. But now comes the trick. Sure we can design an icon for Chrome. But as the PNG icons are declared with standard HTML5, other browsers can use it, too. This is what happens with the current pictures and code generated with RealFaviconGenerator (version 0.7). Because the Chrome PNG icon is quite large, some browsers, such as IE11, consider it as a good choice. This is no good news when the author of RealFaviconGenerator decides that the Chrome icon must be designed after the iOS icon.

Which PNG icon?

According to the specs, Chrome picks the 192×192 icon if it finds it, the 128×128 icon otherwise. Is that the case? To demonstrate this, I generated all PNG icons from 16×16 to 256×256 and declared them:


<link rel="icon" type="image/png" href="/16.png" sizes=16x16>
<link rel="icon" type="image/png" href="/17.png" sizes=17x17>
<link rel="icon" type="image/png" href="/18.png" sizes=18x18>
...
<link rel="icon" type="image/png" href="/255.png" sizes=255x255>
<link rel="icon" type="image/png" href="/256.png" sizes=256x256>

With this code, Android Chrome uses the 192×192 icon, as expected. Good.

What if it is not present? Chrome selects the icon just below: 191×191. This make sense, although the specs say nothing about this. And it goes on and on. Delete everything from 129×129 to 192×192 and Chrome uses the “low resolution” 128×128 icon. Delete it and Chromes takes the 127×127 icon. In the end, if you offer Chrome a 16×16 icon and icons larger than 192×192 (eg. 193×193, 194×194, etc.), it uses the 16×16 icon.

Thus, this general rule about Android Chrome 37: Chrome uses the same icon as the favicon, bookmark icon and “Add to home screen” icon. It picks the widest PNG icon it can find which is no larger than 192×192.

The goal of this post is to prepare a fix for issue #26. In the next version of RealFaviconGenerator, Chrome’s icon and classic PNG icons will be correctly dispatched.

Favicon update notification for WordPress plugin

With the help of RealFaviconGenerator’s WordPress plugin, your WordPress blog has a shiny favicon, compatible with all platforms. Congratulations! But will this still be true in a week? A month? A year? Fear no more. The plugin now automatically checks for updates and let you know whenever a new version of the generated pictures and code is available.

WordPress plugin favicon update notification

Ok but does the update worth it? Follow the white rabbit and find out.

Favicon update change log

What will be the next release of RealFaviconGenerator? Safari for OS X Yosemite maybe? Stay tuned!

Now set the bookmark default name

Whatever the browser, when bookmarking a page, its default title is the title of the page itself. This default value perfectly makes sense. However, iOS and Windows 8 let you set an “application name”. Well, technically speaking, nothing differentiates a web app from a web site, but the idea here is to make your web app sound like a native app (RealFaviconGenerator will only help you scratch the surface here).

Sample WIndows 8 Tile

Two RFG WordPress plugin users suggested to set this app name directly from RealFaviconGenerator. This feature perfectly made sense so here it is! Thank you both for your contribution.

App name option

What about Android? There is no such option in Android Chrome, the title markup is the reference.

That was issue #49.

Check your favicon from your WordPress admin interface

Wanna check your favicon? Don’t leave the comfort of your WordPress administration interface anymore. You can now trigger the RealFaviconGenerator’s favicon checker right from Appearance > Favicon.

Invoke the favicon checker from the WordPress administration interface

Install the Favicon by RealFaviconGenerator WordPress plugin to take advantage of RealFaviconGenerator in your WordPress blog.