2

I want to have different touch icons in the exact size for the relevant smartphones/tablets.

I tried this:

<link rel="apple-touch-icon" sizes="76x76" href="http://www.mywebsite.com/img/touch-icon/apple-touch-icon-76.png" />
<link rel="apple-touch-icon" sizes="120x120" href="http://www.mywebsite.com/img/touch-icon/apple-touch-icon-120.png" />
<link rel="apple-touch-icon" sizes="152x152" href="http://www.mywebsite.com/img/touch-icon/apple-touch-icon-152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="http://www.mywebsite.com/img/touch-icon/apple-touch-icon-180.png" />
<link rel="shortcut icon" sizes="196x196" href="http://www.mywebsite.com/img/touch-icon/android-icon.png">
<meta name="msapplication-square70x70logo" content="http://www.mywebsite.com/img/touch-icon/smalltile.png" />
<meta name="msapplication-square150x150logo" content="http://www.mywebsite.com/img/touch-icon/mediumtile.png" />
<meta name="msapplication-wide310x150logo" content="http://www.mywebsite.com/img/touch-icon/widetile.png" />
<meta name="msapplication-square310x310logo" content="http://www.mywebsite.com/img/touch-icon/largetile.png" />

That doesn't work for iOS and Android. Links might be right, because Windows recognize the different icons.

Is there any wrong naming or shortcut I don't notice?

Jonas
  • 111
  • 2
  • 13

2 Answers2

4

You either need to make sure that you have a valid and trusted security certificate on the server to use an absolute URL, or you need to use a relative URL:

<link rel="apple-touch-icon" sizes="76x76" href="img/touch-icon/apple-touch-icon-76.png" />
<link rel="apple-touch-icon" sizes="120x120" href="img/touch-icon/apple-touch-icon-120.png" />
<link rel="apple-touch-icon" sizes="152x152" href="img/touch-icon/apple-touch-icon-152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="img/touch-icon/apple-touch-icon-180.png" />
<link rel="shortcut icon" sizes="196x196" href="img/touch-icon/android-icon.png">
<meta name="msapplication-square70x70logo" content="img/touch-icon/smalltile.png" />
<meta name="msapplication-square150x150logo" content="img/touch-icon/mediumtile.png" />
<meta name="msapplication-wide310x150logo" content="img/touch-icon/widetile.png" />
<meta name="msapplication-square310x310logo" content="img/touch-icon/largetile.png" />

See here for more information.

Hope this helps!

Community
  • 1
  • 1
Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
  • That's interesting. My guess is that it's because Windows allows `CORS` by default, and Apple doesn't. Anyway, try to always use relative links -- relative links will work for both cases :) – Obsidian Age Feb 03 '17 at 00:49
0

You might want to submit your site to the RealFaviconGenerator's favicon checker. This online tool analyzes your favicon markups and generates a report. For example, you might discover that your image URLs are invalid or that your images are ill-formed.

Full disclosure: I'm the author of this tool.

philippe_b
  • 38,730
  • 7
  • 57
  • 59