Base64图标收藏夹 [英] Base64 icons favicon
问题描述
我一直在努力使favicon正常工作.最后，我通过使用针对先前问题的答案的Base64版本来使其工作:
I have been struggling to get favicon to work. Finally, I got it to work by using a Base64 version per the answer to this previous question: local (file://) website favicon works in Firefox, not in Chrome or Safari- why?
现在，我想将书签保存到手机的主屏幕，但是手机使用的图标不是收藏夹图标.相反，它只是一个带有字母"S"的黑盒子(是我应用标题的第一个字母).我确定这是默认设置.
Now, I want to save the bookmark to my phone's home screen, but the icon the phone uses is not favicon. Instead, it is just a black box with a letter "S" (being the first letter of my app's title). I'm sure this is by default.
我见过favicon生成器，其中为各种设备生成了各种图标，例如生成器: https://www.favicon-generator.org/
I have seen the favicon generators where all sorts of icons are generated for all sorts of devices, like this generator: https://www.favicon-generator.org/
生成器创建许多文件.Base64字符串很长.对每个设备的每个图标文件重复所有这些操作，将导致一个大而丑陋的html标头.
The generators create a lot of files. The Base64 string is very long. To repeat all this for every icon file for every device would result in a big, ugly html header.
是否有一种简短的方法可以使其正常工作?第一个< link> 用于我的favicon.ico.如果我走的路正确，则需要处理下面所有其余的< links> 注释.
Is there a short-form way to get this to work? The first <link> is for my favicon.ico. If I am on the right track, I need to deal with all the rest of the commented <links> below.
<link href="data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAABILAAASCwAAAAAA
AAAAAABxbGj/cWxo/3FsaP9xbGj/cWxo/3FsaP9xbGj/cWxo/3FsaP9xbGj/cWxo/3FsaP9xbGj/
cWxo/3FsaP9xbGj/ODIr/zgyK/84Miv/ODIr/zgyK/84Miv/ODIr/zgyLP84Miz/ODIr/zgyK/84
Miv/ODIr/zgyK/84Miv/ODIr/0I8Nv9CPDb/Qjw2/0I8Nv9CPDb/QTs3/0E7OP9BOzf/QTs4/0E7
Of9CPDb/Qjw2/0I8Nv9CPDb/Qjw2/0I8Nv9AOjT/QDo0/0A6NP9AOjT/QDo1/0I7L/9DPSr/Qjws
/0M9Kv9FPib/QTsy/0A6Nf9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6NP9AOjT/Pzk2/0I8Lv85M0v/
Kyd1/xMRw/8SEMf/IyCP/z04PP9BOzL/QDo1/0A6NP9AOjT/QDo0/0A6NP9AOjT/QDo1/0I8L/88
NkL/DgzT/xEPyv8AAP//AAD+/wIC+f8gHZj/Qjsv/0A6NP9AOjT/QDo0/0A6NP9AOjT/QDo0/0E6
Mv8/OTj/Hxyd/xUTvf8IB+b/Cgne/xcVtf8VE73/BAPz/yIflP9EPib/Pzk3/0A6NP9AOjT/QDo0
/0A6Nf9CPC3/NjFT/x0aov8cGqX/EhDG/xEPy/8CAfr/AAD+/wAA//8MC9n/QTsy/0A6NP9AOjT/
QDo0/0A6NP8/OTb/Qz0q/zAsZv8YFbP/JCGM/woJ4f8EA/P/BQTx/wYG6/8JCOT/GBaz/z85Nv9A
OjP/QDo0/0A6NP9AOjT/QDo1/0E7Mf88NkH/FBK//yQhi/8YFrL/EA7N/xMRwv8UEr//DQzV/xgW
sv9CPCz/QDo2/0A6NP9AOjT/QDo0/0A6NP8/OTf/RD4m/x4bn/8RD8j/FhS5/wkI4v8AAP//AAD+
/wAA//8tKXH/Qz0p/z85N/9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6M/8/OTb/KSV7/wQD8/8ODdP/
ExHE/xQSwP8qJnr/Qz0q/z85Nv9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6NP9AOjX/QDoz/0M9Kv82
MVT/JiKH/y0ocf9AOjT/RD4o/z85Nv9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6
Nf8/OTb/Qjwt/0U+JP9EPSj/QDo0/z85N/9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6NP9AOjT/QDo0
/0A6NP9AOjT/QDo0/0A6Nv8/OTf/Pzk3/0A6Nf9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6NP9AOjT/
QDo0/0A6NP9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6NP9A
OjT/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAA==" rel="icon" type="image/x-icon" />
<!-- <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> -->
<!-- <link rel="icon" href="https://ssl.gstatic.com/ui/v1/icons/mail/favicon.ico" type="image/x-icon"> -->
<!-- <link rel="icon" href="www.basketball.superdocs.com/favicon.ico" type="image/x-icon"> -->
推荐答案
- 此来源声称您没有需要那么多行.5行就足够了.但由于您的网站图标的大小为16x16，因此无需调整尺寸来放大，甚至可以跳过其中的一些图标.它取决于原始图像的大小以及您要支持的平台，但是您甚至可以下降到1行.(如果您不打算支持IE10，而仅使用png，则可以放弃favicon.ico.)
- 在大多数情况下，4位图像深度就足够了.这意味着16种颜色，对于您的图标示例来说，这是绰绰有余的，但即使在高分辨率下，也适用于大多数徽标.顶一下..............................................................................................................................png支持4位，即使它无损，也可以节省大量空间.它比24位jpg或gif文件小，并且质量更好.如果4位不够，则8位仍然是可行的选择，并且不需要任何图标.您的图片是1150字节，而4位png版本是202字节(您可以使用IrfanView减小颜色深度并另存为png).
- 如果您可以使用javascript并且需要多个声明，则可以让js在浏览器中构建html.您甚至可以使用unicode文本而不是base64并使用js对其进行转换，或者动态地构建您的图标(以下示例不使用js).
- this source claims that you don't need that many lines. 5 lines is enough. but since your favicon is 16x16 and resizing for bigger is unnecessary you can even skip some of those. it depends on the original image size, and what platforms you want to support, but you can even go down to 1 line. (you can ditch favicon.ico if you don't plan to support IE10- and use only png.)
- in most cases 4-bit image depth is enough. that means 16 colors, which is more than plenty for your icon example, but works with most logos even in high resolutions. png supports 4-bit, and it saves a ton of space, even though it is lossless. it is smaller then 24-bit jpg or gif files, and has better quality. if 4-bit is not enough 8-bit is still a viable option and no icon needs more. your image was 1150 Bytes, and the 4-bit png version is 202 Bytes (you can use IrfanView to decrease color depth and save as png).
- if you can use javascript and you need multiple declarations, you can have js build the html in the browser. you can even use unicode text instead of base64 and convert it with js, or build your icon dynamically (the example below doesn't use js).
我不是一名Android专家，但要使示例正常运行，必须足够:
i'm not an android expert, but for the example to work this much must be enough:
<link rel="icon" type="image/png" sizes="16x16" href="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAMFBMVEU0OkArMjhobHEoPUPFEBIu
O0L+AAC2FBZ2JyuNICOfGx7xAwTjCAlCNTvVDA1aLzQ3COjMAAAAVUlEQVQI12NgwAaCDSA0888G
CItjn0szWGBJTVoGSCjWs8TleQCQYV95evdxkFT8Kpe0PLDi5WfKd4LUsN5zS1sKFolt8bwAZrCa
GqNYJAgFDEpQAAAzmxafI4vZWwAAAABJRU5ErkJggg==" />
这篇关于Base64图标收藏夹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
