UPDATE: See "Use AB_SocialMetaModel in CMS website to generate all social media meta/link/script markup" for simplifying wrapper class.

iOS devices can make use of custom icons when a web page is saved as a home page bookmark, and they can also display a custom splash image when loading the initial web page when the home page icon is clicked. If no custom icons/images are specified, iOS will use a screenshot of the website. Android devices, Chromebooks, and the Windows 8+ home page, all have similar behavior.

See Configuring Web Applications for all of the details. Also see Real Favicon Generator for an online service that can produce most of the images and associated markup for all platforms. (It doesn't produce startup splash images for iOS.) If the markup generated by Real Favicon Generator is used, remember to start the urls with ~/ instead of / in _Layout.cshtml so that they will work even if your web application is not deployed at your website root.

Seven images are needed, with specific dimensions:

  • touch-icon-iphone.png: 60x60
  • touch-icon-ipad.png: 76x76
  • touch-icon-iphone-retina.png: 120x120
  • touch-icon-ipad-retina.png: 152x152
  • apple-touch-startup-image.png: 320x480
  • apple-touch-startup-ipad-landscape.png: 1024x784
  • apple-touch-startup-ipad-portrait.png: 784x1024

These images should be placed in the root of the MVC project, so that they get deployed to the root of the web application. Next add the following tags to _Layout.cshtml inside the <head> element:

    <link rel="apple-touch-icon" href="~/touch-icon-iphone.png">
    <link rel="apple-touch-icon" sizes="76x76" href="~/touch-icon-ipad.png">
    <link rel="apple-touch-icon" sizes="120x120" href="~/touch-icon-iphone-retina.png">
    <link rel="apple-touch-icon" sizes="152x152" href="~/touch-icon-ipad-retina.png">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-startup-image" href="~/apple-touch-startup-ipad-landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">
    <link rel="apple-touch-startup-image" href="~/apple-touch-startup-ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
    <link rel="apple-touch-startup-image" href="~/apple-touch-startup-image.png" media="screen and (max-device-width: 320px)">