Guide for Using E4 Logo on iOS Home Screen Web App (Tech Boomer Friendly Guide)

[jonbo]

Do you use E4 on your iPhone? Do you have a Web App created by putting a Safari Bookmark on your Home Screen? Do you hate that the app icon isn’t changeable and probably looks like this?

Me too, buddy, me too. That was until I made mine look like this:

That’s right everyone, the suffering is over. This guide will use an iOS Shortcut to allow you to remove the eyesore from your Home Screen. The shortcut will still open the Web App version just like yours currently does, it will not just open a tab in Safari.

If you already have the Web App created, skip to the next set of instructions to change the icon. You will still need the Web App created for the shortcut to work.

If you don't currently have the Web App for E4 created, follow these instructions.

1. Open Safari (it has to be Safari, no other browser) and go to https://www.elitefourum.com/

2. At the bottom of the screen, click the sharing icon
   

   

3. In the menu that appears, select “Add to Home Screen”
   

   

4. You’ll see the following screen. It doesn’t really matter what you name it. Click add.
   

   

5. Voila. E4 is now a Web App on your Home Screen. This will allow you to open E4 in a self contained instance of Safari that behaves like an “app” rather than being a tab in your Safari app. It makes it feel a lot more like using a native app rather than a mobile website. 4.

Once you've got the Web App and you're signed into it, follow these instructions to have the E4 logo be the app icon

1. Download the PNG version of the E4 Logo image to your phone which can be found here.

2. Open the Shortcuts app and add a new Shortcut. Search for Open Urls and select “Open URLs” as the shortcut type.
   

   

3. For the URL that you tell it to open, you’re going to put the E4 URL in, but you’re going to replace “https” with “webapp” (no quotes) so it says webapp://www.elitefourum.com. Then select Done.
   

   

4. Edit the shortcut you just created, select the top menu, then select “Rename” to rename your shortcut. I named mine E4.
   

   

5. Select the same menu again, and then select “Add to Home Screen.” A screen will come up that lets you set the app icon. Select the option to use your own photo, then browse for the E4 logo you saved earlier and select it. Select add.
   

   

6. The shortcut should now be on your Home Screen. Tap it to test it. It should just automatically open the Web App you already had on your phone.

7. The one downside to this is that you do still need the Web App to exist, since this shortcut is essentially just pointing at it to open it. The best way to deal with this to keep it clean is by moving the web app to its own Home Screen, then hiding that Home Screen so it doesn’t ever show for you. You can hide a Home Screen by being in the Home Screen editor (when all of the apps start wiggling with a minus sign on them) and then tap the dots at the bottom of the screen that represent your Home Screens. Untoggle the Home Screen that has your Web App and it will no longer show.

And just like that, your Home Screen has been rid of that horrible eyesore. Yes, it is ridiculous that you need to use a workaround like this just to change the icon of something on your Home Screen. Yes, it’s worth it to have a more aesthetically pleasing Home Screen.

Feel free to comment or reach out if you need help with any of the steps!

[pfm]

Are you using svg or png?

Below is a PNG with some transparent padding so it doesn’t bump up right to the edge of the app icon.

logo with padding

As mentioned, for anyone that didn’t know, site images can be found here → Efour Logo and Assets Archive

[jonbo]

PNG, I’ll update the post to reflect that.

[pfm]

Also I’ll just say, this is not an accident or oversight on Apple’s part that the default looks so bland. Apple is scared of this Progressive Web App (PWA) technology because it allows web apps to be built that don’t have to go through the app store, which threatens their 30% cut on in-app purchases.

They have tried multiple times to not allow PWA on their devices and were forced to reverse their decision, which is the only reason you are even able to use the E4 app.

So it’s no coincidence that the default look for the PWA is cold and uninviting. That’s an intentional design choice.

Anyway thanks to @jonbo for showing us how to improve it!

[ayoveer]

Good stuff @jonbo ! But I’ll keep my boomer bookmarks, I’m scared of new technology

[lamplamp]

Thanks for the guide, I feel like a whole new member lol

[ragingkraken]

To people on IOS who don’t use safari like I do. You do need safari to create the shortcut. But when you open it, it will open in whatever you set your default browser to. So if you don’t want to use safari, you don’t have to worry about the site always opening in Safari when you tap it.