RealFaviconGenerator Archives - Page 2 of 3

Safari’s pinned tabs support (Mac OS X El Capitan)

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:

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.

Enough talking, time to refresh you favicon!

WordPress users: your favicon up-to-date. Automatically.

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.

Web site, interactive API and non-interactive API now work together

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.

New favicon? No problem!

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.

This feature is also available via the non-interactive API.

Get your favicon in HTML, XHTML or Jade

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.

Is this an ad?

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.

Donations

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.

The future

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.

Ok, so, do you like the new ads? 🙂

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.

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.

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.

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!

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!

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:

The 196×196 icon for Android Chrome became 192×192.
This icon is now designed after the regular favicon, not the iOS icon. This was issue #26.

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.