Custom app logo (svg) doesn't appear in app header bar

[dbaum]

My app has a custom logo. It's just svg XML--not an actual file. It appears fine in most places--e.g., About screen, browser tab favicon. However, it doesn't appear in the app header bar even though I have that setting selected. When I use one of AppSheet's default logos, it does appear in the app header bar. Does anyone have guidance on what I might be doing wrong? Is a logo defined using svg maybe not supported in certain places, such as the app header bar?

(BTW, I made my svg logo using the great sample app from @GreenFlux. If you need a logo, check it out!)

[WillowMobileSys · Accepted solution]

Correct.  SVG's are not supported in all image locations.  

[WillowMobileSys · Accepted solution]

Correct.  SVG's are not supported in all image locations.  

[dbaum]

Thanks. Will submit as feature idea/bug.

[WillowMobileSys]

I'm curious, SVG's, at least in AppSheet, are really good for things that need to be data driven.  For example a better progress bar or progress donut,  maybe an image display of a dynamically changing number or even, as some have done, an image that combines several app attributes into a nice visual display.

Why do you wish to use an SVG for a logo?  Logo's are typically static items so that they can be easily recognized by users/customers .  I am not saying there is anything wrong with it.  Just curios about what your idea is. 

[dbaum]

All good and applicable points. I'm not trying to do anything other than just streamline my own effort to create logos. It's just efficient for me to not have to first create a standalone file and then load to AppSheet--especially as I iterate through draft designs. I'm going to investigate @SkrOYC's base64 suggestion and, regardless, know that I once I've finalized a stable design can create a file that should work reliably.

[SkrOYC · Accepted solution]

Try changing to a base64 one.

Check this post about a convertion tool for that:

Easy Icon/Background/Launch image generation with ... - Google Cloud Community

It's mainly focused on the Launch image but the same principles apply for Icons and Backgrounds.

Step #5 - Make it usable (from AppSheet's standpoint)

I found that AppSheet doesn't like this image even if we use @GreenFlux's method explained here

What I've found that works great is to convert it from svg to base64.

To do it, go to this cool site https://base64.guru/converter/encode/image/svg

There select the file you exported earlier.

On "Output format" select the second option:

And hit "Encode SVG to base64".

---

[dbaum]

Thanks. I followed your technique, but using a different converter since I'm not starting with an .svg file, but rather just svg code. I found easy64.org, where you can paste svg code and then copy the encoded base64 equivalent.

I'll have to report back whether the outcome includes the custom logo appearing in the app header bar on iOS. (My app is in some sort of technical purgatory right now where I can't load it in iOS--or add/regenerate tables.) I did confirm just now one nuance overlooked in my original post: A custom icon entered as either svg code or base64 code indeed appears in the app header bar when app is opened in a desktop browser. <--subsequently disconfirmed

[dbaum]

I sorted out my app's seeming technical problem (looks like it was my own issue) and tested the svg and base64 logos. As in many other posts I've come across, the guidance from @SkrOYC was spot on. Using the base64 encoding, my custom logo appears in the app header bar--in the app preview, in its own browser tab, and in iOS. Thanks again!

BTW, my previous comment that the svg logo properly displayed in the app header bar in a standalone browser tab was incorrect. Maybe what I observed was a caching issue as I switched between svg and base64 or some such. Anyway, in testing just now, the svg logo doesn't appear in the app header bar in a standalone browser tab. I'll edit my previous post to clarify.

[SkrOYC]

BTW, your "great sample app" hyperlink links to an image

[dbaum]

I corrected the link in the original post. Here it is separately: https://www.googlecloudcommunity.com/gc/Tips-Tricks/SAMPLE-APP-Custom-SVG-App-Icons/m-p/372405/highl....

Thanks for pointing out my mistake--I see now that I've been wrong in thinking that selecting a post's "Permalink" from its kabob menu actually copies that link.

Thanks also for your various helpful posts throughout the community.

[dbaum]

Update: I now encountered a place where the base64 logo doesn't display--in the AppSheet gallery itself from where you open your app. In the browser (Windows, Firefox), the space within the app's tile where the logo should appear is simply blank. On iOS, a warning icon (⚠️) appears instead of the logo.

So, it looks like the only reliable way to have a custom app logo appear everywhere is to use an actual file.

There are lots of nooks and crannies to AppSheet!

[SkrOYC]

Yes, the place where you won't be able to use SVG at all are:
Shortcuts on Android (idk about iOS)
"AppSheet Gallery" (which I don't use).

In general, SVG inside the app (except icon, launch and background) works great following @GreenFlux's method.
SVG on icon, launch and background need base64