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

[simonw]

My attempt with one less grid line looked awful when shrunk down to the browser size:

File here:

I'm going with the first attempt for the moment.

[simonw]

The new /favicon.ico view:

datasette/datasette/app.py

Lines 182 to 192 in 0467723

	FAVICON_PATH = app_root / "datasette" / "static" / "favicon.png"
	async def favicon(request, send):
	await asgi_send_file(
	send,
	str(FAVICON_PATH),
	content_type="image/png",
	chunk_size=4096,
	headers={"Cache-Control": "max-age=3600, immutable, public"},
	)

[simonw]

New favicon now live on https://latest.datasette.io/ - see also https://latest.datasette.io/favicon.ico

[simonw]

Oops, I pushed the one I liked least out of the two options! Fixing now.

[simonw]

Now live on https://latest.datastte.io/ - I'm happy enough with this for the moment:

[simonw]

One last go at tidying this up. I decided to do a 32x32 pixel version in Pixelmator, using this trick to access a pixel brush: https://osxdaily.com/2016/11/17/enable-pixel-brush-pixelmator-mac/

Frustrating how the white boxes are all exactly four pixels high and ALMOST all four pixels wide, but one of them has to be three pixels wide to fit the space.

[simonw]

Here's a comparison between my hand-edited version and the one I have now:

The new 32x32 image:

[simonw]

Resized it down to 208 bytes with https://squoosh.app

[simonw]

Wrote up a TIL: https://til.simonwillison.net/pixelmator/pixel-editing-favicon