Jump to content

iOS - DMS icon - Tip?


eleijen

Recommended Posts

Hello,

 

I noticed when going to DMS on my ipad and create a shortcut on my homescreen (Safari, Export, Add to Home Screen) I get a direct link to DMS but the icon is garbled, it is a mini representation of the webpage.

When you include a 512x512 PNG of the DVBViewer logo in the SVCweb directory that is called apple-touch-icon.png, next time you create a shortcut on IOS with Safari you will have a nice DVBViewer logo on the shortcut.

Idea to include this in the standard fileset of DMS?

Link to comment
vor 17 Stunden schrieb eleijen:

When you include a 512x512 PNG of the DVBViewer logo in the SVCweb directory that is called apple-touch-icon.png, next time you create a shortcut on IOS with Safari you will have a nice DVBViewer logo on the shortcut.

 

I have no iOS device, so I can't try. Does it work with the following steps?

  • Make a copy of \SVCweb\gfx\dvbviewer-256.png.
  • Rename it to apple-touch-icon.png and store it in the SVCweb directory.

256x256 is not optimal, but far better than the 16x16 favicon.ico.

 

Another solution could be to tell Safari where dvbviewer-256.png is by adding the line

<link rel="apple-touch-icon" href="../gfx/dvbviewer-256.png"/>

to the <head>...</head> section of \SVCweb\ios\iphone.html and \SVCweb\ios\ipad.html.

 

Please try and let me know your results.

 

P.S. Are you using the Desktop or Mobile Web Interface on your iPad? My <link rel...> suggestion applies to the Mobile Web Interface (http://[DMS-IP]:8089/ios). For the Desktop Web Interface the link has to be added to the head section of  \SVCweb\index.html.

 

Edited by Griga
P.S.
Link to comment

First things first, grabbed the 256 pixel DVBViewer icon from the gfx folder, renamed to apple-touch-icon.png -> black line around icon. Tried to resize png to 512*512, same effect. Converted a random jpg to 512x512 png, no black border. Reading along it seems to be wrong from the source and therefor creates a black border

i found a great site https://realfavicongenerator.net/ that gives the right preview of png files how they will look on apple. 
maybe you can see if you can supply a png file that gives no black border.

 

will do the embedded code test later, although pretty sure it will work, as long as there is a png that does not give the black border.

 

some examples of how the icon looks like without the apple-touch-icon and the black border icon.

 

cheers Erik

E1810DC3-DC19-4DBE-A80B-571FCF17A48E.jpeg

6CCC3157-D2C0-441E-A1C0-8FC29E263884.jpeg

Link to comment

Found a years old shortcut still live on my old ipad, in the early days it just worked out of the box ? (although not the dvb rs icon)

 

 

7C332B82-BB23-4885-9590-02C0428CA30D.jpeg

Link to comment

Thanks for feedback.

 

vor 7 Stunden schrieb eleijen:

it seems to be wrong from the source and therefor creates a black border

 

Or Apple is to blame. Windows shows a transparent border. The PNG was created with Gimp, if I remember it correctly. I've loaded it with IrfanView and saved it with a transparent border, just to make sure, but the Favicon Generator site still displays it with a black border, commenting

 

Zitat

Your favicon is transparent. This is usually a good thing, but not for iOS Web Clips which are supposed to be opaque.

 

The upcoming 3.2.0 release will contain <link rel="apple-touch-icon".../> tags. If someone finds a solution that works under Windows and iOS, it will be used in future. Otherwise iOS users will have to live with the black border. I'm sure it won't kill them. To be true, I'm a bit tired of having to provide a special solution every time when it comes to Apple ;)

 

Link to comment
  • 7 months later...

I tested this here on my phone and it works like it should. The icon is shown in the browser and when I add it to the Home Screen it is also available.

I also tested if a password can be used within the url, in my case http://admin:admin@192.168.100.57:8080/ios/  (//admin:admin@192.168.100.57:8080/iOS/)

 and it worked like it should. No given password would force the browser to ask for the credentials while connecting.

IMG_0100.PNG

IMG_0102.PNG

IMG_0101.jpg

Link to comment

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...