Authenticator fails to fetch favicons for various websites (including Mastodon instances)
When adding 2FA for sites like mastodon.social, grape.ca, porkbun.com, etc., Authenticator (version 4.4.0 from Flathub) seems unable to find their favicons; or, at least, they don't show up for me, only the fallback (?)
icon shows up. Yet, all those websites show favicons in web browsers' tabs (tested with Firefox).
Here's what I was able to see in their HTML source in general...
Mastodon.social:
<link href='/favicon.ico' rel='icon' type='image/x-icon'>
<link href='/packs/media/icons/favicon-16x16-c58fdef40ced38d582d5b8eed9d15c5a.png' rel='icon' sizes='16x16' type='image/png'>
<link href='/packs/media/icons/favicon-32x32-249409a6d9f300112c51af514d863112.png' rel='icon' sizes='32x32' type='image/png'>
<link href='/packs/media/icons/favicon-48x48-c1197e9664ee6476d2715a1c4293bf61.png' rel='icon' sizes='48x48' type='image/png'>
<link href='/packs/media/icons/apple-touch-icon-57x57-c9dca808280860c51d0357f6a3350f4d.png' rel='apple-touch-icon' sizes='57x57'>
<link href='/packs/media/icons/apple-touch-icon-60x60-bb247db195d9ee9d8c687b2b048508d9.png' rel='apple-touch-icon' sizes='60x60'>
<link href='/packs/media/icons/apple-touch-icon-72x72-799d90b81f5b28cea7355a0c0b356381.png' rel='apple-touch-icon' sizes='72x72'>
<link href='/packs/media/icons/apple-touch-icon-76x76-015d73d770413d121873193153ae4ab5.png' rel='apple-touch-icon' sizes='76x76'>
<link href='/packs/media/icons/apple-touch-icon-114x114-211e68807b8d15707666a8d326d338b1.png' rel='apple-touch-icon' sizes='114x114'>
<link href='/packs/media/icons/apple-touch-icon-120x120-4c4e647d758bf1b2f47a53e2165a01d2.png' rel='apple-touch-icon' sizes='120x120'>
<link href='/packs/media/icons/apple-touch-icon-144x144-ff3110f7772743bdd0c1c47fb7b2d4e0.png' rel='apple-touch-icon' sizes='144x144'>
<link href='/packs/media/icons/apple-touch-icon-152x152-b12cbb1baaf4a6111d0efd391fd829c9.png' rel='apple-touch-icon' sizes='152x152'>
<link href='/packs/media/icons/apple-touch-icon-167x167-6f21a68f6a05a8b5cf25b1729e553728.png' rel='apple-touch-icon' sizes='167x167'>
<link href='/packs/media/icons/apple-touch-icon-180x180-a75559a0af48064c1b7c71b81f3bf7c6.png' rel='apple-touch-icon' sizes='180x180'>
<link href='/packs/media/icons/apple-touch-icon-1024x1024-db6849588b44f525363c37b65ef0ac66.png' rel='apple-touch-icon' sizes='1024x1024'>
Joinmastodon.org:
<link rel="icon" type="image/png" sizes="32x32" href="/_next/static/media/favicon-32x32.3a702fe9.png"/>
<link rel="icon" type="image/png" sizes="16x16" href="/_next/static/media/favicon-16x16.2cc38863.png"/>
Porkbun.com:
<link rel="apple-touch-icon" sizes="57x57" nonce="big_random_hash_here" href="/images/favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" nonce="big_random_hash_here" href="/images/favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" nonce="big_random_hash_here" href="/images/favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" nonce="big_random_hash_here" href="/images/favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" nonce="big_random_hash_here" href="/images/favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" nonce="big_random_hash_here" href="/images/favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" nonce="big_random_hash_here" href="/images/favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" nonce="big_random_hash_here" href="/images/favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" nonce="big_random_hash_here" href="/images/favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" nonce="big_random_hash_here" href="/images/favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" nonce="big_random_hash_here" href="/images/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" nonce="big_random_hash_here" href="/images/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" nonce="big_random_hash_here" href="/images/favicons/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/images/favicons/ms-icon-144x144.png">
Grape.ca:
I was not able to find a mention of "favicon" or anything that really looked like their icon in the page's source code. I don't understand how Firefox is actually able to display a favicon for that website! Maybe this part of their code is actually standard?
<div id="fullHeader" class="container desktopdisplay">
<div id="Header">
<div id="Logo">
<a href="/" ><img src="/local/images/grape-logo.png" width="185" alt="grape.ca" title="grape.ca"></a>
</div>
Edited by Jeff Fortin