HTML 动态生成favicon

在本文中，我们将介绍HTML中如何动态生成favicon，并提供相关的示例说明。

阅读更多：HTML 教程

什么是favicon

Favicon是网站显示在浏览器标签栏、书签、浏览器书签工具栏等位置的小图标。它是网站的标识，可以提升用户对网站的识别度。Favicon通常是一个16×16像素或32×32像素的ICO文件。

静态favicon

在HTML中，可以通过以下方式设置静态favicon。

<link rel="icon" type="image/png" href="favicon.png">

上述代码中，favicon.png是网站的favicon文件。将上述代码添加到HTML文件的<head>部分，浏览器会自动将指定的图标用作favicon。

动态favicon的需求

有时候，我们可能需要根据某些条件动态改变网站的favicon。比如，在网站中展示当前天气情况的图标作为favicon。

使用JavaScript实现动态favicon

要动态生成favicon，可以使用JavaScript来实现。下面是一个示例，展示了如何在不同天气条件下设置不同的favicon。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>动态生成favicon</title>
  <script>
    function setFavicon(weather) {
      var favicon = document.querySelector('link[rel="icon"]');
      if (favicon) {
        favicon.href = weather + '.ico';
      } else {
        var newFavicon = document.createElement('link');
        newFavicon.rel = 'icon';
        newFavicon.href = weather + '.ico';
        document.head.appendChild(newFavicon);
      }
    }
  </script>
</head>
<body>
  <h1>动态生成favicon</h1>
  <button onclick="setFavicon('sunny')">晴天</button>
  <button onclick="setFavicon('cloudy')">多云</button>
  <button onclick="setFavicon('rainy')">雨天</button>
</body>
</html>