Update the Deno logo

[jaydenseric]

This PR updates the Deno logo SVG, raster assets containing the logo, and improves some of the site head tags.

I hand crafted the new logo SVG to be optimal (e.g. avoid decimal coordinates) and precise (e.g. use perfect circle shapes); it's based on the logo in use at https://deno.com which has a simpler form:

https://deno.com/static/logo3.png

I couldn't find an SVG of this PNG logo anywhere, so I made one from scratch to perfectly match the artwork with the exception of the eye, which in the PNG image is dark green color for some reason. I'm not a fan of the top right raindrop placement causing only a tiny bit to be visible, but I decided to stay true to the "official" logo and not tweak the raindrop distribution. The new SVG logo is exactly two-color; pure white and black.

The new logo SVG works in both dark and light contexts, because the artwork within the circle contains white and black pixels vs attempting to use transparency and a single color that must be inverted via a prefers-color-scheme media query. This allows the logo.svg asset to be used both as the logo in the site header and as the SVG favicon, replacing favicon.svg. I would have preferred to rename the asset from logo.svg to the more descriptive deno-logo.svg, but it's good to avoid breaking existing URLs referencing the asset (e.g. the logo in the denoland/deno repo readme).

The new logo.svg asset file size has been reduced from 6,020 bytes down to 1,139 bytes.

The apple-touch-icon has been much improved; the logo is now centered in whitespace and the resolution is much higher (512x512px vs 180x180px). Left is before, right is after:

The asset is now served at /apple-touch-icon.png instead of /images/icons/apple-touch-icon-180x180.png so your server should see less 404's from bots and clients trying to scrape the well known asset. Because iOS Safari and other clients know to look for this URL by convention, instead of updating the link rel="apple-touch-icon" head tag src the tag has been removed. This PNG has been optimized:

The favicon.ico asset has been updated with two size layers:

• 64x64px for sharp display compared to the maximum 48x48px layer in the old asset. In this screenshot from Preview app the grey represents transparent areas:

  

• 16x16px for old-school browsers on non-Retina screen devices. This layer has been artworked from scratch to remove the raindrops which are a blur at this small size, and increase the size of the Deno head and eye.

  

  Compare that with the old icon, which would not have worked in a dark UI due to the face being transparent:

  

There are no intermediate size layers to reduce the download size of the favicon; the largest 64x64px layer can be dynamically sized down by the client as necessary.

Here you can see the after and before of both the header logo and the favicon…

After:

Before:

Darkmode SVG favicons, comparing after (left) and before (right):

[CLAassistant]

All committers have signed the CLA.

[jaydenseric]

Note that I didn't update these assets, because I wasn't sure exactly their purpose:

https://github.com/denoland/deno_website2/blob/8110c2926b1f0fd615f6b5fbeb4984b30731fc24/public/site.webmanifest#L10-L49

[kt3k]

Thank you for creating the svg version of the new logo. But I don't think we are changing the logo in the top page to that one. We use both logo depending on the context.

@ry What is your thought on this?

[ry]

Thanks @jaydenseric - let's try it out!