Fan App (PWA) Configuration
Upload one icon, name your app, and shape what fans see when they install your site to their phone.
Your TribeNest site is also an installable app. Fans can tap an install button in their browser and your site lives on their home screen with your icon, your name and a full-screen experience.
The App (PWA) tab is where you set what that installed app looks like. Every team member sees this tab, so you don't need to be an owner.
This identity applies to whichever website you currently have live, whether you built it with the drag-and-drop editor or as a custom-code site. See my website.
What fans see
When a fan opens your site on their phone, the browser offers them something like Add to Home Screen or Install app. If they accept, your site installs as an icon on their device. Tapping it launches your app full screen, with no browser bar, which beats retyping your address every time.
Some browsers also show screenshots before the fan installs, as a preview of what they're getting.
How to configure your fan app
- Open Settings from the sidebar.
- Click the App (PWA) tab.
- Fill in App Name, Short Name and Description.
- Upload one square icon at the top of the App Icons section.
- Optionally add App Screenshots.
- Click Save PWA Configuration.
Saving uploads any new files first, then stores the configuration. You'll see a confirmation when everything is in.
Names and description
App name
The full name of your app, up to 50 characters. It shows in install prompts and the app's title. Use your full artist or band name. "JUNO Music Official" is fine.
Short name
A condensed version that fits under your icon on a phone home screen, up to 12 characters. Phones truncate longer names, so keep it tight. "JUNO" beats "JUNO Music Official" on a small icon.
Description
A short pitch, up to 200 characters. Some browsers show it on the install prompt. Keep it benefit-led. "Stream live shows, shop merch, and get exclusive drops from JUNO" works better than "Official JUNO app".
All three fields are required.
App icons
The quickest path is the box at the top of the App Icons section, labelled Upload one icon (512x512).
Upload a single square icon there and TribeNest generates the smaller sizes for you, then fills all three icon fields. A confirmation tells you the smaller icons were derived from your upload. Accepted file types are PNG, JPG and JPEG, and PNG is the one to reach for.
Check the maskable safe zone
As soon as you pick a file, two previews appear: your icon as it is, and a circular Maskable safe zone preview with a dashed circle drawn on it.
Some phones crop app icons into a circle or rounded shape. Keep your logo inside that dashed circle, because anything outside the edge may be cropped away on a fan's home screen. If your wordmark runs to the edges, add padding around it and upload again.
Design once, upload once
Design your icon at a large square size in whatever tool you like, export a single square PNG, and drop it into the one-icon box. You don't need to export three sizes by hand any more.
Setting each size by hand
Under the one-icon box, the three individual fields are still there if you'd rather control each size yourself:
| Field | Required size | Used for |
|---|---|---|
| Icon 192x192 | 192 by 192 pixels | Standard phone home screen |
| Icon 512x512 | 512 by 512 pixels | High-resolution displays and splash screens |
| Icon 96x96 | 96 by 96 pixels | Smaller contexts and notifications |
Each of these is checked before it's accepted, and a file whose dimensions don't match exactly is refused with an error. Resize and try again. Use these only if you want a different piece of artwork at a given size. Otherwise let the one-icon box handle it.
App screenshots
Screenshots are optional. Your app installs perfectly well without them, and they only affect the preview some browsers show before a fan installs.
If you do want them, there are two slots, each with an exact required size:
| Field | Required size | Used for |
|---|---|---|
| Wide Screenshot | 1280 by 720 pixels | Tablet and desktop install previews |
| Narrow Screenshot | 750 by 1334 pixels | Phone install previews |
Both accept PNG, JPG and JPEG, and both are checked against those dimensions before they're accepted.
Use real screenshots of your site: your homepage hero, your store, your membership page, anywhere visually rich. Avoid mockups with placeholder text, because this is the first impression a fan gets before they hit install.
Previewing what you picked
Once a file is selected, even before you save, TribeNest shows a preview of it under the upload field. That makes it easy to spot the wrong file or a soft export before you commit.
When changes go live
After you save, fans see the new icons, name and screenshots the next time they visit your site and get an install prompt.
Fans who already installed your app won't automatically get the new icon. Phone home screens hold on to the icon they were given, so seeing the new one usually means uninstalling and reinstalling. That's rarely worth asking for, so plan to update icons sparingly.
Icons are sticky
Once a fan installs your app, their phone keeps your icon. Treat each icon update as roughly permanent. It isn't worth iterating on weekly.
What you can't change here
A few things aren't on this tab, because TribeNest sets them sensibly on your behalf:
- The theme colour of the install prompt and status bar, which comes from your site's brand colours
- The splash screen, which is generated from your largest icon
- Orientation, which is left flexible so fans can rotate their phone
To change the brand colours behind all of that, head to my website.
Where to go next
- Style your site with brand colours and content → my website
- Tell fans the app exists → emails
- Connect a card processor so installs turn into orders → payment setup