Add custom app icons (favicon and home-screen icon)

Why add custom app icons

Beyond the header inside the app, your support portal shows an icon in the browser tab (a favicon) and — when a customer or agent installs it as an app on their phone, tablet, or desktop — an icon on their home screen or app dock. Without customization, everyone sees Essential Support’s own default icon instead of yours.

Settings → Branding has an “App icons” section with three distinct uploadable icon types, each with its own required format and size, because each is rendered by a different platform in a different way.

Open App icons

1. Click the gear icon in the top bar to open Settings.
2. In the left-hand navigation, click Branding. It opens on its Branding sub-tab by default.
3. Scroll to App icons. Its helper text reads: “Upload square icons for the browser tab and the installed app. PWA icons must be at least 512×512.” Three rows follow, one per icon type.

Browser icon (favicon)

Shown in the browser tab and bookmarks.

• Accepted formats: PNG, JPEG, WebP, GIF, SVG, or ICO — any image format the browser can show as a tab icon, including .ico or .svg files.
• No minimum size — small or scalable icons are fine.
• Maximum file size: 256 KB.
• Must be square.

PWA icon — iOS and macOS Safari

Used when a customer or agent adds your portal to their iPhone, iPad, or Mac home screen from Safari.

• Accepted formats: PNG or WebP only.
• Minimum size: 512×512px.
• Maximum file size: 1 MB.
• Must be square and full-bleed — no rounded corners or built-in padding. iOS/macOS apply their own corner rounding on top of your artwork.

PWA maskable icon — Chrome and others

Used when installed from Chrome/Android and other platforms that mask the icon into a circle or rounded square.

• Accepted formats: PNG or WebP only.
• Minimum size: 512×512px.
• Maximum file size: 1 MB.
• Must be square, with your artwork kept inside a safe zone (about 10% padding on every side) — the platform crops the outer edge into a circle or rounded square, so anything near the edge can be clipped.

Upload, replace, or remove an icon

1. Next to the icon type you want to set, click Upload (this button reads Replace once that icon is already set).
2. Choose your file. If your browser can read the file’s dimensions, they’re checked immediately: a non-square image is rejected with “Icon must be square.”; an appleTouch or maskable icon under 512×512 is rejected with “Icon must be at least 512×512px.”
3. On success, “Icon saved.” appears and the preview updates. To remove an icon, click Remove next to its preview — the workspace falls back to Essential Support’s default icon for that slot.

Notes and edge cases

• The favicon can be an SVG. If your browser can’t preview a particular file inline (some .ico variants), it’s still uploaded as a raw file and validated server-side rather than blocked client-side.
• The favicon updates in your browser tab immediately. The PWA icons update in the Settings preview right away too, but an app that’s already installed on someone’s home screen only picks up a new icon the next time it’s (re)installed, or on its next periodic manifest refresh — not instantly.
• The installed app’s theme color and splash-screen background always track your header color (see Set your header color), even if you never touch the icons.
• A full icon-design guide covering safe zones and platform differences is linked directly from the App icons section in Settings.

Related: Set your header color and Upload your logo.