How to add custom icon for iPhone Screen (not fav icon)

App Development Page Builder
1

Hi

My users will access my tadabase app from their SmartPhones (iPhone and Android).

When they add a bookmark to my app, to their smartphone home screen, I’d like to be able to specify the icon they see to access the app afterwards. This makes the tadabase.io app look/feel much more like an installed app.

To do this I must add this code to the section

When I create a HTML section to the tadabse app home page and add this html code in the source html box …tadabase strips it out.

Is there any work around or alternative method to do this

tks
Noel

2

Hey @arthurbuy

I’m not sure if this works correctly, maybe you can test it out and let me know. (I am a diehard Google Ecosystem fan) :upside_down_face:

Copy and paste the following into the Custom Header Section found in your Tadabase App Settings.

Include just the first line or all if you have the right size

REF (html - Why use <link rel="apple-touch-icon image_src" ...>? - Stack Overflow)

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />

<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />

<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-retina-ipad.png" />

If that doesn’t work, please try adding the following as well

<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">

Bonus:

  • Status Bar Appearance: To customize the status bar appearance when the web app is launched from the home screen, use the apple-mobile-web-app-status-bar-style meta tag. This can be set to default, black, or black-translucent.
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
1 Like
4

Excellent that worked THANK YOU

1 Like