网站图标（Favicon）是网站标识的重要组成部分，它不仅仅能够提升网站的专业性和品牌形象，还能方便用户快速识别和找到所需要的网站。在网站开发中，调用网站图标也是非常重要的一步，下面介绍几种常见的调用方式。
1. 直接在 HTML 中插入 link 标签
这是最常见的一种方式，通过在 HTML 中插入 link 标签的方式来引用网站图标。具体实现如下：
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
其中 rel 属性指定了该链接的类型为网站图标，href 属性则指定了网站图标的地址，type 属性则指定了网站图标的类型。
在实际应用中，一般将网站图标命名为 favicon.ico，并放置在网站的根目录下，这样可以方便浏览器自动识别。如果需要更换网站图标，只需要将新的图标替换原有的 favicon.ico 即可。
2. 通过 CSS 样式来引用
除了通过 link 标签来引用网站图标外，还可以通过 CSS 样式来引用。具体实现如下：
<style>
/* 定义网站图标 */
.favicon {width: 32px;height: 32px;background-image: url('/favicon.ico');background-size: cover;}
</style>
在需要使用网站图标的地方，只需要添加相应的 CSS 类名即可，例如：
<div class="favicon"></div>
3. 使用 JavaScript 动态插入
在一些特殊的情况下，可能需要通过 JavaScript 来动态插入网站图标。具体实现如下：
const icon = document.createElement('link');
icon.rel = 'icon';
icon.type = 'image/x-icon';
icon.href = '/favicon.ico';
document.getElementsByTagName('head')[0].appendChild(icon);
这段代码通过 createElement 方法创建一个 link 标签，然后设置其属性并添加到 head 元素中即可。
以上是网站图标的几种常见调用方式，可以根据实际需求进行选择。值得注意的是，为了保证网站图标的最佳显示效果，应该尽量避免使用过大或者过小的图标，同时也应该使用支持透明背景的格式，例如 PNG、SVG 等。
