You can either follow the step-by-step instructions in this article or scroll to the bottom to watch the full recorded video from our live training session.
This feature allows you to brand your landing pages with a custom icon that shows up when a contact saves your page to their phone’s home screen. It's a great way to create professional, recognizable shortcuts—whether for digital business cards, FAQs, or other resource pages.
Why Use a Custom Icon?
When someone saves your landing page to their mobile device's home screen, you can control what icon shows up. Instead of a generic browser icon, your contact will see an image you’ve chosen—boosting your brand visibility and making the shortcut easy to recognize.
🕒 See what this looks like in action at 00:00:00 in the video.
🔹 Step 1: Enable the Landing Page in Your Email Template
To add a custom icon, the landing page must be enabled in your email template.
Go to Communication Templates > Email from the left navigation.
Select the HTML template you’d like to use.
Click Edit Template Details.
Check the box labeled “Enable Template Landing Page.”
Click Save Template Details.
Once this is done, you’ll see a landing page URL in the upper corner of the template.
🕒 Demonstrated in the video at 00:04:17
🔹 Step 2: Add the Custom Icon
In your template, click Edit Landing Page Details (usually in the upper-right).
In the card that opens, look for the Icon section.
Click Add Icon and upload your image.
Recommended size: 512 x 512 pixels
Recommended format: PNG
🕒 Watch this step at 00:05:41
Once uploaded, this icon will appear when someone saves the landing page to their home screen—if their device and browser support custom icons (more on that below).
🔹 Compatibility Notes
Keep in mind that not all mobile browsers and operating systems support custom icons. For example:
On iPhones, only Safari supports this feature.
Some browsers may allow saving a shortcut, but ignore the custom icon.
For the best results, test on your own device first and be prepared to guide contacts based on their device/browser combo.
🕒 Compatibility overview begins at 00:03:04
Click here to scroll down to a detailed breakdown of the compatibility for each mobile operating system & browser pairing.
How to save a custom landing page to your mobile home screen
iPhone: Safari (no other iPhone browsers can save to home page)
iPhone: Safari (no other iPhone browsers can save to home page)
Open the landing page URL in Safari
Tap the Share icon (bottom center - a square with an arrow)
Scroll down and tap "Add to Home Screen"
You'll see a preview of the icon and page name - tap Add in the top right
You're done! A button will now appear on your home screen using your custom image
Android: Chrome
Android: Chrome
Open the landing page URL in Chrome.
Tap the three dots menu in the top-right corner.
Select “Add to Home screen.”
Edit the name if you'd like, then tap Add.
Tap Add again to confirm placement.
Done! Your custom image will now show on your home screen.
Android: Samsung Internet
Android: Samsung Internet
Open the landing page URL in Samsung Internet.
Tap the three lines menu (bottom right).
Choose "Add page to" > "Home screen."
Confirm the name and tap Add.
Your custom icon will be added to your home screen.
Don't see your phone/browser above?
Not all phone/browser combinations support "Add to Home Screen" and/or custom icons. See this table for details:
Transcript
Transcript
00:00:00
Hello everybody. My name is Drew and today we're going to be talking about how you can uh save landing pages on people's or have people save landing pages on their phones as a little button and how you're able to do that with a custom icon that will be displaying on that button itself so that things are all nice and branded. Um, and so, uh, I'm gonna just because it's something that not everybody does all the time, I'm going to just show you exactly what I'm talking about in an example here. So, we're looking at a mobile home screen and this is a landing page that's been saved as a button to the uh to the home screen. And that little icon you see right there is an icon that was custom set by me, the owner of that landing page, so that it'll display like that on the home screen for that uh for that contact. And so this is something that is um this is something that's useful if as you're doing business if um if it's useful for people to have a resource page of some sort uh frequently asked questions, frequently visited URLs, uh anything where it would be just really helpful for you to be able to tell them, hey, you know, click on that button that um that I asked you to save to your phone and you'll be able
00:03:04
to find that information there. Uh like digital business cards is an example that uh some people do with this. Um and so the the the main gist of this is to help you with um having making it so that you know how to tell your uh your contacts how to do this. And also the uh the kind of the the feature here that we're going to be covering is that you can have a custom image that will display on that button when it's saved. Now one thing that is important to know here is that not every uh phone and browser combination will work with this. Not like for instance with iPhones only Safari is the like Safari is the only uh mobile browser type that can do this. Um and also not all some some browsers are able to save these buttons but they can't they won't necessarily uh listen to that custom image that you're uh instructing them to uh to display. Um, so there are going to be a whole bunch of useful resources in the help center article that is paired with this video.
00:04:17
So, be sure to look at that. That's also going to be where you'll see the step-by-step instructions for how to uh how to how to uh how to instruct your contacts to save these buttons to their mobile phones home screens. But what we're going to really just cover here in this walkthrough is how to set that image uh to the template which is actually quite easy. So let's do that right now. Okay. So um we're talking about um email template landing pages in particular the HTML type of email template. So, you get there by going to communication templates under email on the left navigation. If you haven't already, you can make your email template, but we're going to go into an existing template. Now, of course, it's essential that your template has uh landing pages enabled for it. In this example, we actually don't. So, I want to show you how to do that. I know that this doesn't have landing pages enabled because there's no URL displayed over here in the upper right or upper left corner.
00:05:41
So, I can turn that on by clicking on the edit template details button and then clicking on that checkbox that says enable template landing page and then clicking on save template details. And now we can see landing page and we got a URL for our landing page. So, if you already see that when you go into your template, then you are all set and you can move on to this next step where we go to this next button that says edit landing page details in the upper right corner. And then in this card that opens up, you can see right here where we can add an icon which will then be what displays on the mobile home screen. Note right here that it says the recommended uh size and format is 512 x 512 pixels and PNG is the recommended format. See, then you can click on this add icon button. And I'm just going to grab an icon that is already um in my library. And there we go. We have done it. It's as as easy as that. Um I would recommend uh you know you can probably go to Canva or even Chad GPT asking it to make um an icon along these lines. And then of course you can also test it to see how it looks um on your phone as well. Again, just being sure to make sure you're using a browser and phone operating system that supports this. All right. Well, it's as easy as that adding that image and just turn to the Help center for step-by-step instructions for how to do this for all the different mobile operating system and browser types. So thank you very much.