Here’s how I “changed” an app’s home screen icon on iPhone. I’m so OCD that I want my home screen dock icons (the tray at the bottom) to be all of the same colour! Actually, changing an icon is not possible, but creating a new shortcut with an icon of my choice is!

Previously my dock looked like this:

However, I no longer use the third app - Dolphin browser - my go-to is Firefox. But I like this green colour scheme! Firefox’s icon is garish and out of place:

So...

Try 1: Shortcuts (previously known as Workflow.is)

First I figured to try the iOS Shortcuts App. Only a few actions needed to open Firefox’s URL Scheme, which I correctly deduced, was simply firefox://:

Next, in this shortcut’s settings, change the icon to use the green scheme with the globe glyph. Hit the Share icon, and select Add to Home Screen. Easy!

But... launching it is rather jarring and slow - since it first opens up Shortcuts and then flicks to Firefox. In fact, strictly, it’s a Web App launching Shortcuts launching Firefox! You can see this in the multi-tasking interface.

No thanks! So...

Try 2: Home Screen Icon Creator

Some sleuthing led me to Home Screen Icon Creator: A Shortcut to Create Custom Icons for Apps, Contacts, Solid Colors, and More by Federico Viticci on MacStories.

He reverse engineered the way Shortcuts adds... shortcuts to the home screen, and created a way to launch any URL Scheme. URL Schemes are great because they can be used to launch apps with deep links to specific functions, e.g. send SMS messages (message://), or email mailto://, or make a call tel://, and so on.

For the icon, his solution was to grab the icon from any app on the iOS App Store. Clever! Selecting Dolphin Browser on the App Store give me dock exactly as I had before!

How it works

Behind the scenes, the standard Shortcuts app and the Home Screen Icon creator use a full-screen Safari Web Application that then launches a URL scheme. A Web App (strictly a Progressive Web App or PWA) is just a HTML! There are Apple-specific tags that are required in the HTML page that make it a Web App, which in turn allows it to be added to the Home Screen:

Hide Safari UI components <meta name="apple-mobile-web-app-capable" content="yes">
Configure the status bar appearance <meta name="apple-mobile-web-app-status-bar-style" content="black">
Provide the home screen icon <link rel="apple-touch-icon" href="touch-icon-iphone.png">
And title <meta name="apple-mobile-web-app-title" content="AppTitle">
Plus an optional launch screen start-up image <link rel="apple-touch-startup-image" href="/launch.png">

The documentation states that:

You can determine whether a webpage is displaying in standalone mode using the window.navigator.standalone read-only Boolean JavaScript property.

So the Shortcuts HTML page contains Javascript that checks if “standalone,” then start a timer, that when triggered, emulates a mouse click on link to the URL scheme:

<a id="jump" href="firefox://"></a>
<script>
 if (window.navigator.standalone) {
  var e = document.getElementById('jump');
  var ev = document.createEvent('MouseEvents');
  ev.initEvent('click',true,true,document.defaultView,1,0,0,0,0,false,false,false,false,0,null);
  setTimeout(function() { e.dispatchEvent(ev); }, 25);
 }
</script>

Shortcuts uses an internal web server to serve the icon, e.g.:

<link rel="apple-touch-icon-precomposed" href="http:/localhost:52163/webclips/images/Home%2520Screen%2520Icon%2520Creator/icon.png">

Viticci’s version, on the other hand, encodes the image in-line e.g.:

<link rel="apple-touch-icon-precomposed" href="data:image/jpg;base64,...">

Finally, the HTML (with Javascript and any in-line images) are all Base64 encoded as data:text/html;base64,... and that URL is passed to Safari.

Both the methods described so far use similar Javascript and both add other nice touches like instructions, graphics, and so on.

But, I want to get rid of all that to make the Web App small and fast! Minimum HTML with no JavaScript, no CSS and certainly no images for me! So...

Try 3: My simpler faster Shortcut

All I need is a minimal HTML page to redirect the Web App to the URL scheme using a <meta http-equiv="refresh"> tag. I ended up with something really simple:

<html>
 <head>
  <title>[Ask for Input 2]</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <link rel="apple-touch-icon" href="data:image/png;base64,[Base64 Encode]">
  <meta http-equiv="refresh" content="0;url='[Ask for Input 1]'">
 </head>
 <body>
  <h1>[Ask for Input 2]</h1>
  <h2>[Ask for Input 1]</h2>
  Hit Cancel, then tap Share &gt; Add to Home Screen
 </body>
</html>

But, the icon, oh the icon. My idea was to use the icons in Shortcuts itself, lots of nice colours and glyphs! What a brilliant idea if I may say so myself. All I need to do is change the icon of this shortcut itself and select that.

Alas, the shape of icons generated by Shortcuts is slightly off (the background mask is not quite right). A quick fix is to crop a bunch of pixels. Also, because I would rather the OS create the rounded corners, I use apple-touch-icon dropping the -precompose suffix. I do know what I am doing!

To replicate:

Create the actions with the parameters as shown above.
The contents of the Text action, fourth item from the bottom, is the HTML shown above. Replace the items in square backets [ and ] with the appropriate Magic Variables:
- There are two Ask for Input actions so select the magic variables appropriately - do this for 4 instances in the HTML.
- And there is one Base64 Encode action - do this once in the HTML.
In the shortcut’s settings, design an icon.
Save the shortcut.
When you run the shortcut, you’ll be prompted to enter the URL scheme and a name for it, and then prompted to choose an icon (I’d recommend choosing the colour scheme and glyph you want in step 3 above).

Shortcuts will launch a browser page (Safari) that looks like the one below. Hit Cancel.
Then hit the Share button in the toolbar and select Add to Home Screen.
You’ll now find a new icon on your home screen. Test!

The redirect works great for me. Fast and simple. Finally! Something that looks (almost) good enough for me:

Want your own Shortcut with your own Icon?

Want a different icon, perhaps one loaded from your Photos? *

Or want to launch an app other than Firefox?

Or want to make a phone call, or start a text message?

All possible! But, dear reader, I leave all that coding to you!

* You know what? I lie. My dock actually looks like this, with thanks to a white flat Firefox icon on HiClipart:

❮ Older

Newer ❯