Android

When Android devices cannot locate a suitable shortcut icon, it will add a tile with the first letter of your website’s url to the homescreen. This is a missed branding opportunity, where your logo could be appearing.

from Samsung Tab 4 Home Screen

from Motorola Home Screen

 

How to fix Android Shortcuts:
<link rel="icon" sizes="192x192" href="http://[yourwebsite]/192x192 filename.png"/>
<link rel="manifest" href="http://[your website]/manifest.json"/>
(Add these lines and the referenced graphic file to your main website page and see this document for more information)

 

iPhone

When iPhones cannot locate a suitable shortcut icon, they will add a miniature image of your website to the homescreen. This is a missed logo opportunity, and can be confusing to the user.

iPhone Home Screens
    

How to fix iPhone Shortcuts:
<link rel="apple-touch-icon" sizes="180x180" href="http://[yourwebsite]/180by180.png"/>
<link rel="apple-touch-icon" href="http://[yourwebsite]/apple-touch-icon.png"/>
(Add these lines and the referenced graphic file to your main website page and see this document for more information)

 

Windows

Windows can pin your Website’s logo to the taskbar. If a suitable shortcut icon cannot be found, Windows will use the Internet Explorer logo for the link. This is a missed branding opportunity for your organization.

Windows 7 – IE7 pinned shortcut to Taskbar

How to fix Windows Tiles and Shortcuts:
<meta name="msapplication-tooltip" content="Your Website Name"/>
<meta name="msapplication-starturl" content="./"/>
<meta name="msapplication-TileImage" content=" http://[yourwebsite]/144x144.png"/>
<meta name="msapplication-TileColor" content="#000000"/>
<meta name="msapplication-square70x70logo" content="http://[yourwebsite]/128x128.png"/>
<meta name="msapplication-square150x150logo" content="http://[yourwebsite]/270x270.png"/>
<meta name="msapplication-wide310x150logo" content="http://[yourwebsite]/558x270.png"/>
<meta name="msapplication-square310x310logo" content="http://[yourwebsite]/558x558.png"/>
<link rel="shortcut icon" href="http://[yourwebsite]/favicon.ico"/>
<link rel="icon" href="http://[yourwebsite]/favicon.ico"/>
(Add these lines and the referenced graphic file to your main website page and see these documents for more information:
  Favicon Recommendations
  Website Shortcut Recommendations

 

Chrome

Chrome for Windows and Chrome OS both allow for website url logos to be Added to the Shelf, or pinned to the Taskbar. When appropriate icons cannot be found, a letter tile is used in place of the logo. This can easily be corrected.

Chrome OS – Chrome Added to Shelf

Windows 7 – Chrome added shortcut to Taskbar

 

How to fix Chrome Shortcuts:
<link rel="shortcut icon" href="http://[yourwebsite]/favicon.ico"/>
(Add these lines and the referenced graphic file to your main website page and see these documents for more information:
  Favicon Recommendations
  Website Shortcut Recommendations