Home Screen Icons

Contact Us or call 1-877-932-8228
Home Screen Icons

Home Screen Icons


  1. Place a PNG icon named apple-touch-icon.png in the website root directory to specify the icon for the entire site if you don't want to add a link tag to pages.
  2. Instead of adding an image to the website root directory, you can instead add a link element to the head section of any page to specify an icon for a single page:
    <link rel="apple-touch-icon" href="/custom_icon.png"/>
  3. To support different device resolutions (iPad vs. iPhone, for instance), add a size attribute to each link 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">
    The icon that is the most appropriate size for the device is used. If no sizes attribute is set, the element's size defaults to 60 x 60.
  4. If there is no icon that matches the recommended size for the device, the smallest icon larger than the recommended size is used. If there are no icons larger than the recommended size, the largest icon is used.
  5. If no icons are specified using a link element, the website root directory is searched for icons with the apple-touch-icon... prefix. For example, if the appropriate icon size for the device is 60 x 60, the system searches for filenames in the following order:
    1. apple-touch-icon-76x76.png
    2. apple-touch-icon.png

See the Apple Developer site for full details.