Umar Getagazov: 1 web: make the favicon visible on light background 3 files changed, 16 insertions(+), 1 deletions(-)
Copy & paste the following snippet into your terminal to import this patchset into git:
curl -s https://lists.sr.ht/~sircmpwn/searchhut-devel/patches/33927/mbox | git am -3Learn more about email & git
This commit modifies the PNG favicon to have a gray outline. It also adds an SVG favicon which adapts to the system theme and hides the gray outline if prefers-color-scheme is supported. Older browsers will continue to use the PNG favicon with the outline baked in. --- v1 -> v2: 1. Workaround Chrome sometimes picking the PNG favicon by adding sizes="any" so that it has lower score than the SVG one [1] 2. Correct the SVG favicon size to be 128x128 (same as the PNG one) [1]: https://bugs.chromium.org/p/chromium/issues/detail?id=1162276 static/favicon.png | Bin 2370 -> 3934 bytes static/favicon.svg | 14 ++++++++++++++ templates/head.html | 3 ++- 3 files changed, 16 insertions(+), 1 deletion(-) create mode 100644 static/favicon.svg diff --git a/static/favicon.png b/static/favicon.png index 532730ff757fe93468e073bc0968182750c7536e..b6e5a695e6ae1c395b66bbe8212ab759cb7a6eb2 100644 GIT binary patch delta 3927 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 literal 2370 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 diff --git a/static/favicon.svg b/static/favicon.svg new file mode 100644 index 0000000..9535924 --- /dev/null +++ b/static/favicon.svg @@ -0,0 +1,14 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"> + <style> + @media (prefers-color-scheme: light) { + #outline { display: none } + #logo { stroke: black } + } + @media (prefers-color-scheme: dark) { + #outline { display: none } + #logo { stroke: white } + } + </style> + <circle id="outline" cx="64" cy="64" r="50" fill="none" stroke-width="14" stroke="#888" /> + <circle id="logo" cx="64" cy="64" r="50" fill="none" stroke-width="10" stroke="white" /> +</svg> diff --git a/templates/head.html b/templates/head.html index f6b3285..1cd270d 100644 --- a/templates/head.html +++ b/templates/head.html @@ -3,5 +3,6 @@ <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="/static/main.css" /> -<link rel="shortcut icon" type="image/png" href="/static/favicon.png" /> +<link rel="icon" type="image/png" href="/static/favicon.png" sizes="any" /> +<link rel="icon" type="image/svg+xml" href="/static/favicon.svg" /> <title>{{.Title}}</title> -- 2.32.1 (Apple Git-133)