2017-02-03 129 views
0

我想要在相關智能手機/平板電腦的確切大小上有不同的觸摸圖標。移動觸摸圖標

我嘗試這樣做:

<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可以識別不同的圖標。

有沒有錯誤的命名或快捷方式我沒有注意到?

回答

1

您也需要確保您在服務器上有效的,值得信賴的安全證書使用絕對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" />

有關更多信息,請參閱here

希望這會有所幫助!

+0

這將是奇怪的,因爲Windows圖標工作 – Jonas

+0

這很有趣。我的猜測是,這是因爲Windows默認情況下允許'CORS',而Apple則不允許。無論如何,嘗試始終使用相對鏈接 - 相對鏈接將適用於這兩種情況:) –

0

您可能想將您的網站提交到RealFaviconGenerator's favicon checker。這個在線工具分析你的favicon標記並生成一個報告。例如,您可能會發現您的圖片網址無效或您的圖片不合格。

完全披露:我是這個工具的作者。