Base64 icons favicon

Question

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?

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.

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/

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.

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"> -->

Answer 1

1. 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.)
2. 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).
3. 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).

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==" />