Extend Sitecore SXA metadata with hreflang and better favicon support

Sitecore SXA only supports a simple favicon OOTB. Because we have a full blown mobile supported website, we want to support all the native font formats as generated by https://realfavicongenerator.net/. For this I've created MetadataExtended feature for SXA.

To use it add the _FaviconExtended template to the Settings template that has been generated for your website:

After adding this template, you'll get a lot more options in the favicon section of your settings:

Here you can upload all the files that are generated by https://realfavicongenerator.net/.

Please note that the site.webmanifest and browserconfig.xml contain a link to an icon. There files are not automatically generated in the initial version, so update them with the right media path.

Now all we need to do is add the right rendering to the medatdata partial design (/sitecore/content/{tenant}/{site}/Presentation/Partial Designs/Metadata). You can do this by adding the rendering to the /sitecore/content/{tenant}/{site}/Presentation/Available Renderings and add it using the experience editor, or directly using the Presentation Details. And voila on the favicon checker, all is green!

On the next post I'll explain the hreflang extension.

All code is available on https://github.com/luuksommers/sitecore-sxa-metadataextended

Happy faviconning,

Luuk