Update logomark icons#15
Open
ritorhymes wants to merge 1 commit into
Open
Conversation
Use the grayscale Ethereum diamond as the reusable SVG logomark and primary SVG favicon. Regenerate the PNG favicon and Apple touch icon from the same source, and keep the 16x16 PNG favicon as the fallback icon.
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
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.
Description
Replace the current gray Ethereum logomark PNGs and SVG with a version that remains legible across browser and theme environments, including dark mode and light mode browser tab backgrounds.
The current SVG has transparency behavior that differs from the PNG. On light backgrounds, the SVG appears gray; on darker backgrounds, it becomes nearly black, causing the inner geometry of the Ethereum mark to disappear. This is especially noticeable in browser favicons and is a bigger issue for the EIP site because its native styling is dark-mode oriented.
New logomark SVG
The new logomark SVG is grayscale, but less shadow-heavy than the current PNG. It provides stronger contrast and better shape definition in both light and dark contexts. The SVG is also used as the source for generating the fallback favicon PNG and the Apple touch icon.
Because this SVG may be useful outside favicon-specific contexts (it is used in the nav UI reworking in #9 inside the site title), and because the filename
faviconis not required for icon tags, this change names the source assetlogomark.svginstead.Visibility comparison
The screenshots below compare three Chrome desktop browser tabs:
Light mode
All three logomarks are legible in light mode, but the middle example is the only one that reads as a clean gray mark. The others appear more shadow-heavy.
Dark mode
In dark mode, the issue is much more visible. The current PNG on the left appears overly shadowed, while the current SVG on the right becomes nearly black and loses its internal geometry. The new SVG in the middle remains the clearest and most recognizable option.