Matt Bailey
Designer & Developer

How To Create An App-Like Desktop Icon For Websites (Single-Window Chrome Instances) On OSX

image

Since Google announced the demise of Reader I’ve been looking for an alternative, and I’ve settled on Feedly which is rather good. It’s sad that Reader has been shut down, but I still need my daily dose of front-end news - if you haven’t done it already, you should check out Paul Irish’s curated selection of front-end feeds.

One thing Feedly doesn’t have though is a desktop app, you have to use your browser, or a smart phone app. Whilst this isn’t a big deal I like having some things running in separate windows that won’t be affected if, for example, I accidentally close my browser by mistake.

Fortunately this is possible to do using a brilliant little shell script. Read on, to find out how.

  1. Download the shell script from here and put it in a folder somewhere, such as ~/Documents/Scripts
  2. From the command line navigate into the Scripts folder: cd ~/Documents/Scripts
  3. Next you need to make the shell script executable from the command line: chmod +x makeapp.sh
  4. Then you can run the shell script like this: ./makeapp.sh

When you run the shell script you will be asked three fairly self-explanatory things:

  1. "What should the Application be called (no spaces allowed e.g. GCal)?"
  2. "What is the url (e.g. https://www.google.com/calendar/render)?”
  3. "What is the full path to the icon (e.g. /Users/username/Desktop/icon.png)?"

Type your response to each question and hit Enter. I found that the last step, where you choose your icon, was a little unpredictable and didn’t always work. But don’t worry, I found a way round it - more on that later.

Once you’re done you should find a new app icon in your Applications folder. If you double click on this icon the URL you entered should open as a single-window Chrome instance (without the browser bar or any of the other browser chrome), meaning that it will act like a separate app, so if you happen to close your main Chrome windows your new ‘app’ won’t close as well.

image

A Note On Icons

It took me a little bit of experimenting to get the app icon working as I wanted. I ended up adding it manually and I’ll outline my experience here in case it’s helpful for others, using Feedly as my example.

My process does require spending a little money on an app called IconSlate (£2.99 to be precise, or $4.99 if you’re in the US), but it’s a fantastic app and well worth the tiny amount of money. It creates proper .icns or .ico files, with your icon at six different sizes, from 512px down to 16px. You don’t have to use this app, but you may find your icons are less predictable as a result.

First of all you need to find an image to use as an icon. A quick google images search came up with this large PNG with a transparent background - perfect:

image

Before I can use it though I need to do a little tweaking.

Opening it in Photoshop shows that it’s really too big, and it’s not square either. First I set it to a resolution of 72 DPI and a width of 512 pixels. Then I increased the canvas height so that it was also 512 pixels, and resaved the file.

Next, open IconSlate, go to ‘File > Open’, browse to your saved PNG file and open it. You should now see an IconSlate window that looks like this:

image

All that remains to do now is to click ‘Build’ and to save your generated icons to a folder somewhere such as ~/Pictures/App Icons.

Once you’ve done that, open a Finder window and browse to the Applications folder. Find the app (which will probably have a generic app icon), click on it once and hit ‘cmd + I’ (or go to ‘File > Get Info’).

Finally, find your ‘.icns’ file and simply ‘drag and drop’ it onto the generic app icon at the top left of the Get Info window, which should now look like this:

image

And there you have it, a beautiful icon for your app which, if you add it to your dock, will look great!