SVG网站图标在GitHub Pages及Safari中无法显示的问题求助

阿华AIGC实验室

2026-3-31

我快把能试的方法都试过了！我用的是Safari浏览器，想在GitHub Pages上的个人作品集网站里显示SVG格式的网站图标（favicon），相关代码都放在了index.html的<head>标签里。

我已经做了这些操作：

多次清除浏览器缓存
清空了Safari的图标缓存目录 ~/Library/Safari/Favicon Cache/
网站没有使用任何第三方库

补充说明：我之前用的是Safari 18.x版本（后来才知道这个版本不支持SVG favicon），现在已经更新到26.2了，理论上应该支持了，但还是没搞定。网上关于这个的资料乱七八糟的，我甚至都不确定路径写法到底重要不重要，会不会是别的地方出了问题？

接下来是我试过的所有<link>标签写法：

<link
    rel="icon"
    href="myusername.github.io/portfolio/favicon.svg?v=1"
    type="image/svg+xml" />

<link
    rel="icon"
    href="/favicon.svg?v=1"
    type="image/svg+xml" />

<link
    rel="icon"
    href="favicon.svg?v=1"
    type="image/svg+xml" />

<link
    rel="icon"
    href="/favicon.svg"
    type="image/svg+xml" />

<link
    rel="icon"
    href="favicon.svg"
    type="image/svg+xml" />

<link
    rel="shortcut icon"
    href="favicon.svg"
    type="image/svg+xml" />

<link
    rel="icon"
    href="images/favicon.svg"
    type="image/svg+xml" />

我还试过各种mask-icon的写法：

<link
    rel="mask-icon"
    href="mask-icon.svg?v=1"
    color="#2149b5" />

我用的SVG图标代码是这样的：

<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.5 2.5H6.5V3.5H3.5V2.5Z" fill="black"/>
<path d="M6.5 3.5H7.5V4.5H6.5V3.5Z" fill="black"/>
<path d="M7.5 4.5H8.5V5.5H7.5V4.5Z" fill="black"/>
<path d="M2.5 3.5H3.5V4.5H2.5V3.5Z" fill="black"/>
<path d="M2.5 7.5H3.5V8.5H2.5V7.5Z" fill="black"/>
<path d="M3.5 8.5H4.5V9.5H3.5V8.5Z" fill="black"/>
<path d="M4.5 9.5H5.5V10.5H4.5V9.5Z" fill="black"/>
<path d="M5.5 10.5H6.5V11.5H5.5V10.5Z" fill="black"/>
<path d="M12.5 7.5H13.5V8.5H12.5V7.5Z" fill="black"/>
<path d="M11.5 8.5H12.5V9.5H11.5V8.5Z" fill="black"/>
<path d="M10.5 9.5H11.5V10.5H10.5V9.5Z" fill="black"/>
<path d="M9.5 10.5H10.5V11.5H9.5V10.5Z" fill="black"/>
<path d="M8.5 11.5H9.5V12.5H8.5V11.5Z" fill="black"/>
<path d="M6.5 11.5H7.5V12.5H6.5V11.5Z" fill="black"/>
<path d="M7.5 12.5H8.5V13.5H7.5V12.5Z" fill="black"/>
<path d="M8.5 3.5H9.5V4.5H8.5V3.5Z" fill="black"/>
<path d="M9.5 2.5H12.5V3.5H9.5V2.5Z" fill="black"/>
<path d="M12.5 3.5H13.5V4.5H12.5V3.5Z" fill="black"/>
<path d="M13.5 4.5H14.5V7.5H13.5V4.5Z" fill="black"/>
<path d="M1.5 4.5H2.5V7.5H1.5V4.5Z" fill="black"/>
</svg>

到底哪里出问题了？有没有懂行的大佬能明确告诉我，这些写法里哪些是对的、哪些是错的？真的快被搞疯了😭