8000 Improve favicons to match www.python.org by hugovk · Pull Request #56 · python/python-docs-theme · GitHub
[go: up one dir, main page]
Skip to content

Improve favicons to match www.python.org #56

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.

Sign up for GitHub

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

Jump to bottom
Closed
wants to merge 3 commits into from
Closed

Improve favicons to match www.python.org #56

wants to merge 3 commits into from

Conversation

hugovk
Copy link
Member
@hugovk hugovk commented Sep 16, 2020 •
edited
Loading

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:

image

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

image

After

image

@hugovk hugovk closed this Apr 29, 2021
@hugovk hugovk reopened this Apr 29, 2021
@hugovk
Copy link
Member Author
hugovk commented Apr 29, 2021

(oops clicked the wrong button!)

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

@JulienPalard
Copy link
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
Copy link
Member Author
hugovk commented May 1, 2021 
<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:

image

With a touch icon it's like:

image

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

@JulienPalard
Copy link
Member

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

@hugovk
Copy link
Member Author
hugovk commented May 2, 2021

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:

SmartSelect_20210502-135634_One UI Home

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!

@JulienPalard
Copy link
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
Copy link
Member Author
hugovk commented Jun 21, 2021

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 hugovk closed this Jun 21, 2021
@hugovk hugovk deleted the update-icons branch June 21, 2021 10:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
CLA signed
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@hugovk @JulienPalard @the-knights-who-say-ni
0