Favicon revised: Prepare dark-theme-friendly favicon, make it 404-free, modern favicon handling

[hosiet]

Problems

I noticed the aging code around the handling of favicon in the theme. To be more concrete:

• For each site deployed, there are always two 404 error appearing:

GET $HOST/images/android-chrome-192x192.png?v=M44lzPylqQ NS_ERROR_FAILURE
GET $HOST/images/favicon-32x32.png?v=M44lzPylqQ NS_ERROR_FAILURE

The QUERY_STRING here is suspicious. Those two icons also never existed anywhere.

• _includes/head/custom/html mentioned msapplication-* <meta> tags, which I believe are deprecated.
• /images/manifest.json mentions a lot of icons that do not exist at all.
• _includes/head/custom.html linked to safari-pinned-tab.svg, which is not the same as our expected favicon.
• The current favicon.ico is mostly black, which is invisible when dark theme is enabled.

Possible Solutions

I found the valuable blog article https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs , which should describe the best practice in handling favicon.

For the updated favicon choice: I would suggest using https://commons.wikimedia.org/wiki/File:OOjs_UI_icon_academic-progressive.svg , which comes with a blue icon that is visible both in dark theme and light theme. Its icon license is CC0-1.0, means that we can directly use it without any copyright concerns.