FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

Improve favicons to match www.python.org by hugovk · Pull Request #56 · python/python-docs-theme · GitHub

Repository navigation

Improve favicons to match www.python.org - #56

Closed
hugovk wants to merge 3 commits into
python:masterfrom
hugovk:update-icons
Closed

hugovk wants to merge 3 commits into
python:masterfrom
hugovk:update-icons

Conversation

hugovk commented Sep 16, 2020 •
edited
Loading

Copy link
Copy Markdown
Member

The Python favicons on https://docs.python.org (and https://pip.pypa.io etc.) are much lower resolution than on https://www.python.org

Here they are, docs on the left, www on the right, on a Mac Retina screen:


The first commit here (5088726) adds favicon.ico from https://github.com/python/pythondotorg/tree/master/static/favicon.ico (containing 16x16, 32x32 and icons) and uses it for the basic favicon instead of the low-resolution 16x16px py.png.


The second (1b2f0e0) add the Apple touch icons and Microsoft Win8 tile icons, also from https://github.com/python/pythondotorg/tree/master/static, and shows them with the same markup as www.python.org:

https://github.com/python/pythondotorg/blob/65cb6aa6e9f2e2f87195e1997cfe74d32701c0be/templates/base.html#L41-L52


Finally, the third (471c170) copies the 57x57px apple-touch-icon-precomposed.png (the smallest new one) on top of the low-res 16x16px py.png which is shown inline in the header/footer breadcrumbs, and shows it also at 16x16px.

(So apple-touch-icon-precomposed.png and py.png are duplicates. Would it better to use a single filename for both? If so, what?)


Before

After

hugovk closed this Apr 29, 2021
hugovk reopened this Apr 29, 2021

hugovk commented Apr 29, 2021

Copy link
Copy Markdown
Member Author

(oops clicked the wrong button!)

Rebased on master to trigger a test on the CI. ✅

Copy link
Copy Markdown
Member

I'm not a front-end dev, so feel free to ignore my comment.

Is this mandatory to use the name of a company to display a favicon? It looks so wrong to me.

hugovk commented May 1, 2021

Copy link
Copy Markdown
Member Author
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ pathto('_static/' + theme_apple_touch_icon_144x144, 1) }}" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="{{ pathto('_static/' + theme_apple_touch_icon_72x72, 1) }}" />
<link rel="apple-touch-icon-precomposed" href="{{ pathto('_static/' + theme_apple_touch_icon, 1) }}" />
<link rel="apple-touch-icon" href="{{ pathto('_static/' + theme_apple_touch_icon, 1) }}" />

Strictly speaking these aren't favicons but for the "Apple Touch Icon", which can for example can be used on the iOS home screen:

https://blog.notmyhostna.me/posts/set-apple-touch-icon-for-any-website/

An example from that blog, if there's no touch icon, a saved website looks like RaceFans here:

With a touch icon it's like:

The filenames can be anything (I followed the lead from https://github.com/python/pythondotorg/tree/master/static), but the rel=apple-touch-icon* bits are special Apple keywords:

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

Copy link
Copy Markdown
Member

I'll gladly merge this without the close-source-specific bits.

hugovk commented May 2, 2021

Copy link
Copy Markdown
Member Author

I'll gladly merge this without the close-source-specific bits.

Just to be clear, do you mean the four lines I quoted which specify what touch icon to use on Apple devices?

How about the lines for Windows tiles?

By the way, adding both https://www.python.org/ and https://docs.python.org/3/ to the Android homescreen shows this difference. I read that Android devices prefer another but can also use the Apple touch icon too:

The complete solution for full support would probably be to use something like https://realfavicongenerator.net/ to define all the files and metadata, but my approach was to follow https://www.python.org/ which has quite good coverage. But happy to remove stuff it you like, personally I just want a higher resolution icon for browser tabs and don't use homescreen bookmarks or Windows tiles. :) Thanks!

Copy link
Copy Markdown
Member

Sry I stopped scrolling too soon, didn't even noticed Microsoft was selfishly spreading their name too. Let's wait 10 more years and it'll take hundreds of lines.

hugovk commented Jun 21, 2021

Copy link
Copy Markdown
Member Author

Closing as:

  • the theme now uses a scalable SVG favicon (Make the theme responsive #46) so now looks good on Retina screens
  • I don't personally use any of the touch icons
  • this PR now has conflicts

hugovk closed this Jun 21, 2021
hugovk deleted the update-icons branch June 21, 2021 10:19
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants


Back | FazBrowse Home | New Git URL