Mobile Touch Icon

Question

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?

Answer 1

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!

Answer 2

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.