我想为相关的智能手机/平板电脑提供不同尺寸的触控图标。
我试过了:
<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" />
这对iOS和Android无效。链接可能是正确的,因为Windows识别不同的图标。
我没有注意到任何错误的命名或快捷方式吗?
答案 0 :(得分:1)
您需要确保服务器上有有效且受信任的安全证书才能使用绝对网址,或者您需要使用相对网址:
<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" />
有关详细信息,请参阅here。
希望这有帮助!
答案 1 :(得分:0)
您可能希望将自己的网站提交到RealFaviconGenerator's favicon checker。此在线工具分析您的favicon标记并生成报告。例如,您可能会发现图片网址无效或图片格式不正确。
完全披露:我是这个工具的作者。