I am dealing with this mess of icons in OS X Yosemite Safari's Favorites view:
Note how nice and easy it is to visually locate the IPython and AWS icons: I would like to have similar icons displayed for my other favorite go-to sites, most of which are hosted off of various subdirectories of a single private web server (call it "foo.lan").
IPython is accessed via the IP address 10.0.3.3 for "foo.lan". I got it to work for IPython using the standard method, i.e. including the following in the HTML header:
<link rel="apple-touch-icon" href=.../> <meta name="apple-mobile-web-app-capable" content="yes" />
And when I investigated why it worked, it appears the image is cached by Safari in ~/Library/Safari/Touch Icons/ as "92AE91400BBEF8B1D9854D7151202EED.png": "92..." being the MD5 hash of the string "10.0.3.3", i.e. the domain I'm using to access IPython.
The problem is that this method of mapping icons to webpages assumes that there will only be one icon per website, not one icon per webpage. In my case, there are multiple webpages, accessed off of one website i.e. "foo.lan", for each of which I would like a separate icon to display in Favorites.
I tried manually copying an icon into .../Touch Icons, renaming it to the MD5 hash of the full path to the webpage, and editing the cache plist accordingly: of course this long shot did not work.
Is there any way to trick Safari into associating icons with specific pages within a single site, instead of just one-icon-per-site? I wonder if this is simply something that needs to be changed in Safari, as iOS is perfectly capable of caching web app icons and displaying them correctly on the home screen. Such a display capability for OS X Safari would be very useful if it doesn't already exist.
User "root" suggested add subdomains that map to each "service portal" running on the website. So commands.foo.lan, books.foo.lan, and so on. Some simple trickeration with DNS aliasing (no web server tinkering required, fortunately) confirms that this enables per-page icons as desired (further confirming the diagnosis of the problem). This seems sort of like hammering in a nail using a screwdriver, though, and wish there was a prettier way to get this behavior.
Even after rearranging all of your DNS to enable this feature, however, you still have to deal with Safari's extreme flakiness wrt actually pulling the pictures from the web server in the first place; this is a problem also seen with mobile Safari's unpredictable failures to preserve icons for your webApps and the subsequent merriment of diagnosing the problem. Fortunately in a non-(jailbroken-)iOS environment it is possible to force the matter by jumping into CacheSettings.plist, locating the record for the site you whose icon you want to edit, manually setting the TouchIconInCache boolean to "YES", and then - wait for it - manually calculating the MD5 hash of the string of your domain name, changing your icon name to that hash, and copying it into the "Touch Icons" folder as follows:
Once you have completely reorganized DNS in your LAN, and have calculated MD5 hashes of the domain names you want Safari to display icons for, finally you can quickly access icons for your favorite webpages, regardless of whether they are hosted across separate or on the same domain.