Re: [PR] HDDS-9572. Restore favicons from original ozone website [ozone-site]

["errose28 (via GitHub)" <gi...@apache.org>]

errose28 commented on PR #51:
URL: https://github.com/apache/ozone-site/pull/51#issuecomment-1947657739

   Hi @makinyemi thanks for working on this. Turns out this is tricky to get right and after spending the better part of a day on it this is what I came up with:
   
   - Docusaurus does not support multiple favicons out of the box, so to add multiple icons we need to use custom [head tags](https://docusaurus.io/docs/next/api/docusaurus-config#headTags).
   - Favicons work best when they are at the root of the website. It seems in some instances browsers check `<website>/favicon.ico` instead of the header.
       - To keep the numerous favicon files from being confused with other static site files, we can use [static directories](https://docusaurus.io/docs/next/api/docusaurus-config#staticDirectories) in docusaurus to put them in a unique location
   - `favicon.ico` is the most universally supported format. SVG is nice to have but [not as well supported](https://caniuse.com/?search=favicon).
   - The `site.webmanifest` file is for [Progressive Web Applications](https://en.wikipedia.org/wiki/Progressive_web_app) (PWAs), which have their own requirements for icons.
       - A 512x512 PNG icon
       - A 192x192 PNG icon
       - A "[maskable](https://web.dev/articles/maskable-icon)" versions of these icons that are centered with a background. I generated these with https://maskable.app/editor from our existing SVG logo and the background to the current social card.
   
   I have all of this on [this branch of my fork](https://github.com/errose28/ozone-site/tree/favicon). I tested it using [this chrome extension](https://chromewebstore.google.com/detail/favicon-detector/jlfeffjhgmgblofcgpbgpkkhfniipejm) on the local website preview. If it looks good I can either push it to this PR or open a new PR.
   
   References:
   - https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs
   - https://dev.to/masakudamatsu/favicon-nightmare-how-to-maintain-sanity-3al7


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org