Favicons, Topics and Tags
Re-learning the basics of websites and some new functionality.
Having recovered from both Blaugust and the chaos of “back to school” month, I thought I'd get back aboard the blogging train with some new posts, site plans and the migration of my older posts.
Modern simple sites
I truly wasn't aware of all the small things that were being managed automatically for me by publishing software like Wordpress, things that were never a concern in the heady days of building a site in notepad and when everyone was using dial-up. With evolution, seemingly small changes happen that take hold and slowly become the norm. I am always surprised when a simple task from 20 years ago has morphed into some elaborate and complex component that needs extra plumbing and planning to function.
Favicon is a wonderful example of this.
Historically, a single file at the root of your website which wasn't referenced by the site directly, but certain browsers or applications would check for its existence (a feature we can actually thank Internet Explorer for). Of course, a 16px or 32px icon on modern technological platforms is bound to look a little lower in quality.
Progress has been made! So now we aren't bound to only using ICO files and we can define different sizes. YAY!
Modern browsers can make use of a SVG file, even swapping the background colour to swap based on device preference.
It would be amazing news but then you discover the need for custom support for Apple and Android, both of whom use completely different approaches.
<link rel="icon" type="image/png" href="https://welshtroll.co.uk/favicon-48x48.png" sizes="48x48">
<link rel="icon" type="image/svg+xml" href="https://welshtroll.co.uk/favicon.svg">
<link rel="icon" href="https://welshtroll.co.uk/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="https://welshtroll.co.uk/apple-touch-icon.png">
<meta name="apple-mobile-web-app-title" content="Welshtroll">
<link rel="manifest" href="https://welshtroll.co.uk/site.webmanifest">
Naturally Apple use their own proprietary solution, ignoring all others.
Thankfully Android will default to use the regular icon\png\svg files but can be enhanced with additional files to make it's use on devices more crisp.
Ultimately, you end up with a heap of files to cover the various different possible options, not ideal but apparently
Thankfully, many of the other configurations never had large scale adoption usage or are now obsolete, like in the case of the Windows Start Menu Title icon.
EDIT:The Apple and Android favicons are meant for SPAs but nice to have them in there if you, like me, bookmark your sites to reach them quickly.
Tags and Topics
Despite not blogging over the last 6 weeks, I haven't completely abandoned work on the website.
I wanted to design a solution for linking between topics and tags. While there are a number of different ways to achieve this, I wanted to avoid those that want a page to be generated for every single one of them. It's not the generating that I object to, it's the idea of a sprawling mess of files to have to deal with on the file server.
Firstly, I settled on using the accordion functionality that is now baked into a lot of modern browsers, but will still fallback to a good visual/experience if it isn't supported. Secondly, using the ID attribute to jump straight to the relevant area of the page, plus highlighting the targeted item.
I am keeping the blog TODO list updated as I pick away at the functionality I want to deliver.