SVG网站图标（Favicon）是否必须为方形？技术疑问求证

结论：技术上并非强制要求，但推荐使用方形viewBox #

1. 技术层面：非方形SVG可正常作为favicon使用 #

和.ico、.png这类栅格图标不同，SVG是矢量格式，即使<svg>的viewBox宽高不等，主流浏览器也会自动保持其原有宽高比显示，不会像栅格图那样强制拉伸扭曲。比如非方形的SVG图标会在浏览器标签栏的方形展示区域内居中显示，仅在周围留出空白，不会出现变形问题。

而栅格图标（ico/png）则必须为方形：如果原图非方形，浏览器会直接拉伸至方形，导致图案变形，因此必须将非方形图案置于方形模板中才能正常展示。

2. 为什么多篇文章推荐使用方形SVG？ #

这些文章的提示并非错误，而是基于视觉一致性与兼容性的最佳实践：

• 统一视觉体验：浏览器标签栏、书签栏等图标展示区域默认是方形，非方形SVG会在区域内留白，和其他网站的方形图标视觉风格不一致，影响整体观感。
• 兼容更多场景：虽然主流浏览器支持非方形SVG favicon，但部分旧浏览器、桌面快捷方式生成工具或特定平台可能对非方形SVG的支持存在瑕疵，方形能覆盖更多使用场景。
• 延续设计习惯：传统图标体系均以方形为标准，使用方形SVG能契合用户对图标的视觉预期，同时减少设计与开发环节的沟通成本。

内容的提问来源于stack exchange，提问作者Arad