如何设置网站图标

发布于浏览量 87 by

通过在HTML页面的 <head> 中添加以下内容，即可为页面设置网站图标：

<link rel="icon" href="favicon.ico">

图标可以是 .ico 、 .gif 或 .png 等格式，但 .ico 格式的兼容性更好。

另外，随着移动设备的普及，苹果为iOS设备配备了 apple-touch-icon 私有属性，添加该属性，在iPhone、iPad、iTouch的safari浏览器上可以使用添加到主屏按钮将网站添加到主屏幕上，方便用户以后访问。实现方法是在HTML文档的标签加入下面代码即可：

<!-- third-generation iPad with high-resolution Retina display -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png">

<!-- iPhone with high-resolution Retina display -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png">

<!-- first and second-generation iPad -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png">

<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices -->
<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png">

<!-- basic favicon -->
<link rel="icon" href="https://developer.mozilla.org/static/img/favicon32.png">