网站图标指南
直接解答制作网站图标时的常见问题:需要哪些尺寸、使用什么格式、粘贴哪些代码。
网站图标尺寸:格式与用途
搜索“网站图标尺寸”,仍会看到从 2014 年沿用至今、包含十五个文件的清单。实际上,如今六种尺寸就能覆盖浏览器标签页、搜索结果、iOS、Android 和 PWA。下面介绍具体尺寸及原因。
阅读指南免费将 PNG 转换为 ICO
.ico 仍是网站根目录中常用的图标格式,而多数在线转换器会要求把图片上传到服务器。本指南介绍如何从 PNG 生成正确的多尺寸 favicon.ico,全程无需上传。
阅读指南Apple Touch 图标:尺寸、格式与代码
访客将网站添加到 iPhone 主屏幕时,Apple Touch 图标明确指定要使用的图片。它与浏览器标签页图标、网页应用清单中声明的图标相互独立。
阅读指南用 SVG 实现深色模式网站图标
透明背景上的黑色标志在浅色标签页中效果很好,但在深色标签页中就消失了。ICO 格式无法自适应,而 SVG 网站图标可以:它能够包含一条根据浏览器主题切换颜色的 CSS 规则。
阅读指南在 HTML 中添加网站图标
可靠的 HTML 网站图标并不依赖某一个神奇标签,而是一小组可访问的文件和放在 head 中的链接。以下步骤可覆盖现代标签页、旧客户端和移动端快捷方式,无需堆积历史版本。
阅读指南网站图标不显示或不更新
网站图标缺失时,问题不一定出在文件本身。浏览器、CDN、Service Worker 和搜索引擎可能分别保留不同版本。按顺序排查,能避免同时更改多个因素。
阅读指南Next.js App Router 中的网站图标
App Router 可以根据约定文件或 metadata 对象生成图标元素。两种方式都有效,但如果没有明确规则就混用,很容易产生相互冲突的声明。
阅读指南SVG 网站图标指南
SVG 在各种像素密度下都能保持边缘清晰,还能根据主题调整颜色。但这种灵活性有一个前提:文件必须独立完整、结构简单,并在极小的空间中依然清晰可辨。
阅读指南