网站图标是在浏览器选项卡和书签中标识网站的小图像。这个名字来自“最喜欢的图标”。它为读者提供了一种在打开的页面中查找站点的视觉方式，即使选项卡太窄而无法显示其标题。搜索引擎还可以在结果旁边显示网站的图标。 MDN 的网站图标定义 描述了这些常见的浏览器用途。
SearchVector的橙色分段圆就是一个例子。封面��使用其实际的图标资源来解释图像文件、页面的 HTML 和浏览器之间的连接。这是教学图，不是搜索结果截图
准备好实施一个了吗？跳转至“T7”HTML 设置“T8”或“T9”图标丢失疑难解答“T10”.“T11”
网站图标、徽标和社交形象：哪个是哪个？
徽标是企业更广泛的视觉识别。它可能包括一个符号、一个全名和一个标语。图标是该标识的一个小应用，通常是一个简化的符号，在很小的尺寸下仍然可以识别。缩小整个文字标记通常会使其字母难以区分。
| 资产 | 主job |
|---|---|
| Favicon | 识别浏览器选项卡中的页面或书签 |
| 标题徽标 | 在页面布局中识别品牌 |
| 社交预览图像 | 用更大的图像来说明共享链接 |
| 主屏幕图标 | 表示已保存的网站或在设备 |
更改标题徽标并不一定会更新图标。这些可能是由不同设置控制的单独文件。同样，替换社交预览图像并不能修复丢失的选项卡图标。首先识别错误的表面，然后找到提供它的设置。
选择一个能在小尺寸下生存的图标
从方形画布和简单的轮廓开始。导出大源图像，然后以 16×16 和 32×32 预览它作为实际设计检查。这些预览测试了易读性；它们并不是声称每个浏览器都以一种固定大小呈现图标。寻找消失的笔画、��挤的字体以及与选项卡背景合并的透明区域。
在浅色和深色背景下检查标记。细小的黑色轮廓可以在深色标签上消失，而浅色符号可以在浅色标签上消失。具有故意对比的立体形状通常更容易识别。不要仅仅依赖颜色：当图标视觉上相似时，独特的轮廓仍然有帮助。
保留您的团队可以编辑的源文件。导出模糊缩略图的较大副本不会恢复其细节。对于品牌重塑，请批准主徽标旁边的小图标，以便网站、书签和保存的快捷方式具有相关性。
添加带有真实 HTML 示例的图标
SearchVector 在其图标图像 URL 上提供真正的 512×512 PNG。此最小声明指向 SearchVector 站点上的现有资产：
将声明放在文档的内。根相对路径从当前主机名解析：在SearchVector上，它从SearchVector请求/favicon.png；在您的域上，它从您的域请求该文件。对于您自己的网站，上传您自己的品牌资产并使用其实际路径。复制标签而不上传图像会留下损坏的参考。
rel属性将资源标识为图标。 href定位它，type描述其格式，sizes描述图像尺寸。写入“512x512”不会调整文件大小。检查导出的图片并确保申报准确。
SearchVector还声明了SVG和ICO替代方案。浏览器可以使用类型和大小等属性在图标声明之间进行选择，如《T16》MDN 的图标链接参考《T17》中所述。因此，多个声明并不自动成为问题，但过时的替代方案可以解释不一致的外观。
如果您使用CMS，请从其站点图标设置开始。如果您使用框架，请使用其已建立的元数据机制。然后检查生成的 HTML：在管理屏幕中成功上传只是工作的一部分。在检查现有模板已输出的内容之前，避免添加第二个竞争设置。
Google搜索外观需要什么
Google的favicon文档要求至少8×8像素的方形图像，建议大于48×48。其列出的格式包括 PNG 和 ICO。不要假设在浏览器中工作的 SVG 在 Google 的搜索演示中建立了支持。
主页必须声明图标。 Googlebot 需要访问该主页，Googlebot-Image 需要访问图标文件。保持图标 URL 稳定并使用代表站点的标记。 Google 支持每个主机名一个图标：子域可以拥有自己的图标，但子目录不会获得单独的搜索图标。
资格不保证展示。变更后，Google需要重新抓取并处理主页；其文件称这可能需要几天到几周的时间。网站所有者可以通过 URL 检查请求主页索引。反复重命名图像并不能有效替代检查访问和允许处理时间。
对丢失或过时的图标进行故障排除
分开三个观察：HTML 声明的内容、图像 URL 返回的内容以及浏览器显示的内容。它们之间的不匹配会告诉您在哪里进行调查。保留页面 URL、图标 URL 和结果的简短记录，而不是一次更改多个设置。
| 症状 | 下一个检查 |
|---|---|
| 任何页面上都没有图标 | 检查头部是否有图标声明；直接打开它的图片URL |
| 首页有效，文章无效 | 比较模板和根相对与页面相对路径 |
| 一个浏览器中的旧图标 | 比较新的浏览器配置文件并检查所有声明的替代方案 |
| 图像 URL 打开网页 | 检查重定向、访问质询或回退 HTML 响应 |
| 浏览器可以运行，搜索不能 | 分别审核主页声明、抓取访问和搜索资格 |
要进行缓存调查，请直接打开图像并将其与新的浏览器配置文件进行比较。清除缓存可以帮助隔离原因，但用户不需要执行特殊重置即可使网站正常运行。在将本地刷新视为永久修复之前，请检查已部署的资产和缓存配置。
工作示例：嵌套页面丢失其图标
考虑一个虚构的网站，其主页显示正确的图标，而/blog/下的文章却没有。两个模板都包含href="favicon.png"，没有前导斜杠。假设没有基本 URL 覆盖，则该相对路径将在当前页面旁边解析。当请求文章的不同位置时，它可能会在根上工作。
开发人员打开文章的图标请求，发现它返回网站的 HTML 后备而不是图像。修复方法是确认图像存在于站点根目录并将共享声明更改为“T18”href="/favicon.png"。然后他们再次检查主页和文章。两者现在请求相同的资产。
这是一个有效的诊断示例，而不是报告的SearchVector事件。它的教训是在替换艺术品之前检查请求的 URL。如果嵌套模板请求错误的文件，那么完全有效的图像也无济于事。
关闭任务前的最后检查
- 打开首页和一个嵌套页面；确认两者都声明了预期的图标。
- 打开每个声明的替代方案并检查它是否属于当前品牌。
- 确认预期的图像加载，无需身份验证或 HTML 后备。
- 在浅色和深色浏览器中检查小图标
- 单独审核Google资格，然后记录更改并留出处理时间。
要进行更广泛的网站审查，请继续使用SearchVector的网站检查器或其网页爬虫。保留上面的直接图像和 HTML 检查作为您的网站图标证据；一般页面审查并不能保证搜索引擎将如何显示您的品牌。
完成的图标任务具有可识别的图像、正确的声明和跨页面模板的工作资源 URL。首先验证这些具体部件。然后监视搜索外观，不要将延迟刷新与损坏的浏览器实现混淆。
