Igor Kromin |   Consultant. Coder. Blogger. Tinkerer. Gamer.

I've been noticing a fair number of errors looking for apple-touch-icon-precomposed.png or apple-touch-icon.png in my Atari Gamer website's server logs. At first I thought that these errors were due to Safari or Mobile Safari looking for icons for my website and mostly ignored them, but then I decided to dig a little deeper and found that there's much more to the story.
ERROR: Requested page does not exist Code: 500 Path: /apple-touch-icon-precomposed.png
ERROR: Requested page does not exist Code: 500 Path: /apple-touch-icon.png

What I ended up finding out is that it's possible to turn a website into something that feels more like a native web application - at least it gets its own launch icon in iOS. In reality this is just a web view with a basic application launcher, but it's still a neat thing to have and is next to no effort to implement.

This relies on the Web App Manifest W3C Specification which both iOS and Android appear to support by the way. There's also a handy Web App Manifest Generator available to make things easier for you and Apple has documentation on additional customisations that are possible.

So here's how it's done, first your website (in its <head> section) must contain a reference to the web manifest file, something like this...
<link rel="manifest" href="/manifest.json">

The manifest file is a JSON file which can either be hand crafted or created via a generator such as Web App Manifest Generator. In my case this is what I ended up using...
"name": "Atari Gamer",
"short_name": "Atari Gamer",
"lang": "en-AU",
"start_url": "/",
"display": "fullscreen",
"theme_color": "#aa0000",
"icons": [
"src": "/img/apple-touch-icon.png"
"scope": "/"

The scope member is defined to address an issue with iOS Safari opening links in a new window when it shouldn't. The rest of the members should be fairly self explanatory.

Then to see this in action, it's a matter of opening the website in iOS Safari and clicking the 'Share' button, then clicking 'Add to Home Screen'. Then clicking 'Add'.

IMG_8898.jpeg IMG_8899.jpeg IMG_8900.jpeg

A new "App" icon will appear which will have the name of the website as specified in the manifest file, and tapping that app will open the website in a new screen.

IMG_8901.jpeg IMG_8902.jpeg

This does not remove the need for creating a dedicated app, nor does it remove the need for making a responsive website for mobile devices, but it is a nice little extra to offer your users.


A quick disclaimer...

Although I put in a great effort into researching all the topics I cover, mistakes can happen. Use of any information from my blog posts should be at own risk and I do not hold any liability towards any information misuse or damages caused by following any of my posts.

All content and opinions expressed on this Blog are my own and do not represent the opinions of my employer (Oracle). Use of any information contained in this blog post/article is subject to this disclaimer.
Hi! You can search my blog here ⤵
NOTE: (2022) This Blog is no longer maintained and I will not be answering any emails or comments.

I am now focusing on Atari Gamer.