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
problem_samsung_problem

from Motorola Home Screen
problem_motorola_problem

 

How to fix Android Shortcuts:
<link rel="icon" sizes="192x192" href="http://[yourwebsite]/192x192 filename.png"/>
(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
problem_iphone5_screen_small    problem_iphone6_screen_small


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
win7_pinning_problem


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
problem_chromebox_shelf

Windows 7 – Chrome added shortcut to Taskbar
chrome_add_to_taskbar_2

 

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