Submit News Alternative Tip Form

Web App Shortcuts To Get New Look in Chrome, Chrome OS

chrome os hosted icons

Far right: generated YouTube icon

The Chrome team is working to improve the appearance of web-app shortcut icons on both Chrome OS and the desktop — but why?

When creating an ‘application’ from a web page Chrome attempts to create an icon for it using the favicon — the small icon you see in the corner of a tab next to the page title, or if the site specifies one, the ‘apple touch icon’.

For the most part icons for ‘hosted apps’, as they’re known in Chrome speak, look fine when using the latter of these: they’re crisp, clear and identifiable. But site favicons are smaller than the size of app shelf icons on Chrome OS and the standard shortcut size on Windows or Linux, so scaling these up results in unsightly, distorted and pixelated images.

‘But they look okay to me!’ you might say. And that is true: the majority of popular websites do provide decent ‘app shortcuts’ icons when created through Chrome’s ‘create website shortcut‘ feature.

But some don’t.

To solve instances where the favicon is either not available or too small to scale up with decent results, the Chrome team has implemented a new ‘icon generator’. The aim of this is to create a visually pleasing alternative icon based on the name of the site and the dominant colour of the (unused) favicon.

  • Chrome creates a rounded rectangle and fills it with the dominant colour of the favicon
  • Inside this it draws the first letter of the website title (e.g., ‘O‘ for ‘OMG! Chrome!, ‘T‘ for ‘The Guardian’)
  • This letter is either black or white depending  on the favicon colour

A similar, though not identical, approach is used in Gmail to display contacts with no avatar, while the Coast iOS browser from Opera also generates icons based on title and favicon where hi-res images are not available.

The change is set to roll out in an upcoming development channel release of Chrome OS and Chrome on the desktop. It’s also intended that Chrome for Android will employ this approach when creating home screen shortcuts.

Image Credit: Sebastien Gabriel
  • Miguel Ortiz

    That’s actually very clever. Well done Chrome Team.

    • stri8ed

      The problem is, how do you distinguish between multiple apps that start with the same letter, and share a similar primary color?

      • alvaro guzman

        Maybe…. You have an example?

  • Sebastiaan Franken

    It’s a real shame we can’t use SVG’s as a favicon, that would save the Chrome team some headaches since SVG scales beautifully (at least the SVG’s I’ve handled so far)

    • The site would still have to provide a SVG icon.
      This is for sites that don’t even bother to provide 128×128 or larger favicons.

      • calden74

        You can add whatever icon you want by editing the apps xml file, just like in Linux, you will need to set the Chromebook to developer mode, obviously, which is kind of annoying do to the bootup lag time.

  • Chrome on desktop doesn’t use “apple touch icon” it actually uses the standardized icon sizes spec or just grabs the large size icon from favicon.ico if provided (Chrome for Android will later only do this also).

  • mr Dave

    Ugly non-descriptive icons!!! I hope they don’t use these!!!

  • pieman

    if a websites name is “the _______” they should use the begining letter of the second word to help clarify.

  • LiamTHX

    Quick question: how is it that you have a taskbar-type thing in the screenshot above? Mine’s all transparent and ugly.

  • LiamTHX

    Also, “When creating an ‘application’ from a web page Chrome attempts to create an icon for it using the favicon — the small icon you see in the corner of a tab next to the page title”
    What do you mean by this? How do you make an app from a web page and have it use the favicon?

  • like Russell replied I’m stunned that a mom can profit $8748 in a few weeks on the internet. pop over to this website on `my` `prof1Ie`