收藏夹图标是收藏夹图标的缩写，也称为站点图标、页面图标或URL图标。 Favicon是与网站或网页相关联的图标。 网站的设计者可以用很多方法制作这个图标。 大多数浏览器都支持此功能。 浏览器可以在浏览器地址栏、书签列表中的站点名称之前，或基于选项卡的导航界面中的页面标题之前显示Favicon。

我们定义favicon的方法是放入名为“favicon.ico”的文件。网络服务器在的根目录下，单击，工业管理学( Industrial Engineering )。文件将自动显示在的收藏夹(书签)中。 后来出现了更灵活的方法。 也就是说超文本标记语言要指定任何网页图标的存储位置，请执行以下操作:

< link rel = " icon " href = " favicon.ico " type = " image/x-icon "/>

大多数情况下，使用ICO格式。 现代浏览器还支持可移植网络图形( png )和图形交换格式( gif )动画图像格式。

< link rel = " icon " href = "/favicon.png " type = " image/png "/>

现在，您可以使用其他向量格式创建favicon。 也就是说拯救( saving的简称) )。

SVG格式收藏夹图标

可以在不影响质量的情况下缩放SVG，其大小小于任何以前的图像格式。 也可以被植入。 半铸钢？ 钢铸铁( Cast Semi-Steel ) )。甚至嵌入视频和媒体查询。 这意味着，在浏览器APP应用程序或书签栏中使用SVG图标时，由于SVG内部提供的深色首选样式，用户可能会获得与站点主题相关的图标(浅色或暗色)。

首先，在站点的根目录中创建favicon.svg文件。

< SVG xmlns = " http://www.w3.org/2000/SVG " width = " 400 " height = " 344 " view box = " 0400344 " >


</svg > </svg >此外

然后，添加svg路径path。

< SVG xmlns = " http://www.w3.org/2000/SVG " width = " 400 " height = " 344 " view box = " 0400344 " >
<路径d= "m 108.7314.224 c-5.0972.044-13.3024.448-18.2325.342 c 74.05912.5482032.9922036.228 c 03.08525.5216.1175757 .. 1.4970.07-5.43.483-128.403-16.251.474-15.765-37.998.66 m37.60616.215 c-30.721 76.08 c 28.87.46329 .. 10.683 c 114.72989.379195.183195.183156200156 c 4.817085.2225.391 m 10.316139.489 c-1.3712.219.9397.2915.13411.2734.156
</svg > </svg >此外

然后，在网站的“标题”选项卡中更改图标声明。

< link rel = " icon " href = "/favicon.SVG " type = " image/SVG + XML "/>

然后，可以在选项卡上看到svg格式的favicon。

这里需要注意的是，两种不同的favicon声明方法不仅如此，还可以共存。

< link rel = " icon " href = "/favicon.png " type = " image/png "/>
< link rel = " icon " href = "/favicon.SVG " type = " image/SVG + XML "/>

然后呢铬例如，浏览器优先显示svg格式的图标。 声明png的favicon时，还会下载png格式的图标:

因此，为了提高性能，只需编写一条语句就可以节省系统资源。

SVG样式

在某些情况下，对于页面对比度，可以通过将svg图标设置为前景色或背景色来突出显示favicon。

< SVG xmlns = " http://www.w3.org/2000/SVG " width = " 400 " height = " 344 " view box = " 0400344 " style = " back kk “d =”m 108.7314.224 c-5.0972.044-13.3024.448-18.2325.342 c 74.05912.5482032.9922036.228 c 03.08525.5216.1216 6-7-1.4970.07-5.43.483-128.403-16.251.474-15.765-37.998.66 m 37.60616.215 c-30.721 76.08 c 28.87. . 14610.683 c 114.72989.379195.183195.183156200156 c 4.817085.2225.391 m 10.316139.489 c-1.3712.219.9397.2915.13411.27311

也可以通过设置svg的viewBox属性来缩小或放大图标。

< SVG xmlns = " http://www.w3.org/2000/SVG " width = " 400 " height = " 344 " view box = "-10425369 " style = " bbbbe “d =”m 108.7314.224 c-5.0972.044-13.3024.448-18.2325.342 c 74.05912.5482032.9922036.228 c 03.08525.5216.1216 6-7-1.4970.07-5.43.483-128.403-16.251.474-15.765-37.998.66 m 37.60616.215 c-30.721 76.08 c 28.87. . 14610.683 c 114.72989.379195.183195.183156200156 c 4.817085.2225.391 m 10.316139.489 c-1.3712.219.9397.2915.13411.27311

除了嵌入外，还可以扩展样式。

< SVG id = " SVG " xmlns = " http://www.w3.org/2000/SVG " width = " 400 " height = " 344 " view box = "-10425369 "
<样式>
# path { fill:# 231 f20； 行程:无； }
# svg {背景颜色: #dedede}
</style > </style >此外
< path id="path" d= "m 108.7314.224 c-5.0972.044-13.3024.448-18.2325.342 c 74.05912.5482032.9922036.228 c 03.08525.5216.1175757 .. 1.4970.07-5.43.483-128.403-16.251.474-15.765-37.998.66 m37.60616.215 c-30.721 76.08 c 28.87.46329 .. 10.683 c 114.72989.379195.183195.183156200156 c 4.817085.2225.391 m 10.316139.489 c-1.3712.219.9397.2915.13411.2734.156

黑暗模式

通过将媒体查询添加到样式中，可以将“暗模式”添加到svg图标中，首先创建明亮模式。

< SVG id = " SVG " xmlns = " http://www.w3.org/2000/SVG " width = " 400 " height = " 344 " view box = "-10425369 "
<样式>
# path { fill:# 231 f20； 行程:无； }
# svg {背景颜色: #dedede}
</style > </style >此外
< path id="path" d= "m 108.7314.224 c-5.0972.044-13.3024.448-18.2325.342 c 74.05912.5482032.9922036.228 c 03.08525.5216.1175757 .. 1.4970.07-5.43.483-128.403-16.251.474-15.765-37.998.66 m37.60616.215 c-30.721 76.08 c 28.87.46329 .. 10.683 c 114.72989.379195.183195.183156200156 c 4.817085.2225.391 m 10.316139.489 c-1.3712.219.9397.2915.13411.2734.156

其中，背景色为白色，前景色为黑色:

然后进入黑暗模式:

< SVG id = " SVG " xmlns = " http://www.w3.org/2000/SVG " width = " 400 " height = " 344 " view box = "-10425369 "
<样式>
# path { fill:# 231 f20； 行程:无； }
# svg {背景颜色: #dedede}
@ media (首选颜色:暗色) {
      # path { fill:# dede de； 行程:无； }
      # svg {背景色: #231f20}
}
</style > </style >此外
< path id="path" d= "m 108.7314.224 c-5.0972.044-13.3024.448-18.2325.342 c 74.05912.5482032.9922036.228 c 03.08525.5216.1175757 .. 1.4970.07-5.43.483-128.403-16.251.474-15.765-37.998.66 m37.60616.215 c-30.721 76.08 c 28.87.46329 .. 10.683 c 114.72989.379195.183195.183156200156 c 4.817085.2225.391 m 10.316139.489 c-1.3712.219.9397.2915.13411.2734.156

颜色恰恰相反，底色是黑色的，前景色是白色的。 动态切换的效果如下。

这个细节也消失了。

旅行队

是的，又是狩猎。 请看svg格式的Favicon支持列表:

IE的SVG Favicons没有完全支持的版本，不支持版本部分。 不支持5.5-11 IE版本。
80-99版完全支持SVG Favicons on Edge，并非所有版本都支持，12-79版不支持。
Firefox的SVG Favicons在41-100上完全支持，在4-40上部分支持，在2-3版的Firefox上不支持。
80-103完全支持Chrome的SVG Favicons，任何版本都不支持，4-79版不支持。
Safari的SVG Favicons没有完全支持的版本，也没有部分支持的版本，3.2-15.4 Safari版本不支持。
Opera的SVG Favicons在44-83中完全支持，任何版本都不支持，9.5-66 Opera版本不支持。
iOS版Safari的SVG Favicons都不完全支持，某些版本不支持，3.2-15.4 iOS版Safari不支持。
安卓浏览器的SVG Favicons没有完全支持的版本，也没有部分支持的版本，2.3-99安卓浏览器版本不支持。
Opera Mobile的SVG Favicons既没有完全支持的版本，也没有部分支持的版本，10-64 Opera Mobile版本不支持。
安卓版Chrome的SVG Favicons在97-100上完全支持，任何版本都不支持，97版以下的安卓版Chrome不支持。
任何版本都不完全支持Firefox for Android的SVG Favicons，任何版本都部分不支持，95-98 Firefox for Android版本不支持。
三星互联网上的SVG Favicons完全支持13-16，所有版本都不支持，4-12三星互联网版本不支持。

连三星浏览器都支持。 但是，只有Safari不支持。 不愧是苹果的生态系统，可以说是独一无二的。

尝试苹果自己的屏蔽图标声明，找到其他方法:

< link rel = " mask-icon " href = "/favicon.SVG " color = " # 990000 " >

但是，此类声明仅支持单色svg文件，并且无法使用媒体查询特性来控制图标颜色模式。 所以很明显mask-icon是无味的，蜡沿着嘴角流下。

实际上，苹果的官方网站苹果也没有使用mask-icon。 即使Safari支持本机svg favicon，苹果也最早每六个月更新一次Safari。 那时，黄花菜都凉了。

另外，在Safari中调试svg favicon也很痛苦，需要以下过程。

退出安全软件。
2 .输入~ /存储库/Safari/Favicon Cache/目录。
3 .删除所有文件
4 .访问目录~/library/safari/touchiconscache /，然后重复步骤3。
5 .进入~~/ library/safari/template icons /目录，重复步骤3。
6 .清空废纸篓
重新打开Safari

在Safari上查看最新的Favicon效果。

标签

鹌鹑可以找豌豆，在鹤脚上刻瘦肉，在细节上刻花，看到细节。 你最好在玩favicon后保留favicon.ico文件。 因为可能有人会在IE上访问你的网站。 最后，代码位于https://github.com/zcxey 2911/SVG _ website _ logo中，并且是开源的。 可以聊天。