Make Google Chrome "Application" Windows Use High-Quality Icons in Windows 7

Question

Whenever I use Google Chrome's "Create Application" shortcut (which I heavily use, and recommend), the icons shown on the Windows 7 taskbar are really blurry, probably the result of the 16x16 favicon being stretched out.

I'd like to be able to replace these with another, high-quality icon, but even when I replace the cached file, it doesn't update for some reason.

For reference, here's the path to the icon, for Gmail, at least. I'm also using the latest Dev channel version of Chrome.

%USERPROFILE%\AppData\Local\Google\Chrome\USERDA~1\Default\PLUGIN~1\GOOGLE~1\mail.google.com\https_443\icons#desktop\

Answer 1

This might not satisfy you, but it at least explains where it comes from.

The Chrome/Gears API says the following:

desktop.createShortcut('Test Application',
                       'http://example.com/index.html',
                       {'128x128': 'http://example.com/icon128x128.png',
                          '48x48': 'http://example.com/icon48x48.png',
                          '32x32': 'http://example.com/icon32x32.png',
                          '16x16': 'http://example.com/icon16x16.png'},
                       'An application at http://example.com/index.html');

icons - An object containing one or more of these named properties: 128x128, 48x48, 32x32, 16x16. The value of each property must be the URL of a PNG-formatted image with dimensions matching the property name. A data URL containing base64-encoded PNG data can also be used.

So I guess right now it just uses something that's on the website where you link to. If they don't have a high quality version, you get the ugly one you mention. Replacing it would require you to change the link inside the shortcut.

Since this is already starting to get a tedious job, it's probably better to follow these steps:

Step 1: Save the icon on your computer - You have already done this successfully I believe :) - In your browser's addressbar, type in the domain of the website, followed by the text "favicon.ico" For example, if you want the icon for the Yahoo website, the address to type is "http://www.yahoo.com/favicon.ico". Similarly, the Google icon can be found at "://www.google.com/favicon.ico". - Once you type in the address specified above, a page will load containing only the icon for the website. - Right click the picture and choose "save picture as.." - Save all the icons in a central folder, say "My Documents\My Icons"

Now you have a permanent copy of the icon. The next step is to associate it with the shortcut.

Step 2: Associate the icon with the shortcut - Right click on the website shortcut on your desktop - From the popup menu that appears, choose "Properties" - In the dialog box that appears, switch to the "Web Document" tab. - Click the "Change Icon..." button present there. - This will popup the Change Icon dialog which will allow you to browse for and select the saved icon file. - Then click Ok a couple of times and exit all the dialogs.

This probably requires Chrome to be your standard browser to open Web Documents with though!

With special thanks to Theta-ga

Answer 2

It looks like a current Dev channel thing. With the current release and Beta versions you don't get a seperate taskbar icon in Windows 7 - they just stack behind the standard Chrome icon. Looks like they're half way there with the Dev.

Answer 3

This might be your best bet for sites that don't offer the correct size icons. I haven't fully confirmed that this works because I'm not on the dev channel.

Go to a dataUri Generator, upload the 128px PNG that you want as an icon. Copy the dataUri text for use below.

In Google Chrome on the page you want to create an app shortcut for press <CTRL>+<SHIFT>+J, click the second icon from the left (Show Console) and paste in the following. Make sure you replace the datauri and description below. Enter will execute it and you should see the gears application shortcut window.

window.google.gears.factory.create('beta.desktop').createShortcut(
   document.title, window.location.href, {'128x128': '**dataUri**'}
   ,'**description**');

The other option is to appeal to the web developer of the site to add these simple extra meta and link tags to their site.

Also if you really want to get fancy I guess you could create multiple dataUri's with each of icon sizes like specified in Ivo's answer above.