Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

mobile touch icon #483

Merged
merged 10 commits into from Feb 2, 2018

Conversation

Projects
None yet
3 participants
@hatemzidi
Copy link
Contributor

commented Nov 24, 2017

adding apple touch icon if someone needs to add a shortcut on home screen using safari.
added also configuration file if android/windows phone users want the same.

23998216_10157012680723782_2066063242_o

@hatemzidi hatemzidi changed the title Apple touch icon mobile touch icon Nov 24, 2017

@hugbug

This comment has been minimized.

Copy link
Member

commented Nov 24, 2017

Very nice. Thanks a lot.

You have absolute links at several places, for example:
<link rel="manifest" href="/manifest.json">
Can all links be made relative?

@hatemzidi

This comment has been minimized.

Copy link
Contributor Author

commented Nov 24, 2017

yeah, i can make them relative.
it wanted them to be read only from the root of webui.

hatemzidi added some commits Nov 24, 2017

@hugbug

This comment has been minimized.

Copy link
Member

commented Nov 25, 2017

Appreciate your work!

There is one issue though. That icon is different from the icon used in Windows and Mac apps:

screen shot 2017-11-25 at 22 31 16

Resource files:

Shouldn't we use the same icon in the web-app?

@hatemzidi

This comment has been minimized.

Copy link
Contributor Author

commented Nov 26, 2017

indeed, i tried to use those images, except that for iOS, the icon must be "round-squared", that's why it's without the ring in my screenshot.

i can keep it round for android but i have to add a background for iOS/WindowsPhone. I'll try to find another alternative.

i'll keep you posted !

@hugbug

This comment has been minimized.

Copy link
Member

commented Nov 26, 2017

the icon must be "round-squared", that's why it's without the ring in my screenshot.

Safari and Chrome icons are also round.

Attached is a source graphic file for the icon (in GIMP format), maybe you'll find it useful.
appicon-512.xcf.zip

@hugbug

This comment has been minimized.

Copy link
Member

commented Jan 25, 2018

Can you please correct Safari and Chrome icons?

@hatemzidi-pro

This comment has been minimized.

Copy link

commented Jan 26, 2018

@hugbug
yup, i'll fix that asap. sorry for the delay!

@hugbug

This comment has been minimized.

Copy link
Member

commented Jan 27, 2018

Thank you very much.

I think it would be better to use the round icon on iOS too. That must be allowed because Safari itself on iOS has a round icon (with white background).

It's not about what looks nicer, it's more about consistency.

Thanks again.

@hugbug

This comment has been minimized.

Copy link
Member

commented Jan 28, 2018

I have the following suggestions:

  • use the same graphic for all icons (the round one);
  • name all icon files using pattern favicon-256x256.png;
  • do not use additional files to specify icons. I don't like creating extra files when there is no need for them (I mean browserconfig.xml and manifest.json):
    • for MS use <meta name="msapplication-square310x310logo" content="img/favicon-310x310.png"> (example);
    • for Android <link rel="icon" sizes="256x256" href="img/favicon-256x256.png"> should work.

I'm not an expert in this area. If I'm wrong please correct me.

There are a lot of different sizes. Can we reduce the number of image files by providing only few large icons? Would clients automatically use them and resize them down when necessary?

@hatemzidi-pro

This comment has been minimized.

Copy link

commented Jan 29, 2018

hey Andredy,

use the same graphic for all icons (the round one);

in fact, i kept the flat one for the iOS as a personal preference (flat design, more modern etc) but, i understand the consistency point.
i'll manage that in my next push.

name all icon files using pattern favicon-256x256.png;

this point is kind of tricky. in fact, the image size is dependant to the device resolution: for a better display [of the icon], it's advised to give the device the best size for its ppi.

do not use additional files to specify icons.

i understand, i used to not put all my stuff in index page (as a best practice (?)). MS and Android devices will continue asking for those files anyway but that won't harm.

do not use additional files to specify icons.

this should work for the favicon: the icon on the browser's tab .
but here's tricky point, for the shortcuts on the home screen, each device (ios, android or MS) needs a specific size to handle the icon as a part of its home screen.

the simplest [nightmare] example is for the iPhone vs iPad, Retina or not (cf : https://makeappicon.com/ios11icon)

thereby, i suggest to you to keep those icons to keep a best display on a largest set of devices.

i'll update the PR asap.

@hugbug

This comment has been minimized.

Copy link
Member

commented Jan 29, 2018

Thanks for your continued work on this.

thereby, i suggest to you to keep those icons to keep a best display on a largest set of devices.

I understand the need for optimized icons for each screen resolution and dpi. For example iOS apps are required to provide them in order to fulfil app store requirements. For a web app we are less obligated, right? That would be totally appropriate to provide a lot of icons if we would have manually crafted each one of them. But that's not the case as we just downscale the largest one we have.

That's the reason why I think we could provide the largest one as required for each platform and let the platform to scale the icon down if necessary. If I'm mistaken feel free to add more icons.

A question about apple icon: is it necessary to have a white background? What would happen if the icon is transparent? And the same question about MS icon.

@hatemzidi

This comment has been minimized.

Copy link
Contributor Author

commented Jan 30, 2018

in fact, the iOS requirements aren't only for the AppStore, the apple-touch-icon meta is mainly for the web apps to be pinned on the home screen.

in my last commit, i only added the largest one for the ios (index.html:78), hope that the older devices can manage it correctly (notice that non retina devices won't)

following the same reasoning (index.html:82-83), Android need the 192x192 for older devices and the 256x256 for the newer devices.

finally, i kept only one squared icon for MS phone: 150x150 medium icon (index.html:85)

regarding the real round transparent icon on iOS, unfortunately Apple forbids that. home screen's icons must be plane round and squared.

@hugbug

This comment has been minimized.

Copy link
Member

commented Jan 30, 2018

Apple forbids that

😉

I don't need Apple's permission for graphics hosted on my site (nzbget webui is a website). The question is if Safari/iOS can work with transparent icons or such icon will look awful? I don't care if Apple forbids them for apps where they have a review process.

@hatemzidi

This comment has been minimized.

Copy link
Contributor Author

commented Jan 30, 2018

lol, i may misaddressed my idea.

by saying "forbids" i was talking about the technical constraint for the transparent icons on iOS home screen (the main idea for this PR in fact ;) ),
transparency will work fine on safari and chrome, and that will be using favicon.

now, to pin the webui as a shortcut, we need extra icons, that's why i added the iOS/Android/Ms ones... it's just to get a better icon on the shortcut of device's home screen without retyping the url each time on a browser. ( check my first screenshot above :) )

@hugbug

This comment has been minimized.

Copy link
Member

commented Jan 30, 2018

Yes, I understand all that. I was wondering what would happen if "apple-touch-icon.png" would be transparent?

My idea was to provide as many favicons as necessary with multiple resolutions but all with the same motive and all transparent so that only resolution would be different (as required by each device). Then use appropriate icons within platform specific meta tags. For example:

for iOS:

 <link rel="apple-touch-icon" sizes="180x180" href="img/favicon-180x180.png">

for Android:

 <link rel="icon" type="image/png" sizes="256x256" href="img/favicon-256x256.png">

I'm not against having multiple icons with different resolutions. I was just trying to make all of icons looking exactly the same (all transparent) and all having similar names because they would not be platform specific anymore (just different sizes). Is this possible?

@hatemzidi

This comment has been minimized.

Copy link
Contributor Author

commented Jan 30, 2018

Yes, I understand all that. I was wondering what would happen if "apple-touch-icon.png" would be transparent?

well; the transparent part will be replaced with mate black ...

now for the naming part. it's just a matter of consistency.
i may suggest you this mask : favicon-SIZE[-opaque].png
example :

  • favicon-180x180-opaque.png for a non transparent icon : usefull for ios phones
  • favicon-180x180.png for normal and transparent icon : usefull for safari/chrome/android

what do you think ?

@hugbug

This comment has been minimized.

Copy link
Member

commented Jan 30, 2018

Oh, black isn't good for our icon :)

i may suggest you this mask : favicon-SIZE[-opaque].png

Yes, very good.

@hugbug hugbug merged commit cd6bf68 into nzbget:develop Feb 2, 2018

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
@hugbug

This comment has been minimized.

Copy link
Member

commented Feb 2, 2018

Perfect, thanks for your work!

hugbug added a commit that referenced this pull request Mar 25, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.