Favicon not displayed on iPhone 5s (iOS 7)

From miscellus

Special meta tags are required for iPhones to display Apple favicons in favourites

A recent owner of an iPhone 5S, I was very surprised to see that most websites that I added to Safari favourites showed the iOS compass logo, not the website's favicon.

Amazingly this currently includes some pretty big players: Facebook, Google (AdSense), any Wiki sites using MediaWiki software version 1.21.2 and below, and many many more. Investigation was needed!

There is a growing list of Meta tags needed to satisfy Apple's plethora of favicon (apple-touch-icon) requirements. It seems one more is now needed.

<link rel="apple-touch-icon" href="http://www.apple-touch-icon-generator.com/apple-touch-icon-114x114-precomposed.png" />

link-rel seems to be the important key, whose value should be the path to a valid icon. I've found the 114 size works perfectly well.

I use the following favicon meta tag list on all of my websites and as far as I'm aware, they display correctly on all mobile devices when the site is added to favourites:


<link rel="apple-touch-icon" href="http://www.apple-touch-icon-generator.com/apple-touch-icon-114x114-precomposed.png" />

<link rel="http://www.apple-touch-icon-generator.com/apple-touch-icon-144x144-precomposed.png" />
 
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- hide top bar in mobile safari-->

<!--<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> translucent top bar -->
<link rel="shortcut icon" href="/favicon.ico" />

<!-- For third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://www.apple-touch-icon-generator.com/apple-touch-icon-144x144-precomposed.png" />

<!-- For iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://www.apple-touch-icon-generator.com/apple-touch-icon-114x114-precomposed.png" />

<!-- For first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://bmi-calculator-body-mass-index.com/apple-touch-icon-72x72-precomposed.png" />

<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="http://bmi-calculator-body-mass-index.com/apple-touch-icon-57x57-precomposed.png" />

My personal preference is to always use absolute references after experiencing odd behaviour with Firefox in the past.

Clear your iPhone's cache first!

From the experiments I've done with this, you must clear Safari's cache every time you change a website's Meta tags or will get very confusing results. This probably follows for all browsers, mobile or otherwise.

How to clear Safari's Web Cache - iPhone 5
  1. Settings
  2. Safari
  3. Clear History
    1. Are you sure you want to clear history? This cannot be undone?
    2. Clear History
  4. Clear Cookies and Data
    1. This will clear data that could be used for tracking but is also used by websites to preserve login information and to speed up browsing. Open pages will be closed.
    2. Clear Cookies and Data

Free online Apple-touch-icon-generator

I've created a little web app to build all of the required apple-touch-icon variations from one master image: www.apple-touch-icon-generator.com. Do feel free to use it!