什么是网站图标，它在 HTML 中的大小是多少？

收藏夹图标是我们所有人每天在浏览网页时都会看到的东西，但我们中的许多人并没有观察到它，也没有对它付出任何代价。收藏夹图标还有许多其他名称，其中一些是最喜欢的图标（因此称为收藏夹图标）、快捷方式图标、标签图标、网站图标或书签图标。它是我们在选项卡上或在制作页面书签时看到的小图像。

选项卡中显示的小 GeeksforGeeks 图像是我们正在谈论的图标。

收藏夹图标的类型：收藏夹图标可以具有不同的尺寸，例如 16×16、32×32、48×48 或 64×64 像素的大小。此外，它们可以具有 8 位、24 位或 32 位颜色深度。

如何使用网站图标？
有两种方法可以实现收藏夹图标：

• 如果网站图标是 .ico 格式：
  1. 将正确格式的 favicon.ico 文件复制到网站文件所在服务器的主机目录中。通常这是public_html ，但可能会根据配置或托管服务提供商而改变。
  2. 浏览器会自动检测图标并显示它。
• 如果网站图标是其他格式（例如 jpg、BMP、gif、png）：
  1. 将文件复制到网站文件所在服务器的主机目录下。通常这是public_html ，但可能会根据配置或托管服务提供商而改变。
  2. 现在我们需要指定我们想要用作网站图标的图像。为此，我们需要在网站代码中 下方的标签内添加以下行：

     对于 png 以外的格式，请将“image/png”替换为文件格式，将“favicon.png”替换为文件的名称和扩展名。

例子：

 
 
     
         
          
         
          
        
         
          
     
      
     
        
 
            GeeksforGeeks 
        
 
          
        
 
            GeeksforGeeks icon added in the title bar 
        
 
     
                     

输出：

图标大小：

Size	Name	Purpose
32×32	favicon-32.png	Standard for most desktop browsers.
57×57	favicon-57.png	Standard iOS home screen.
76×76	favicon-76.png	iPad home screen icon.
96×96	favicon-96.png	GoogleTV icon.
120×120	favicon-120.png	iPhone retina touch icon.
128×128	favicon-128.png	Chrome Web Store icon & Small Windows 8 Star Screen Icon*.
144×144	favicon-144.png	Internet Explorer 10 Metro tile for pinned site*
152×152	favicon-152.png	iPad touch icon.
167×167	favicon-167.png	iPad Retina touch icon (change for iOS 10: up from 152×152, not in action. iOS 10 will use 152×152)
180×180	favicon-180.png	iPhone 6 plus
192×192	favicon-192.png	Google Developer Web App Manifest Recommendation
195×195	favicon-195.png	Opera Speed Dial icon (Not working in Opera 15 and later)
196×196	favicon-196.png	Chrome for Android home screen icon
228×228	favicon-228.png	Opera Coast icon

注意： favicon 的 sizing 属性不支持主要浏览器。
漏洞：许多网页浏览器在地址栏的左侧显示网站图标，因此它们经常被用作对 HTTPS 页面进行网络钓鱼攻击的一部分。攻击者将站点的图标更改为熟悉的挂锁标志（通知加密连接）以欺骗用户。为了避免这种情况，许多流行和现代的 Web 浏览器仅在选项卡中显示网站图标，并在 URL 旁边显示用于访问网站的协议的安全状态。