add default favicon to templates

[Fil]

TODO:

• design an asset (and format) to use as a default favicon for projects
• apply same code to the other template
• see if we want to revive favicon #633
• see if we use autodetection of the favicon.png asset (in observablehq.config.ts or in normalizeconfig)?

closes #674

[mbostock]

Safari doesn’t support SVG favicons; you have to use the nonstandard mask-icon. 😞

[Fil]

asset supports both dark and light modes (by @pettiross); minified down to 493 bytes

[mbostock]

Can we not use our official favicon? I like it better. I don’t like that hairline white halo in dark mode.

https://static.observablehq.com/favicon-512.0667824687f99c942a02e06e2db1a060911da0bf3606671676a255b1cf97b4fe.png

[Fil]

OK to change the icon.

I thought of a different way to implement this that would make it easier to opt in and out: when we normalize the config, and if head is undefined, we could check for the existence of /favicon.png and if present, set the option to <link rel="icon" href="favicon.png" type="image/png">. Sounds nice?

[mbostock]

Hmm, checking for favicon.png feels a little magical to me — it’s not hard to set the head option, is it? Especially if we now show you how to do it with the default template?

[Fil]

I was thinking it could be useful for a beginner who does not open the config file and removes favicon.png from docs/. But the current code is working in a good way in that situation: the generated page points to the non-existing /favicon.png, a 404 is shown in the network inspector, all the information is there and nothing is badly broken.

[mbostock]

When you’ve replaced the image with the gray version let me know and I’ll take another look.

I am also tempted to call it observable.png rather than favicon.png, and to set sizes="32x32", so as to encourage authors to use a differently-named file if they want to replace it, and thereby force discovery of the head option if you want to change the favicon. But not a requirement.

[Fil]

Yes I'm only hesitant to use a 15kB 512x512 image, when we could minify a 32x32 image for 394 bytes. (It's not on the hot path, so not a big deal.)

[mbostock]

You can use gm convert and optipng to convert that 512x512 image to 32x32? I’m not opposed to having a more minified favicon. I just prefer the gray one to the black & white one.

[Fil]

Done. I also tested a build, just in case :)