search

1bl4z3r / hermit-V2

Continuing Hermit's legacy to be minimal and fast theme
https://1bl4z3r.github.io/hermit-V2/
MIT License
103 stars 45 forks source link

[BUG] - Allow svg as the favicon #60

Closed xuhdev closed 7 months ago

xuhdev commented 7 months ago

The path to favicon is hardcoded as favicon.ico. svg can't be used here.

By allowing an svg favicon, the favicon can color itself based on browser theme (light, dark, etc.). See this blog post for a quick example: https://www.billerickson.net/favicon-dark-mode/

1bl4z3r commented 7 months ago

That is an excellent suggestion. However, there are two issues with using svg as favicons.

  1. There isn't a popular favicon builder which exports to svg. Most favivon builder exports to .ico, which also seems to be standard.
  2. Browser support is rather spotty, with whole Safari/Webkit out of the loop. https://caniuse.com/link-icon-svg

Before I could add svg as favicons, I need a favicon builder that exports svg (I need to test out and my skill with SVG is shit). I could provide a check if SVG is supported or fallback to regular .ico.

If you are able, please provide a SVG image for me to try out.

Waiting for your response

xuhdev commented 7 months ago

Sure, how about this: https://editorconfig.org/logos/emeditor.svg

I don't think a favicon builder should export to svg. If svg is ever present as a favicon, it should be the source rather than the output, because svg is vector, not raster. The favicon generator in README also supports svg as input. The svg file should be used as is if a svg favicon is desired.

HTML can also be written in a way to prevent svg-aware browsers from downloading favicon.ico: https://css-tricks.com/favicons-how-to-make-sure-browsers-only-download-the-svg-version/ so I don't think it would be a big problem for compatibility.

1bl4z3r commented 7 months ago

That also makes sense.

I saw svg-aware setup and I shall update it by today. I will keep you posted

1bl4z3r commented 7 months ago

Hi @xuhdev

I have tried to add svg favicons support

<link rel="icon" href="/hermit-V2/favicon.ico" type="image/x-icon" sizes="any">
<link rel="icon" href="/hermit-V2/favicon.svg" type="image/svg+xml">

It checks whether either file exists in static, upon which it will allow the meta tags to be shown. This is just for them who use either SVG favicons or ICO favicons and keeping <head> clean. I have tried to follow the css-tricks link you've provided. 

{{- if (fileExists "static/favicon.ico") -}}
<link rel="icon" href="{{"favicon.ico" | relURL}}" type="image/x-icon" sizes="any">
{{- end -}}
{{- if (fileExists "static/favicon.svg") -}}
<link rel="icon" href="{{"favicon.svg" | relURL}}" type="image/svg+xml">
{{- end -}}

However, both of my Brave & Firefox browsers are downloading the SVG image but not rendering them. Instead both are using ICO favicon fallback.

Please test it out from your end and report back if any changes are required. Additionally, if you are able, please do send a screenshot on how SVG is rendered in favicons. I am curious to know.