Change your profile's browser-tab icon and let visitors install it

That little icon in the browser tab is your favicon. We build it from your avatar, so it matches your profile without any extra work. The same image becomes your app icon when a visitor adds your profile to their phone. This article shows how to change it and what visitors see.

Before you start

The favicon comes straight from your avatar, so there's nothing separate to upload. You change the tab icon by changing your avatar in the Designer, the panel where you change how your profile looks. You need a profile with an avatar set. To upload or crop one, see add and adjust your avatar and cover image.

How do I change the icon in the browser tab for my profile?

The tab icon is your avatar, so swap your avatar to swap the icon:

Open your profile.
Select Edit In Designer.
In the left sidebar, find the Avatar layer and select the pencil icon next to it.
In the upload area, select Select, then upload a new image in the Choose Media window.
Select Publish profile (or Publish changes) in the top toolbar.

After you publish, we shrink your avatar into a small square icon for the tab. A clear, plain image reads best at that tiny size, so a face or a logo beats a busy photo.

What is the favicon for my profile, and where does it come from?

A favicon is the small icon a browser shows in the tab, next to your page title. We make yours from your avatar. We take your avatar, fit it onto a small square, and use that as the tab icon. So your tab icon always matches your profile photo or logo.

You don't upload a favicon on its own. Change your avatar and the favicon changes with it. If your profile has no avatar yet, the tab shows the NoTrouble logo until you add one.

Can visitors add my profile to their phone's home screen?

Yes. Every profile can be saved to a phone's home screen as its own app icon. Your avatar becomes the app icon, and your profile name becomes the app name. When a visitor opens it from their home screen, it runs in its own window with no browser bars around it.

Here's how a visitor saves it:

On an iPhone (Safari): tap the Share button, scroll down, then tap Add to Home Screen.
On Android (Chrome): open the browser menu, then tap Install or Add to Home screen.

You don't switch anything on for this. It works on every published profile.

Why is the tab icon showing my photo on a white square?

That white square is on purpose. To make a clean icon, NoTrouble fits your avatar onto a white background and trims it to a square. So a tall or wide photo ends up centered with white around it, and a see-through logo sits on white instead of staying clear.

If you don't like the white edges, upload an avatar that already fills a square shape. A square crop of your face or a logo that reaches the edges leaves little or no white. You can crop your avatar square before you publish, on the same avatar layer you edited above.

How do I set the app name and color when my profile is installed?

The app name and color come from your profile, so you set them in two places:

App name: this is your profile name. To change it, rename your profile. On a small home-screen icon, the phone may shorten a long name, so a short name shows in full.
App color: two of your profile colors carry over, both set under Colors in the Designer. Your Page color paints the loading screen while your app opens. The bars and status bar around your app use your Accent color, and fall back to your Page color if you haven't set an accent. To change either, open the Colors panel, set the color, then publish. See change your profile's colors.

If you haven't set these colors, we use a dark default so the app still looks finished.

Why isn't my favicon updating?

Two things can hold up a new tab icon, and both clear on their own:

It's still being made. When you publish a new avatar, we build the small icon in the background. This takes a short while. Give it a minute, then reload the page.
Your browser saved the old one. Browsers hang on to favicons hard, so the tab may show the old icon even after the new one is ready. Close the tab and open your profile in a fresh one, or do a hard reload. On a phone home-screen icon, remove the icon and add it again to load the new one.

If the tab still shows the old icon after that, make sure you published. The Designer is a preview until you select Publish profile (or Publish changes) in the top toolbar.