SVG favicon #6738
SVG favicon #6738
Conversation
stokito
force-pushed
the
svg_favicon
branch
2 times, most recently
from
ff6f0a7 to
f0ee84b
Compare
stokito
force-pushed
the
svg_favicon
branch
3 times, most recently
from
5d54c40 to
909a4fb
Compare
|
One thing #6717 does correctly is retain the png for those browsers that do not support them (safari...). |
The "White & Dark Blue" logo should have a background filled with PANTONE 306 C HEX #00B5E2. SVG doesn't support background-color properly so use a rectangle instead. The dark blue circle must be PANTONE 7463 C HEX #002B49 See https://openwrt.org/_media/docs/guide-graphic-designer/openwrt-logo-usage-guidelines.pdf Signed-off-by: Sergey Ponomarev <stokito@gmail.com>
Signed-off-by: Sergey Ponomarev <stokito@gmail.com>
To keep ratio the one pixel was also added to left and right and now size is 100x100 Signed-off-by: Sergey Ponomarev <stokito@gmail.com>
Save 686-536=150 bytes Signed-off-by: Sergey Ponomarev <stokito@gmail.com>
That was a fix for old browsers when the mime type is incorrect. Today all servers return a correct mime but also browsers can sniff a type. Signed-off-by: Sergey Ponomarev <stokito@gmail.com>
Chrome, Edge and Firefox will use the SVG icon but Safari will use the PNG. Chrome will try to pick an icon with a best suited dimension. So it will also download the PNG to check it's dimension. The explicitly specified sizes are preventing this. Signed-off-by: Sergey Ponomarev <stokito@gmail.com>
The apple-touch-icon was used by old Safari on iOS. Today just <link rel="icon" href="logo.png"> is enough. Signed-off-by: Sergey Ponomarev <stokito@gmail.com>
The new OpenWrt logo.svg is copied from luci-theme-openwrt-2020. The logo.png was copied too but resized from 180px 3.9Kb down to 48px 2.3Kb. This is enough when used as icon for app pinned to desktop. Signed-off-by: Sergey Ponomarev <stokito@gmail.com>
The new OpenWrt logo.svg is copied from luci-theme-openwrt-2020. The logo.png was copied too but resized from 180px 3.9Kb down to 48px 2.3Kb. This is enough when used as icon for app pinned to desktop. Signed-off-by: Sergey Ponomarev <stokito@gmail.com>
According to a style guide the color should be #00B5E2. In a9f6d85 added a light blue square background to logo.svg. Their color started differs, the change fixes this. Signed-off-by: Sergey Ponomarev <stokito@gmail.com>
|
I completely reworked the PR. Then I made the openwrt-2000 favicon to work properly on Safari and iOS with minimal deviation from web standards. I tested it carefully on Safari/macOS, Safari iOS, Chrome Android, Firefox Android, Chrome Windows, Edge on Windows. We may broke the icon for some really old Safari from iPhone 6 but who cares. I copied the logo to other themes except of the old The last commit fixes this logo and header background discrepancy:
CC @532910 please review and test |
|
Looks mostly good. You retained the 180x180 png ya? |
|
Yes, sorry, forgot to mention this: the original logo.png from the 2020 theme remains untouched. I was afraid to make a regression there. |
Sorry, I was wrong, there is used the logo.svg, not png. |
|
I tested with Firefox and Chrome, both bootstrap and openwrt2020 themes. Any objections, @jow- ? |
|
Thank you! |
|
Looks quite ugly in dark mode: I think the white curved bars at the top should be light blue, the circle should remain dark blue and the background should become transparent. This way it works well in both dark and light backgrounds. |
|
According to logo usage guidelines there are a few schemes:
The problem that I see is that here we have a dark theme of OS but the site itself may be in a light mode. |
|
FYI: the SVG can be adopted to a dark mode by using internal styles https://rigtorp.se/notes/dark-mode-svg/ |
|
Here's a quick mockup of the changed color scheme: |
Replacement for #6717