mobile touch icon #483
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 !
I have the following suggestions:
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?
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.
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.
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.
this should work for the favicon: the icon on the browser's tab .
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.
Thanks for your continued work on this.
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.
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.
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.
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 ;) ),
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 :) )
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:
<link rel="apple-touch-icon" sizes="180x180" href="img/favicon-180x180.png">
<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?
well; the transparent part will be replaced with mate black ...
now for the naming part. it's just a matter of consistency.
what do you think ?