图标网站图标网站推荐!

收藏夹图标是收藏夹图标的缩写,也称为站点图标、页面图标或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  备注:小项目

本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 1825684320@qq.com 举报,一经查实,本站将立刻删除。
如若转载,请注明出处:https://www.fxzy666.com/16533.html