Potential Explanation As to Why L1 Icon is "Broken" (Uses the Discourse Default Icon) on Some Platforms

Continuing the discussion from Bookmarks changed icon [FIXED]:


Firefox sync did not fix it…
The icon is still broken on mobile, but now I think I have a better idea/explanation for how favicons work on desktop and mobile.

Whenever I view the page on firefox, it will default to the discourse logo in a tab on desktop and as a shortcut on mobile
Illustrated below
IMG_20200614_032534

I used a plugin to detect favicons

This is what the addon reported

For whatever reason, the discourse default icon is first and the smaller L1 icon is second.

My assumption is firefox will default to the biggest icon when loading it in a tab or shortcut. As the current logo is using the apple-touch-icon 180x180

If we look at a different website, say anilist
https://anilist.co

Or
Youtube

They have multiple different sized icons in addition to showing the correct icon as a shortcut. My guess is that discourse/firefox/android had a update where the favicon will default to using the biggest icon when possible. Thus leading to the one I have

I don’t have admin/mod access to the forum so I wouldn’t be able to change it to see if my assumption is correct.

If someone with admin access @moderators @wendell @kreestuh can change or confirm it, that would be helpful.

I can’t modify the icon on mobile either.

6 Likes

The icon is that way because they did not create a favicons for all the different sizes so larger modern mobile screens will pull discourse default icon.

It’s not broken, it’s just not what you’d expect.

1 Like

Can we request bigger icons?

Pretty close to the definition of being broken, don’t you think?

@kreestuh pls fix

4 Likes

It’s not a bug, it’s a feature.

5 Likes

image

updated title @Dynamic_Gravity
image

1 Like

:ok_hand::100: legit

1 Like

Is there any updates on this?

I am not sure.

@kreestuh have you had a chance to investigate this yet?

1 Like

Just uploaded new logo images to discourse. Any change?

1 Like

Works for me :+1:

I have to remove then re-add it to my homescreen but I now get a little “L1” logo on it as expected.

1 Like


It works in firefox on android for the new tabs and suggested add to homescreen.
I still have issues when i add it to the homescreen though

On firefox desktop, it still shows up as still the discourse stock icon
image
I wonder if it takes a little longer for desktop to refresh?
I am going to check again in 15 min

I tried the 3 suggested points from this stack overflow

It’s really weird because if you compare between twitch and youtube, twitch only has a 32x32 and 16x16 for their icons (firefox has no issues in the top sites tab). Meanwhile if you look at youtube’s desktop page, they have all the multiples of 16 up to 96 and 144.

I am starting to wonder if there needs to be a favicon.ico file on the server? All other sites I looked at seem to have a 16x16 version of the icon.
https://support.mozilla.org/en-US/questions/933769

Figured out why still didn’t work.

Also this tool is really helpful, figured out issues of favicons for all websites.
I ran it on L1

Results

The following solution mentions needing specific sizes, and declared in a particular order on the server to be properly configured

Seems that the solution with the least amount of headaches is to use http://realfavicongenerator.net to generate the favicon config, inspect it for any mistakes or vulnerabilities

The extra deep background information I found before the solution above

If we use the same addon to view the favicons, I can see a 180x180 and 32x32.


https://stackoverflow.com/questions/25863616/separate-favicon-and-android-homescreen-icon

With this explanation, it still doesn’t explain why firefox on desktops still have the discourse default symbol, but the new tab page on firefox android doesn’t have the same issues as desktop.

My guess after reading the stack overflow as to why firefox shortcuts on the homescreen use the discourse default icon is because firefox uses chrome for android for pwas.

On a different note, seems the config on the website has no issues when I add it to the homescreen

Any updates @kreestuh?

I reuploaded all the logos to Discourse, lmk if it’s working? I ran it through that testing site but some of the things it’s asking for aren’t available for me to add via the default configuration. For example, we have a better favicon format now but this test wants an even larger file-- but I have no place to add that in the default setup for Discourse (it only allows for 32x32 favicons).

1 Like

I happen to have an iOS 12 device handy, and therein Safari shows:
Bookmark: default Discourse logo
Add to Homescreen: L1 logo

I am still having issues on firefox desktop in the top sites section and firefox android shortcut (still displaying discourse default).
I wonder if it has something to do with the last error, in the detector tool

does Discourse allow you to upload a favicon config file?


This website allows for you to generate a config file by uploading a 260x260 image.
I generated a favicon setup using their tool with the L1 logo you uploaded

it doesn’t look like discourse lets you upload more than 1 file. Is it possible to upload a 192x192 for the large icon?


This website had similar issues to what we are experiencing


Solution for them was to add a 192x192 icon as their largest icon

While researching for a post in the Security Ticker thread, I found this in the source-code of anarc.at, and thought readers here might share in, and be amused by, other website operators’ aggravation:

<!-- cargo-culted from https://realfavicongenerator.net/ -->
<!-- for the record: it is absolutely ridiculous that new browsers
*and* operating systems each want their own little precious
snowflake just for a frigging icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
1 Like