HTML Favicon和Apple图标 Posted 2021-05-24
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML Favicon和Apple图标相关的知识，希望对你有一定的参考价值。
<!-- Place favicon.ico and apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
html 图标和favicon
{
"name": "Back to Front",
"icons": [
{
"src": "\/android-chrome-36x36.png",
"sizes": "36x36",
"type": "image\/png",
"density": 0.75
},
{
"src": "\/android-chrome-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": 1
},
{
"src": "\/android-chrome-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": 1.5
},
{
"src": "\/android-chrome-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": 2
},
{
"src": "\/android-chrome-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": 3
},
{
"src": "\/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": 4
}
]
} <link rel="apple-touch-icon" sizes="57x57" href="http://backtofront.london/wp-content/themes/backtofront/assets/img/favicons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="http://backtofront.london/wp-content/themes/backtofront/assets/img/favicons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="http://backtofront.london/wp-content/themes/backtofront/assets/img/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="http://backtofront.london/wp-content/themes/backtofront/assets/img/favicons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="http://backtofront.london/wp-content/themes/backtofront/assets/img/favicons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="http://backtofront.london/wp-content/themes/backtofront/assets/img/favicons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="http://backtofront.london/wp-content/themes/backtofront/assets/img/favicons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="http://backtofront.london/wp-content/themes/backtofront/assets/img/favicons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="http://backtofront.london/wp-content/themes/backtofront/assets/img/favicons/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="http://backtofront.london/wp-content/themes/backtofront/assets/img/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="http://backtofront.london/wp-content/themes/backtofront/assets/img/favicons/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="http://backtofront.london/wp-content/themes/backtofront/assets/img/favicons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="http://backtofront.london/wp-content/themes/backtofront/assets/img/favicons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="http://backtofront.london/wp-content/themes/backtofront/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="http://backtofront.london/wp-content/themes/backtofront/assets/img/favicons/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="http://backtofront.london/wp-content/themes/backtofront/assets/img/favicons/mstile-144x144.png">
<meta name="theme-color" content="#ffffff"> 以上是关于HTML Favicon和Apple图标的主要内容，如果未能解决你的问题，请参考以下文章
HTML Favicon和Apple图标
HTML中的Favicon和Apple图标
Favicon和Apple Touch图标
iOS 书签显示 favicon 而不是 apple-touch-icon
Favicon和苹果图标
apple-touch-icon,shortcut icon和icon的区别(手机站发送到手机桌面图标自定义)