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

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



updated title @Dynamic_Gravity

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

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


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.


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

yeah when I was helping a friend setup their favicons, I realized that you need to have the directory follow the one on your server.

This guide was nice in that it references the additional settings realfavicongenerator has

such as the path and version/refresh
the refresh is nice to clear the cache without needing users to manually do it

So either a firefox update or me clearing my cache has fixed the issue, after you uploaded the new icons.

My guess is clearing the cache seemed to solve the issue

1 Like

Hey @kreestuh / @wendell,

I’m the engineer who works on all things PWA in the Discourse project :wave:.

I believe what is blocking this forum from being installable as WebAPK on Android is the fact that your logo is using .jpeg instead of .png.

Can you try uploading a 512x512 PNG to https://forum.level1techs.com/admin/site_settings/category/branding?filter=manifest ?


Thanks! I just re-uploaded again. I thought I had it as a PNG for this size already based on our saved files but maybe not. Did that resolve the issue on your end?


Yes, that did fix it :tada:

User can install the site as an app now: