A proper favicon

[simonw]

Tips here: https://adamj.eu/tech/2022/01/18/how-to-add-a-favicon-to-your-django-site/ - I think a PNG served at /favicon.ico is the best option, since safari doesn't support SVG yet.

Relevant code:

datasette/datasette/app.py

Lines 182 to 183 in cb29119

	async def favicon(request, send):
	await asgi_send(send, "", 200)

I can reuse the icon for https://datasette.io/desktop

[simonw]

I'd like this to be customizable. I'm going to load it from the template loading system such that a custom favicon for a specific instance can be dropped in using a file in templates/.

[simonw]

I don't think abusing the template loader mechanism for this will work: Jinja provides an API for loading text templates, but I don't think it can be sensibly abused to open binary image files instead. Loaded code is here: https://github.com/pallets/jinja/blob/main/src/jinja2/loaders.py

[simonw]

For the moment then I will hard-code a new favicon and leave it to ASGI plugins if people want to define their own.

[simonw]

Also people can use a custom base template and link to a custom favicon if they want to.

[simonw]

This one is 101KB and 1536*1536 which is a bit big! https://github.com/simonw/datasette-app/blob/main/build/icon.png

[simonw]

https://adamj.eu/tech/2022/01/18/how-to-add-a-favicon-to-your-django-site/ suggests 64x64, I'm going with 128x128 just in case anyone invents a retina-retina screen.

[simonw]

Here's the 128x128 one - 11kb, I resized it using Preview:

Now running it through Squoosh using OxiPNG effort=3 colours=24 - brought it down to 1.36KB.

[simonw]

I'm going to drop it in datasette/static/favicon.png and rewrite the async def favicon() function to return it, with caching headers.

[simonw]

Here's what it looks like in Firefox, Chrome and Safari:

[simonw]

I'm not crazy about the look - I think this version of the grid may have too many lines for this particular display size.

I'm going to try reducing the number of lines in Figma to see if I like that better. https://www.figma.com/file/LKjceTFNtKm6wCbScDqm1Y/Datasette-Logo