Preview of Anvil App in WhatsApp

What I’m trying to do:

Change the background color of the preview image that WhatsApp generates when I share a link to my Anvil app. The image I selected for my app (in Settings > General > App Logo) has a transparent background and very dark colors. WhatsApp gives it a black background so you can’t really see anything. Can I set the background color myself anywhere?

What I’ve tried and what’s not working:

Googled the issue, searched the forum.

1 Like

I doubt Anvil can do anything about this. It’s simply how WhatsApp treats logos.

What you can do about it is to give your logo a background color instead of transparent background

1 Like

It can be influenced by setting certain meta attributes in the head-section:

<meta property="og:image" content="blabla.com/img/logo.png">;

The problem is that Anvil automatically adds such links for the selected App Logo, which are prioritized by WhatsApp.

Changing the background color to white in the App Logo is indeed possible but looks less professional compared to most other page icons.

Try https://realfavicongenerator.net/

You can set a background colour and generate a new png image.

You can also specify a border radius so your image sits nicely in a home screen icon if you choose to use the PWA functionality (otherwise it can look cramped).

It will produce a full set of images for Desktop/Android/IOS.

This is quite useful for Favicons and PWAs, thanks. But WhatsApp doesn’t use the favicon as a preview image. It uses the icon specified here:

<meta property="og:image" content="blabla.com/img/logo.png">;

Anvil doesn’t let me set this one separately as far as I can tell.

Just use the 512x512 png image (after adding a background colour) as the Anvil App Logo. It should work better than the transparent one.

This is not an option as I want to keep the background transparent.

You may be looking for: