Favicon脚本介绍

概述

favicon是网站的标志性小图标，一般显示在浏览器的标签页和地址栏上，为了方便访问，有些浏览器还会将其加入到书签栏中。本文将介绍如何使用脚本来设置网站的favicon，以及一些与favicon相关的知识。

设置Favicon

设置favicon有两种方式，一种是使用HTML标签，一种是使用JavaScript脚本。这里主要介绍使用JavaScript脚本的方法。

在HTML文档的head元素中，添加以下代码：

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

其中，rel属性指定文件的关系，type属性指定文件类型，href属性指定文件路径。

使用JavaScript脚本可以动态地设置favicon，代码如下：

var link = document.createElement('link');
link.type = 'image/x-icon';
link.rel = 'shortcut icon';
link.href = 'favicon.ico';
document.getElementsByTagName('head')[0].appendChild(link);

其中，document.createElement('link')新建了一个link元素，link.type指定文件类型，link.rel指定文件关系，link.href指定文件路径，document.getElementsByTagName('head')[0].appendChild(link)将该元素添加到head元素中。

Favicon素材

Favicon素材可以使用工具或网站来生成，如Favicon Generator、Favicon.cc等。一般情况下，建议使用尺寸为16x16或32x32的png格式的图片作为favicon。

兼容性问题

在不同的浏览器中，设置favicon的方法可能会有所不同，有些浏览器例如IE会不支持JavaScript设置favicon，因此可以采用同时使用HTML标签和JavaScript脚本的方法，保证兼容性。

总结

Favicon是网站标志性小图标，可以通过添加HTML标签或使用JavaScript脚本来设置。为了保证兼容性，在不同浏览器中还可以采用同时使用两种方式来设置。