Stuff & Nonsense product and website design

Labeling home screen bookmarks for iOS6

Speaking of proprietary Apple meta elements, here’s a little gem for labelling a site’s home screen icon on iOS.


If you add this site’s home page to the home screen on your iOS devices (which I hope you will to see my shiny new icons,) the default label under the icon will be just “Fashionably.” This is because “Fashionably.” is the first (and only word that fits) from the home page’s title element:

<title>Fashionably flexible website design by Stuff & Nonsense</title>

Hardly optimal.

Thanks to a tweet from @carlbert_, I discovered there is a way in to override the default title element and replace it with a custom short name. Add this meta element:

<meta name="apple-mobile-web-app-title" content="CUSTOM SHORT NAME">

I can’t find this meta element documented anywhere, but by crikey it works. In iOS6. My home screen label is now the much neater “S & N”. Apple really needs to do better helping web developers with their documentation.


Written by Andy Clarke who filed this in development .


Would you like advice and inspiration on making better designs for the web?

Get monthly design inspiration and insights based on my 25+ years of experience. View some recent emails, sign up today, and get:

    I promise never to share your email address and you can unsubscribe with just one click.

    Free set of Layout Love grid templates when you sign up today.

    Hire me. I’m available for coaching and to work on design projects.