search

biopython / biopython.github.io

Source of biopython.org website, migrated from MediaWiki
biopython.org
153 stars 281 forks source link

Added favicon #178

Closed LalitNM closed 3 years ago

LalitNM commented 3 years ago

@peterjc, @JoaoRodrigues and @MarkusPiotrowski Have a look at this pull request and let me know if something else can be merged with this pull request(e.g. removing apple-touch-icon-144.png

This fixes #86.

peterjc commented 3 years ago

Could you update apple-touch-icon-144.png too? It still uses the old icon.

LalitNM commented 3 years ago

I updated apple-touch-icon.png. Have a look.

peterjc commented 3 years ago

Was it deliberate to rename apple-touch-icon-144.png to apple-touch-icon.png? I'd have to remind my self of the Apple conventions here, but I thought the name might have some meaning.

LalitNM commented 3 years ago

After your comment I read about this on developer.apple.com. According to them it is enough to keep the file as apple-touch-icon.png. We can even remove the <link> from head.html.

The problem is with the resolution of image, maximum resolution is 180x180, but at present we are adding a file with resolution144x144. Should I add the image with higher resolution?

MarkusPiotrowski commented 3 years ago

As far as I have understood it is practice now to provide several favicon.png files with different resolutions: https://stackoverflow.com/questions/2268204/favicon-dimensions https://stackoverflow.com/questions/4014823/does-a-favicon-have-to-be-32x32-or-16x16 https://www.emergeinteractive.com/insights/detail/the-essentials-of-favicons/

So you can decide to put something like 7-... different sized favicons to support an optimal look on each plattform/browser or to put something like 3 files, one being a 32x32 png, one being an high-resolution apple-touch icon and possibly a high-resolution png.

LalitNM commented 3 years ago

@MarkusPiotrowski idea of adding multiple images looks good. The problem I pointed out in this comment can be fixed by applying an image with transparent background. I am thinking to add html markup and images generated by realfavicongenerator.net. This will automatically add images for different devices.

LalitNM commented 3 years ago

@JoaoRodrigues and @MarkusPiotrowski would you like to review this?

MarkusPiotrowski commented 3 years ago

I have merged the changes to my local branch and pushed it here: http://markuspiotrowski.github.io/

As far as I can tell it looks good on Windows 10 in Firefox and Edge browser but not so nice as tile (because the tile background is also blue). Actually, this was the first time that I added a webpage as "app" on Windows, so I think this is a very rare scenario and we can live with that. It also looks nice on an Android tablet (as icon and in Chrome browser). If anyone wants to check this on Apple devices, please do so, I'm going to merge this tomorrow.

peterjc commented 3 years ago

Tiny tab/bookmark icon looks good on macOS Chrome, Firefox and Safari.

Home screen icon looks good on iPhone.

MarkusPiotrowski commented 3 years ago

@LalitNM Good work, thank you!