How to Add Any Website to Your Home Screen on iPhone and Android

Sometimes you think, “I open this page every day—why do I have to search for it each time?”

This guide explains, in the simplest way possible, how to use the standard “Add to Home Screen” feature on both iPhone (Safari) and Android (Chrome).

We also cover why icons often become the platform’s logo and what to do if you want full control over the icon.

How to Add a Website to the Home Screen on iPhone (Safari)

1. Open the page in Safari
2. Tap the Share button (□↑) at the bottom
3. Select Add to Home Screen
4. Confirm the name and tap Add

Your Home Screen icon is now created.

Why You Can’t Change the Icon Freely on iPhone

Safari looks for the website’s apple-touch-icon file when generating the Home Screen icon.

That means platforms like:

• Medium → Medium’s “M” logo
• Shopify → Shopify bag icon
• Etsy → Etsy “E” logo

will always display their own branding— not yours—when added to the Home Screen.

How to Add a Website to the Home Screen on Android (Chrome)

1. Open the page in Chrome
2. Tap the menu icon (︙) in the top-right
3. Select Add to Home screen
4. Confirm the name and add it

Android also uses the website’s configured icon automatically.

OJapp Tips — Recommended Reading
How to Make a PWA Feel Like a Native App: UX Tips for iPhone and Android

When “Add to Home Screen” Doesn’t Appear

• The website does not support Home Screen installation
• Safari is showing Reader View
• The Chrome menu hides the option for certain page types

The most common issue: the website does not provide icon settings.

Want to Use Your Own Icon and Name?

The standard iPhone/Android feature does not allow custom icons, app names, or URLs.

That’s where OJapp comes in.

• Use any image as your icon
• Choose any display name
• Works for Medium, Shopify, Etsy, portfolios—anything
• No Shortcuts required

👉 Use OJapp to add websites with custom icons

Once you learn this, adding websites to your Home Screen becomes much more useful and flexible.