Large icon not rendering in DiscourseHub as site logo

Product Support

AI-generated summary

A user reported that their site’s large icon was not displaying in DiscourseHub, showing a fallback ‘T’ instead. mcdanlj noted that the large icon setting appeared correct in the Discourse admin panel. After Moin suggested reconnecting the forum, pmusaraj investigated the site/basic-info.json endpoint and identified the root cause: the apple_touch_icon_url was pointing to an SVG file. Since React Native has difficulty rendering SVGs without significant overhead, DiscourseHub failed to load the custom logo. The solution required replacing the SVG with a PNG format. As the site administrator, mcdanlj confirmed they converted the file to PNG and verified the new URL, which should resolve the display issue once the site is re-added to the app.

1

I have a report from multiple users of DiscourseHub on my Maker Forums Discourse that our site icon isn’t showing up in DiscourseHub, but other icons are. For example:

image
image1179×1402 152 KB

Our icon is not a T. Searching, I found this page here that says that it’s the large icon:

However, large icon is set to what I expect:

image
image835×170 13 KB

Which icon does DiscourseHub ultimately now look to for its icons?

2

Does the icon show up when you remove the forum from the app and add and connect it again?

3

I’m one step removed from this since I’m not even using the app, but the question is passed on :crossed_fingers: :grin:

4

The T there is a new feature of DIscourseHub, but we only show it as a fallback. So something is incorrect with the icon fed by the site.

The app pulls this info from https://forum.makerforums.info/site/basic-info.json:

{
  "logo_url": "https://forum.makerforums.info/uploads/default/original/3X/0/5/05584cbc2f5f1b34f185f32d0629dee77d136aaf.svg",
  "logo_small_url": "https://forum.makerforums.info/uploads/default/original/3X/4/3/43eb68a2d10cdc07b8344fe88f71c331398a3666.svg",
  "apple_touch_icon_url": "https://forum.makerforums.info/uploads/default/optimized/3X/4/9/49e3e12260db3dff032cf3e247e0e0a29f4e1ab5_2_180x180.svg",
  "favicon_url": "https://forum.makerforums.info/uploads/default/optimized/3X/0/0/002f5ec485a94cb73fb086d5bc99be9659a3c6d2_2_32x32.png",
  "title": "Maker Forums",
  "description": "Forums for makers, 3D printing, Lasers, CNC routers, and more",
  "header_primary_color": "f3f3f3",
  "header_background_color": "333333",
  "login_required": false,
  "locale": "en",
  "include_in_discourse_discover": true,
  "mobile_logo_url": "https://forum.makerforums.info/uploads/default/original/3X/f/d/fd7ea1ba354a5fe92751ffee6b94956376073027.svg"
}

The apple_touch_icon_url there is an SVG file. Unfortunately, rendering SVGs in React Native is complicated, it requires extra libraries which is too much overhead. That’s why the logo isn’t being loaded.

You can ask the Maker forums admins to:

  • replace the SVG with a PNG for apple_touch_icon_url
  • remove and add the site again to Discourse Hub, it should be loading the new file
5

In the immortal words of Fezzik, I am the brute squad Maker Forums admin.

Thanks, I can render a PNG for the apple_touch_icon SVG.

$ curl -s https://forum.makerforums.info/site/basic-info.json | jq -r .apple_touch_icon_url
https://forum.makerforums.info/uploads/default/optimized/3X/a/4/a4e106feadbfd5408e36e343a6193def96852f8b_2_180x180.png