Add favicons for macOS Safari; add icons for iOS and Android home screens #1516
Conversation
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
- iOS devices - Safari on macOS
- add `favicon.ico` declaration - add `sizes` declaration for SVG favicon - add apple touch icon declaration
The script in `Favicon.astro` works with SVG icons. If we're Safari on macOS, use an .ico file instead.
Android uses these in a few places. It's a bit of polish.
- Safari will want us to work with the first favicon element. - Chrome needs querySelector on the second favicon element, or it doesn't work well.
✅ Deploy Preview for astro-www-2 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR adds extra favicons to the main astro.build site. They improve the look and feel for macOS, iOS, and Android users. Fixes #1273.
See Deeper dive below for the fun details.
Summary of changes
favicon.icoandfavicon-hidden.icofor Safari on macOS.Favicon.astroto work on Safari.apple-touch-icon.pngfor iOS icons.android-chrome-*.pngicons, and a web manifest, for an improved Android experience.The web manifest icons are optional. They can be removed from the PR.
Browser Test Checklist
I have tested this PR on at least three of the following browsers:
Deeper dive
This article explains the state of favicons in 2025:
Astro.build uses a small script in
Favicon.astroto change the favicon based on tab visibility. To take Safari into account we need to first do a user agent check, then modify the most relevant<link>element. But of course,querySelector('link[rel="icon"]')doesn't work the same on every browser!querySelector('link[rel="icon"]')selects the first element that references the icon currently in use, even if the element is technically not first in the source.querySelector('link[rel="icon"]')selects the very first link element that matchesrel="icon", even if it's not currently in use.The fix is to use
querySelector()with more specificity, conditionally based on the user agent check.If Safari starts using SVG favicons, it will make things much simpler.