􀀂􀀟􀀍􀀄 􀀂􀀘􀀅 Site design updates

Some recent redesign notes.

New logo in the nav bar

I am now using the Yinit font for a site logo.

I’ve hacked this out of Gwern’s elegant system for dropcaps (noted here). The Yinit font has separate ttf files for each letter in the split-for-web branch. This is somewhat strange, but since I truly only want to use the M character, it saves bandwidth.

TODO: I should probably convert all of these to woff2 from ttf for even smaller file sizes, but I got lazy.

Change favicon

Taking further inspiration from Gwern’s site, I tried a favicon based on single letter, and I liked the result more than my sparkles emoji.

I decided to go with the lower case ’m’ from UnifrakturCook. It looks like this:

It is a different color in light mode vs dark mode, which means it will show up correctly in the tab bar or search engine results page.

Here’s how I made it:

1. I used https://favicon.io/favicon-generator/ to quickly see 1-3 letter favicons in various fonts. It supports everything on Google Fonts, which means it has lots of choices, and it shows previews both on the page and live updates the site’s own favicon when you change something. However, it doesn’t generate a full complement of favicon and app icons, so I only used this for exploration. I found that I liked the UnifrakturCook font this way.

2. I used https://danmarshall.github.io/google-font-to-svg-path/, which can also load directly from Google Fonts, to make an SVG out of the letter.

3. I colorized the SVG in Inkscape.

4. I created an SVG favicon with https://realfavicongenerator.net/svg-favicon/. That site has two modes for creating favicons, and the button labeled Create SVG favicon from the main page is the one I’m talking about. It requires you to already have an SVG (which I got above), and it lets you build an SVG favicon that supports @media (prefers-color-scheme) queries to support a different icon in dark mode, and it shows you in real time what they would look like in each mode. When this was finished, I got two files: a favicon.svg and a 48x48 favicon.png (for fallback)

5. I then uploaded the SVG favicon I got back to the other mode for creating favicons from the https://realfavicongenerator.net/ home page. This mode shows you what your favicon will look like in various browsers, when installed to mobile device home screens, etc. The result of this process is many more files.

6. I combined the results and added it to my site.

I’ve used a bunch of tools for getting favicons for little projects, and these are my favorite favicon tools I’ve found.

More to come?

If you’d like to see something I’m experimenting with, take a peek at the secret control panel.

Edit: Dark mode is now live!