favicon优化

老高的技术博客

发布于 2022-12-27 15:27:15

2160

发布于 2022-12-27 15:27:15

现代浏览器会自动识别favicon，只要放到网站根目录就OK，但是完美一点的话就参考以下代码：

<link href="/favicon.ico" mce_href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="/favicon.ico" mce_href="/favicon.ico" rel="bookmark" type="image/x-icon" />


<link rel="apple-touch-icon" href="https://blog.phpgao.com/usr/themes/default/img/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="https://blog.phpgao.com/usr/themes/default/img/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="https://blog.phpgao.com/usr/themes/default/img/apple-touch-icon-114x114.png" /><link rel="apple-touch-icon" sizes="120x120" href="https://blog.phpgao.com/usr/themes/default/img/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="152x152" href="https://blog.phpgao.com/usr/themes/default/img/apple-touch-icon-152x152.png" />

很简单吧，根据rel属性就能判断出来，shortcut icon为默认的图标，bookmark就是加入收藏栏的图标，最后一个就是在IOS系统上使用的图标啦

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2014-02-14，如有侵权请联系 cloudcommunity@tencent.com 删除

ios