Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

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.

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

Already on GitHub?Sign in to your account

Closed
hugovk wants to merge3 commits intopython:masterfromhugovk:update-icons

Conversation

hugovk
Copy link
Member

@hugovkhugovk commentedSep 16, 2020
edited
Loading

The Python favicons onhttps://docs.python.org (andhttps://pip.pypa.io etc.) are much lower resolution than onhttps://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) addsfavicon.ico fromhttps://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 16x16pxpy.png.


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

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


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

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


Before

image

After

image

@hugovk
Copy link
MemberAuthor

(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
MemberAuthor

<linkrel="apple-touch-icon-precomposed"sizes="144x144"href="{{ pathto('_static/' + theme_apple_touch_icon_144x144, 1) }}"/><linkrel="apple-touch-icon-precomposed"sizes="72x72"href="{{ pathto('_static/' + theme_apple_touch_icon_72x72, 1) }}"/><linkrel="apple-touch-icon-precomposed"href="{{ pathto('_static/' + theme_apple_touch_icon, 1) }}"/><linkrel="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 fromhttps://github.com/python/pythondotorg/tree/master/static), but therel=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
MemberAuthor

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 bothhttps://www.python.org/ andhttps://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 likehttps://realfavicongenerator.net/ to define all the files and metadata, but my approach was to followhttps://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
MemberAuthor

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

@hugovkhugovk closed thisJun 21, 2021
@hugovkhugovk deleted the update-icons branchJune 21, 2021 10:19
Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
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

[8]ページ先頭

©2009-2025 Movatter.jp