How To Add your Website to your iPhone homepage (S...

JesseWarmerdam · ‎05-22-2016

Hi Weebly users,

Today I wanted to teach you guys a neat trick that enables you to give your website the look of an app on your iPhone homescreen. Take a look at the 'VandaagApple'-app on my homescreen, which is actually my own Weebly Website:Yeah, that looks neat, huh! To accomplish what I did there, you'll have to walk through a few steps.

1. Create your app icon

First, you must create an app icon. That icon can be any size larger than 114px in both width and height, as it will be automatically resized. The icon should be square, as iOS rounds it for you. Your app icon should resemble your website logo, so that users can easily find it.

2. Upload your app icon

After you've created an icon, you'll have to upload your icon. You can upload it to a hidden page on your website, but you could also upload it to a public dropbox folder or something. Make sure it'll stay, and not be automatically deleted after a while, as it's the resource for the image. After uploading, copy the image url (which should end in .jpg or .png) and move to step three.

3. Open the weebly editor and follow the steps

After you've opened your website in the editor, move to the 'Settings' tab and open the 'SEO' menu from the vertical menu at the left. Scroll down to the header code and enter the following code:

Replace the green text with the link to the image you've created in step one and two. For clarification: the different <link> attributes are there for different icons, as iOS is being used by different sized devices with different display density.

Step 4: publish your website

After you've added the code to your website, you're ready to publish it. First, hit the 'Save' button in the lower right corner in the Weebly editor.

Step 5: Add your website to your homepage

Last but not least, you'll have to try and see how your icon looks on your iPhone or iPad. You can add a website to your homepage by opening Safari, opening the desired website and hit the arrow in the bottom center of the screen. Hit 'add to homescreen' to move further. Now, give your website-app the desired name and hit the button in the upper right corner of the screen to add it to your homescreen. When you've done everything as described above, you should be able to see your self-made icon shining on your homepage.

Bonus: give your website an app-like appearance

Now you've got yourself an app icon for your website, you only have to let it look like a real app. Add the following code below the code you've just entered in the Weebly editor to achieve this.

This code removes the top and bottom bar, so you'll only see your website content. Looks great!

Adam7 · ‎05-22-2016

Thanks for sharing, @JesseWarmerdam! I'm sure our users will appreciate offering this with their sites.

deltron11 · ‎05-29-2016

This is fantastic! It worked really well for my site. Much appreciated.

TrulyZen · ‎09-24-2016

Has this process continued to work for you?

I have placed all of this in Settings/SEO/Header and none of the changes work. Thr website view still shows the address bar, as well as the navigation bar, in the browser.

Also, no image appears. I have tried to upload it in weebly using the THEME/CSS Edit section... as well as linking it to my DropBox. Each one shows the image in the browser. while testing the links...yet the browser does not show any icon when adding the Home Scree. The image is 150x150 w/ 300DPI.

ANY HELP is greatly appreciated.

andrewstpaul · ‎12-02-2016

Have you found a soultion? I have attempted everything and nothing is working. Does this take time to take efeect like 2 days? or once you upload the images and cose it works immeadtily?

jamesmccrary · ‎12-18-2016

See my other response below. Got it working perfectly.

jamesmccrary · ‎12-18-2016

Each time you make a change, you need to clear your history and website data. You also need to delete any existing web app icon from your homescreen.

SambaPathak · ‎08-08-2017

This did work for me! But whenever users go to a different page in my website, they get redirected back to safari. Is there a way to stop that from happening? Is there a way to make the entire website work through that one link on the home screen, sort of like an app?

EdoFromItaly · ‎03-15-2019

Very useful information! it would be great to be able to create a button named "Add to homescreen" place on the home page of the website (now become a Webapp thanks to you ).

EdoFromItaly · ‎04-21-2019

How can I create the icon also for Android devices? Thanks in advance for your replies...

Loyalandtrue77 · ‎12-11-2020

Is there currently any solution for this in the new square website editor ?

I've tried everything vias the 'Add custom header code' and nothing works. Keeps on telling me it's ivalid HTML.

Adam7 · ‎12-13-2020

Can you paste in the exact code you are trying to add, @Loyalandtrue77?

Loyalandtrue77 · ‎12-13-2020

Hi Adam. Below is one example of what I've been trying. I have zero knowledge of code other than what I've been copying from around the internet. I've uploaded my logo to a hidden page on my website but haven't sized it correctly yet. Just wanted to see that it would save first. The website isn't published at the moment.

Always says Invalid HTML when I tray saving.

Adam7 · ‎12-14-2020

Hmm... that seems fine. Try changing the very end from:

"/>

to:

"></link>

Loyalandtrue77 · ‎12-15-2020

I tried exactly as you suggested but it didn't work i'm afraid. Still getting the dreaded 'Invalid HTML detected'.

Adam7 · ‎12-17-2020

Ahh, I see - we limit this to only script, noscript, and meta tags at the moment. I'm not sure if there's an easy way to add this right now, @Loyalandtrue77.

Loyalandtrue77 · ‎12-17-2020

That's ok Adam, thanks for trying to help me anyway, I appreciate that.

It's something that wil hopefully be improved upon in time.

How To Add your Website to your iPhone homepage (Step-by-Step Guide)