Skip to main content

How To Add a Custom Icon to a Mobile Landing Page Shortcut

When someone saves your landing page to their phone's home screen, the shortcut can show your own icon instead of a generic one. Here you'll learn how to add the icon to a template landing page and how contacts save the page on their phones.

Written by VipeCloud Support

When a contact saves your landing page to their phone's home screen, the shortcut shows an icon you choose instead of a generic browser icon. This works well for pages people come back to, such as digital business cards, FAQs, or other resource pages.

How to Enable the Landing Page in Your Email Template

A custom icon needs an HTML email template with its landing page turned on.

  1. Click the Communication tab in the left navigation.

  2. Click Email dropdown in the sidebar.

  3. Click Templates.

  4. Open the HTML template you'd like to use.

  5. Click Edit Template Details.

  6. Check Enable template landing page.

  7. Click Save Template Details.

Once the landing page is on, its link shows above the builder.

How to Add the Custom Icon

  1. In your template, click Edit Landing Page Details.

  2. Click Add Icon.

  3. Upload or select your image.

The recommended icon is a 512 x 512 pixel PNG. Once an icon is set, the same card has Change Icon and Remove Icon buttons. The Edit Landing Page Details button only shows when the template's landing page is on.

The icon appears when someone saves the landing page to their home screen, if their phone and browser support custom icons.

Which Phones and Browsers Support Custom Icons?

Not all mobile browsers and operating systems support custom icons.

  • On iPhones, only Safari supports this feature.

  • Some browsers can save a shortcut but ignore the custom icon.

Test on your own phone first, so you can guide contacts based on their phone and browser. The table at the end of this article lists support for each phone and browser pairing.

How to Save a Landing Page to a Phone's Home Screen

iPhone: Safari (no other iPhone browsers can save to home page)

  1. Open the landing page URL in Safari.

  2. Tap the Share icon (bottom center - a square with an arrow).

  3. Scroll down and tap Add to Home Screen.

  4. Check the preview of the icon and page name, then tap Add in the top right.

Android: Chrome

  1. Open the landing page URL in Chrome.

  2. Tap the three dots menu in the top-right corner.

  3. Select Add to Home screen.

  4. Edit the name if you'd like, then tap Add.

  5. Tap Add again to confirm placement.

Android: Samsung Internet

  1. Open the landing page URL in Samsung Internet.

  2. Tap the three lines menu (bottom right).

  3. Choose Add page to > Home screen.

  4. Confirm the name and tap Add.

The shortcut then appears on the home screen with your custom icon.

Don't See Your Phone or Browser Above?

Not all phone and browser combinations support Add to Home Screen or custom icons. See this table for details:

Video Walkthrough

Use the timestamps below to jump to specific sections:

  • 0:00 - What a custom home screen icon looks like

  • 3:04 - Which phones and browsers support custom icons

  • 4:17 - Enable the landing page in your email template

  • 5:41 - Add the custom icon

Related Articles
Did this answer your question?