Adding Favicons to Jekyll Part 2

OK we made an icon we like, edited it, compressed it. It’s web ready and time to add, but we aren’t using a flat html page. These are generated by the Jekyll builder. Easy enough to just hardcode a tag and path, force it in. But is that what we want? Lets try and fit it in more seamlessly so we improve the process for next time.

Thinking in that model matters sometimes even on the smallest projects. For me making stuff, learning, and creating things that make my process easier, is entertaining. Plus you appreciate it later. And a question to ask yourself when looking at the whole thing upon completion is, is that improvement something others would find value in? In other words did you just potentially make a product with a existing market and an open door? Can’t stress that enough. Lots of things I thought I made for me, years later other people are selling. Sometimes follow the whole process to mimic what others are doing, to understand their pain points so you know what solutions to build.

Back to the favicon. I have an idea of how I’m going to approach this but just want to glance at Stack Exchange and make sure what’s in my head isn’t completely off. I’m seeing some people just hardcode it in. Interesting but a welcome sight. Because if the by-the-book nerds don’t particularly care neither do I. Well normally but in this case I do think a couple extra steps seem like they’ll pay off and help me learn to think a certain way. First thought is the config file _config.yml, you can add your own variables.

I’m adding these to my config file:

favicon: assets/images/icon_192.png
favicon_big: assets/images/icon_256.png
favicon_biggest: assets/images/icon_512.png

Remember I said I use a remote hosted theme but also that I’m the one hosting? One reason I do this is to have the power to change anything but the ability to see where a division should be between template and the variable data it is instantiated with. In this case I think this solution feels like it should be part of the template so I’m adding these as blank fields to the template config:

favicon: 
favicon_big:
favicon_biggest:

I might change these later but for now I know theres going to be times like if I do a web app or extension and for sharing that I’ll want to call on different sizes. The compatibility with older browsers part, I’m honestly not concerned with.

OK, next lets figure out which piece should refer to this. It looks like _includes/head.html. If you’re using a remote theme and just have a config file you can try adding the _includes folder and placing a file named head.html in it for overriding the default. I’m going to do that and pretty confident it will work as I already have a head file there to override the default and in it I have new css references and changes to font importing. But in case I make other sites in the future I’d like them to have an easier path so I’m adding the change also to my remote template.

This is what I’ll be adding:

<link rel="shortcut icon" href="{{ site.favicon | absolute_url}}">

<link rel="apple-touch-startup-image" href="{{ site.favicon_biggest | absolute_url}}">

This will take my variables favicon and favicon_biggest path and append it to the absolute url as defined in the config file also. Absolute url is a filter in jekyll which combines the url https://rkooyenga.github.io and baseurl / Your setup may or may not be like that but thats why I’m choosing this route and also absolute url is I believe SEO preferred, best practice, and the placing of the icon in a sub folder then referencing it here is also best practice per the W3 Consortium.

Here’s what my head file looks like:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#e7a904">
    <meta name="mobile-web-app-status-bar-style" content="black-translucent">
    <link rel="shortcut icon"  type="image/png"  href="{{ site.favicon | absolute_url}}">
    <link rel="apple-touch-startup-image"  type="image/png"  href="{{ site.favicon_biggest | absolute_url}}">
...other stuff...

As with the previous updates, I’m applying this change to my template theme as well as the site itself. Here’s what this output when loaded:

<html lang="en-US" class="no-js">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#e7a904">
    <meta name="mobile-web-app-status-bar-style" content="black-translucent">
    <link rel="shortcut icon"  type="image/png"  href="https://rkooyenga.github.io/assets/images/icon_192.png">
    <link rel="apple-touch-startup-image"  type="image/png"  href="https://rkooyenga.github.io/assets/images/icon_512.png">

Note the last two lines? We’re good!! Your keen eye may be inquisitive about the no-js class at top. That just because for speed I just ran it in the terminal curl -L rkooyenga.github.io|head --lines 10

In closing here I feel good about the process. It feels more by the book than I’m generally inclined to be. So I try to pat myself on the back when I do something I think is how the IBM guys with garter belts on their socks (not even joking it’s some real 50s shit) might’ve done it. In testing i’m getting no errors and dragging my site to the chrome favorites bar theres my icon. But there’s more. I already see a problem with these icons in how I processed them. But since we’re using variables and templates it’s going to be a 2 minute change with zero coding. Having second thoughts about the whole ascii squished down idea of a site icon concept but, if I decide to change them completely, that’ll be a cinch too with zero code!

Thanks for sticking through this and if it looks like there’s any reads here I’ll do another writeup on Jekyll stuff.

Be Best, RK