收藏夹图标是收藏夹图标的缩写,也称为站点图标、页面图标或URL图标。Favicon是与网站或网页相关联的图标。网站的设计者可以用很多方法制作这个图标。大多数浏览器都支持此功能。浏览器可以在浏览器地址栏、书签列表中的站点名称之前,或基于选项卡的导航界
收藏夹图标是收藏夹图标的缩写,也称为站点图标、页面图标或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中,并且是开源的。 可以聊天。
创业项目群,学习操作 18个小项目,添加 微信:FX951741939 备注:小项目!
如若转载,请注明出处:https://www.fxzy666.com/16533.html