title: Base64 icons favicon
body: <p>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:  <a href="https://stackoverflow.com/questions/11221292/local-file-website-favicon-works-in-firefox-not-in-chrome-or-safari-why">local (file://) website favicon works in Firefox, not in Chrome or Safari- why?</a></p>
  
  <p>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.</p>
  
  <p>I have seen the favicon generators where all sorts of icons are generated for all sorts of devices, like this generator:  <a href="https://www.favicon-generator.org/" rel="noreferrer">https://www.favicon-generator.org/</a></p>
  
  <p>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.  </p>
  
  <p>Is there a short-form way to get this to work?  The first <code>&lt;link&gt;</code> is for my favicon.ico.  If I am on the right track, I need to deal with all the rest of the commented <code>&lt;links&gt;</code> below.</p>
  
  <pre><code>&lt;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" /&gt;
  
  &lt;!-- &lt;link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png"&gt;
  &lt;link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png"&gt;
  &lt;link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png"&gt;
  &lt;link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png"&gt;
  &lt;link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png"&gt;
  &lt;link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png"&gt;
  &lt;link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png"&gt;
  &lt;link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png"&gt;
  &lt;link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png"&gt;
  &lt;link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png"&gt;
  &lt;link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"&gt;
  &lt;link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png"&gt;
  &lt;link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"&gt;
  &lt;link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"&gt; --&gt;
  
  &lt;!-- &lt;link rel="icon" href="https://ssl.gstatic.com/ui/v1/icons/mail/favicon.ico" type="image/x-icon"&gt; --&gt;
  &lt;!-- &lt;link rel="icon" href="www.basketball.superdocs.com/favicon.ico" type="image/x-icon"&gt; --&gt;
  </code></pre>