Updates favicons to support dark mode

[sl4m]

This fixes #1157 using only prefers-color-scheme CSS media query. This was tested on the latest Firefox, Chrome, and Microsoft Edge.

I modified the existing favicon.svg to include CSS that will detect the system color scheme and appropriately apply the CSS. It seems the order in which the icons are referenced in the template matters, so I've re-ordered them in a way that worked during testing. For browsers that do not support SVG, it falls back on the modified png favicons which now have a white background and works on either system color scheme. Also, the reference to favicon.ico has been removed in the template as it will take precedence over all other available favicons.

I'm happy to make these changes for all the other repos that use the Rust logo favicon. I believe it is:

• blog
• thanks
• ???

Chrome / Microsoft Edge:

Firefox:

PNG fallback:

[Manishearth]

Seems okay.

[XAMPPRocky]

Thank you for your PR! The PNG fallback had me thinking, do you think it would be possible to have the dark mode version have just a white border and white fill in through CSS? I was thinking something along these lines though I would probably give the favicon a thicker outline than in the picture.

[sl4m]

@XAMPPRocky I spent some time trying to figure out how to manipulate the SVG to support what you've requested. I believe the SVG needs additional elements to support a border and fill. Unfortunately, my SVG knowledge stops here. If someone else can create the SVG with the additional elements, I can apply the CSS appropriately.

[XAMPPRocky]

@sl4m I suspected that would be case. Either way I think this fine to merge Thank you for your PR and congrats on your first contribution!

[sl4m]

@XAMPPRocky What are your thoughts about propagating these changes to other repos that are associated with rust-lang.org's subdomains? This is not a complete list, but I'm thinking:

• blog.rust-lang.org
• thanks

[XAMPPRocky]

I think it would be fine to make a PR for each of those.