Favicon and SVG

[Dekker500]

I am not skilled enough with these modules to track down the real source... feel free to re-direct.

I am re-creating an existing HUGO site to the new template structure.

When I add my favicon.svg to the "assets/images" folder, and update the seo section in params.yaml to match, it spits out a lengthy error message, complaining that "... execute Resize: this method is only available for raster images. To determine if an image is SVG, you can do {{ if eq .MediaType.SubType "svg" }}{{ end }}"

Looking at the module reference (https://hugomods.com/en/docs/seo/#favicons-module) I now see you start with a PNG. A refinement of the favicon module would be to start with ANY source, and create the others, even with SVG...

My workaround was just to manually export to PNG and move on...

[razonyang]

the SVG isn't resizable, will mentioned in the docs.

[razonyang]

Mentioned this on docs and output a warning message instead of an error.

Thanks for your feedback.

[Dekker500]

I can't test until Monday, but if I am reading it right, if the code is supplied an SVG, not only will it not resize (good), but it will also not create the ! (bad) Shouldn't the if-then-else end before creating the element? Or at least, if SVG, create a single without resizing...

[razonyang]

Yep, SVG isn't an acceptable format, the module won't/unable to handle vector images.

[Dekker500]

That is a shame. SVG is a valid favicon format, and superior in many respects BECAUSE it does not need to be resized.

[razonyang]

Need to do some research, I need to know how many browser support SVG as favicon format. Please feel free to share some knowledge about this.
If we don't need to resize it, that's quite easy to implement.

[Dekker500]

Most except safari...

Standard practice is to have 2 link icons defined. First is SVG, second is a fallback (PNG or whatever)

https://caniuse.com/link-icon-svg

Module should maybe accept two as well?

[razonyang]

Thanks for the references, will check, reopen it for tracking.

[razonyang]

It seems that raster is required (e.g. PNG), such as apple-touch-icon.

I could add a parameter for SVG, such as svg_icon, then you're able to use SVG icon, and remove the unused sizes for raster icon via configuration.

WDYT?

[Dekker500]

Actually, I would never "remove" the raster icons, just that SVG is a preferred "source".

The TL;DR section of https://dev.to/masakudamatsu/favicon-nightmare-how-to-maintain-sanity-3al7 gives an example pretty good "all-bases-covered" favicon block that includes SVG with multiple sizes of raster plus the fallback to favicon.ico.

But that is a challenge for another day...

[razonyang]

It's a headache, will draft a PR for this when docs are ready.

[razonyang]

Implemented by hugomods/seo#15, I hope I'm doing it in the right way.

Configuration example:

params:
  seo:
    favicons:
      icon: images/logo.png
      svg_icon: images/logo.svg
      mask_icon: images/logo.svg
      mask_icon_color: '#6610f2'
      sizes:
        - size: 180x180
          rel: apple-touch-icon