# How to turn an AI-built app into an installable PWA with your own icon

> Publish an app built in NorthernGo to its own .northerngo.com subdomain, upload a square icon, and install it on the home screen on both iOS and Android.

Source: https://northerngo.com/resources/create-pwa-app-icons/
Language: en
Updated: 2026-08-15

---
**Open My Projects, press More on the project card and choose Create PWA. Pick a subdomain name, upload a square 512×512 icon under App icon, and press Save. NorthernGo then serves a web manifest, Apple meta tags and a service worker on your-name.northerngo.com, so the app installs straight to the home screen. Requires Premium or Pro.**

### An installable app needs three things, not a checkbox

A Progressive Web App is not a setting you switch on. A browser only offers to install a page when three things are true for that origin: a web app manifest declares a name, a display mode and at least one icon; a service worker is registered; and the page is served over HTTPS. Miss one and the install option simply never appears — no error, no warning, nothing in the console.

In NorthernGo you do not assemble those files. When you publish a project to a PWA subdomain, the backend serves the manifest, the icon and the service worker for that hostname, and injects the manifest link and the Apple meta tags into the app's HTML on the way out. What you supply is a name and, optionally, a square image.

The feature sits on the Premium and Pro plans. On the Free plan the menu entry opens the upgrade dialog instead, and a Free project's subdomain is never served — requests are redirected to the `https://northerngo.com/?app=<projectId>` fallback. That distinction turns out to matter a lot, so it comes back at the end.

### Step 1: Claim a subdomain

Open **My Projects**, press **More** on the project card and choose **Create PWA**. The panel is labelled *Choose PWA link*: you type a name into the field and the fixed suffix `.northerngo.com` sits to the right of it.

The name is sanitised before it is claimed. Only lowercase `a–z`, digits and hyphens survive; the result has to be 2–63 characters and cannot begin or end with a hyphen. Everything else is removed rather than converted, and that catches Swedish users in particular: spaces are deleted, not turned into hyphens, and å, ä and ö are stripped instead of transliterated. "Åsas Bageri" becomes `sasbageri`. Type the name exactly as you want it, hyphens included — `asas-bageri` — and check the confirmation dialog, which shows the address that was actually reserved.

Around thirty names are reserved by the platform (`www`, `api`, `app`, `admin`, `shop`, `store`, `blog`, `docs`, `support`, `demo`, `northerngo` and similar). If another project already holds the name you want, you get a clear message plus an available suggestion instead of silently overwriting someone else's app — the reservation happens inside a transaction, so two people cannot claim the same name at once.

Press **Save** and the app answers on `https://your-name.northerngo.com` immediately, with a certificate already in place. If you would rather use a domain you own, that is a Pro feature and a different flow — see [connecting a custom domain](/resources/connect-custom-domain-ssl/).

### Step 2: Upload the icon

Same panel, under **App icon (optional)**: press **Choose logotype** and pick a file. The preview square next to the button updates immediately, before anything is saved.

Two things are worth knowing about what happens to that file.

**It is not resized or re-compressed.** The browser reads it with a `FileReader` and stores the resulting base64 data URL in the project's `iconUrl` field exactly as you picked it. A 3 MB photo stays a 3 MB photo. Because the whole value has to fit inside a single database document, there is a hard ceiling of roughly 700 kB on the encoded string, and a larger file is rejected with a message asking for a smaller image. Export a 512×512 PNG or WebP and you will land far below the limit.

**The same image is used for every size.** The manifest declares your icon at both 192×192 and 512×512, and marks both entries `purpose: "any maskable"`. Maskable is the part people get wrong. Android crops the icon to whatever shape the launcher uses — circle, squircle, rounded square — and it crops generously: roughly the outer 10% on each side can disappear. Keep the logo inside the middle 80% of the canvas and let the background colour run all the way to the edges. A logo drawn edge to edge will come out with its corners sliced off.

Skip the icon and you do not get a broken image. The backend generates one on request: a 512×512 SVG, amber `#d97706`, rounded corners, with the first letter of the app name in white. It looks intentional, which makes it a decent placeholder, but it is a letter and not your brand.

Then press **Save**. The icon and the subdomain are stored by the same request, so choosing a logo and closing the panel without saving leaves the previous icon in place.

### Step 3: Install it on a phone

Open `https://your-name.northerngo.com` on the device itself.

On **Android**, Chrome shows an install prompt, or an *Install app* entry in the browser menu, once the service worker has registered. On a first visit that can take a second or two.

On **iOS** there is no prompt at all, and there never has been — Apple does not implement the install event. Open the page in Safari, press the Share button and choose **Add to Home Screen**. Because the injected `<head>` carries `apple-mobile-web-app-capable`, `apple-mobile-web-app-status-bar-style` and `apple-mobile-web-app-title`, the app then launches without Safari's interface, with a translucent status bar, and with your project name under the icon.

Either way the manifest sets `display: "standalone"`, so the installed app has no address bar and no browser tabs.

### What the manifest actually declares

Worth reading once, because some values are fixed and not yours to set:

```json
{
  "name": "Your project name",
  "short_name": "Your project name",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#050810",
  "theme_color": "#d97706",
  "icons": [
    { "src": "<your icon>", "sizes": "192x192", "purpose": "any maskable" },
    { "src": "<your icon>", "sizes": "512x512", "purpose": "any maskable" }
  ]
}
```

Both `name` and `short_name` come from the project name in My Projects, so renaming the project renames the installed app. The background and theme colours are platform values — near-black `#050810` and NorthernGo amber `#d97706` — and there is currently no per-project override, which means a bright brand will still flash a dark splash screen on launch.

The same hostname also serves a service worker at `/sw.js`, registered automatically by an injected script. It precaches the Tailwind and Font Awesome CDN files so the app renders styled rather than naked when there is no connection, serves navigations from cache first so you never get a white screen, falls back to a grey placeholder for images it does not have, and never caches calls to the backend. That last rule is deliberate: a cached database response would show stale data with no way for the user to tell. If your app needs to behave sensibly offline, the [offline-first patterns](/resources/offline-first-web-apps-pwa/) matter far more than the service worker does, because the built-in database fails cleanly instead of lying to you.

### What this does not give you

- **No app store presence.** A PWA is installed from the browser. It is not listed in the App Store or on Google Play, cannot be found by searching there, and cannot use in-app purchases. For a store submission you need the [native Capacitor export](/resources/export-native-ios-android-capacitor/) instead.
- **No push notifications.** The served service worker has no `push` handler, so there is nothing to subscribe to.
- **No per-project splash screen or theme colour.**
- **No separate `apple-touch-icon` tag.** Current iOS versions read the manifest icon, but on older releases that predate manifest icon support, a home screen shortcut can fall back to a screenshot of the page.
- **Free projects are not served on their subdomain.** The guard checks the owner's plan on every single request and redirects to `northerngo.com/?app=<id>`. Adding *that* link to the home screen does not install your app — it installs the NorthernGo platform PWA, with NorthernGo's name and icon, because on that URL your app runs inside a viewer on our domain rather than being the page itself. This is by far the most common reason someone reports that their icon did not show up. Most builders never draw this line at all, which is part of what the [comparison with Lovable](/alternative/lovable/) is about.

### Troubleshooting

**"The name is already taken by another app."** Someone claimed it first, and the message includes an available alternative. Names are global across every NorthernGo project, not per account.

**The save is rejected because the icon is too large.** Your image, base64-encoded, exceeds roughly 700 kB. Re-export it at 512×512 as PNG or WebP.

**The icon is a letter on an amber square.** No `iconUrl` was stored, which means either no file was chosen or **Save** was never pressed afterwards.

**The icon is cropped, or the corners are cut off.** That is maskable cropping doing its job. Add padding: logo inside the middle 80%, background colour to the edges.

**The old icon keeps coming back after I changed it.** Manifests are cached both by the browser and by the installed app. Remove the app from the home screen, clear site data for that subdomain, reload the page and install it again.

**Chrome offers no install option.** Confirm you are on `https://your-name.northerngo.com` and not on the `?app=` link, then open DevTools → Application → Service Workers and check that a worker is registered and active. No worker, no install prompt.

**It installs but opens in an ordinary browser tab.** The shortcut was created from the `?app=` fallback or from a redirected URL, so `start_url` no longer matches the manifest scope. Delete it and install again from the subdomain root.

## Frequently asked questions

### Can I install an app built with AI on my phone without the App Store?

Yes. Publish the project to a .northerngo.com subdomain with Create PWA, open that address on the phone, and install it — an install prompt in Chrome on Android, or Share then Add to Home Screen in Safari on iOS. It launches full screen with your icon and no address bar, and no store review is involved.

### What size should the app icon be?

Square, 512×512 pixels, as a PNG or WebP under roughly 700 kB once base64-encoded. The image is not resized for you and the same file is used for every declared size. Because the icon is marked maskable, keep the logo inside the middle 80% of the canvas so Android does not crop away the edges.

### Why is the NorthernGo icon showing instead of mine after I added the app to my home screen?

You installed the ?app= fallback link rather than the PWA subdomain. On that URL your app runs inside a viewer on northerngo.com, so the browser installs the NorthernGo platform app with its manifest and icon. Free projects always redirect there. Upgrade to Premium or Pro, create the PWA subdomain, and install from that address instead.

### Does a PWA work offline?

The interface does. A service worker on the subdomain caches the page shell and the CSS the design depends on, so the app opens styled in airplane mode instead of showing a white screen. Database and AI calls are never cached and fail cleanly without a connection, so the app should render from local defaults first and sync afterwards.

### Can I send push notifications from a NorthernGo PWA?

No. The service worker that is served has no push event handler, so there is nothing for a device to subscribe to and no way to deliver a message. If notifications are essential to the product, export the project and build it as a native app with Capacitor, where the platform notification APIs are available.

---

## Related

- [How to build a web app that still works without internet](https://northerngo.com/resources/offline-first-web-apps-pwa/)
- [How to export an AI-built app as a native iOS and Android project with Capacitor](https://northerngo.com/resources/export-native-ios-android-capacitor/)
- [How to connect your own domain to an AI-built app](https://northerngo.com/resources/connect-custom-domain-ssl/)
- [How to store data in an AI-built app with Supabase](https://northerngo.com/resources/connect-supabase/)

---

NorthernGo is an AI-powered platform for building production-ready web apps with zero coding. Local AI generation via WebGPU is unlimited and free, and you own all generated source code. https://northerngo.com/