Skip to content
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 our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add favicon and configuration #4

Merged
merged 1 commit into from Oct 15, 2022
Merged

Add favicon and configuration #4

merged 1 commit into from Oct 15, 2022

Conversation

aganders3
Copy link
Contributor

Migrated from napari/napari#5182

This adds support for showing a napari logo as a "favicon" (browser tab icon) on the docs page.

Based on discussion in #4897 a logo silhouette was preferred over full-color. This PR adds a few assets and configures them in the header according to what I could find for current favicon best practices:

  • An SVG that detects light mode and dark mode and switches the fill color accordingly (for Chome, Firefox, etc.)
    • <link rel="icon" href="_static/favicon/logo-silhouette-dark-light.svg" type="image/svg+xml">
  • A 192x192 black-on-transparent PNG (for Safari) - setting sizes="any" is needed for Chrome to prefer the SVG
    • <link rel="icon" href="_static/favicon/logo-silhouette-192.png" sizes="any" type="image/png">
  • A 180x180 full-color PNG with no border for the “apple-touch-icon” (icon for iPhone/iPad “Save to Home Screen” and used by others)
    • <link rel="apple-touch-icon" href="_static/favicon/logo-noborder-180.png" sizes="180x180" type="image/png">

macOS Safari and Chrome Dark Mode

Screen Shot 2022-10-05 at 11 27 39 AM

macOS Safari and Chrome Light Mode

Screen Shot 2022-10-05 at 11 26 18 AM

iOS “Save to Home Screen”

Simulator Screen Shot - iPhone 14 - 2022-10-03 at 21 09 31

N.B. this also adds a dependency on sphinx-favicon for the documentation building step.

References

closes napari/napari#4897

https://stackoverflow.com/questions/54639192/change-the-favicon-of-the-sphinx-read-the-docs-theme/54665517#54665517
https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs

How has this been tested?

Tested documentation building and serving locally.

@github-actions github-actions bot added the documentation Improvements or additions to documentation label Oct 14, 2022
Copy link
Member

@psobolewskiPhD psobolewskiPhD left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I posted this in the previous PR in napari repo.
To me everything looks great! Love it, long overdue!
Code changes make sense based on the docs at https://github.com/tcmetzger/sphinx-favicon
I wish the PR docs comment thingie was working so everyone could more easily see the icons.
Ultimately, I think this one comes down to @jni though, especially given NAP-5 (https://github.com/napari/napari/blob/06a90c7469b20bcd4c741fa84bafee9704b981f0/docs/naps/5-new-logo.md)

@jni
Copy link
Member

jni commented Oct 15, 2022

Nope, you have equal rights here @psobolewskiPhD, NAP-5 is only a proposal for now. ;) This should come in either way — if NAP-5 is accepted (and I think it'll require a lot of iteration before it is), then we can update all this stuff.

Thanks @aganders3!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Icon for napari in web-browser
3 participants