TIL: Adding favicon to Jekyll
While doing some maintenance today, I noticed that I didn’t have a favicon for the blog. Decided I’d finally get around to fixing that up.
If you’re not familiar with favicons, they’re the little images that show up next to your webpage in a tab or bookmark that make it easy to differentiate between your pages. So for me, I wanted to reuse my little lime icon across all pages.
Some quick searching revealed that favicons are handled via a shortcut icon tag in the header on each page. Something like so:
|
|
where favicon.png is the name of the icon file you want to have shown. In the case of Jekyll, these should be dropped at the top level of your file structure, next to your _posts, assets, etc folders.
I dropped the above line in one of my header template files and rebuilt. Everything seemed good to me - I was able to see the icon in my tabs and it was showing up in my book marks.
But upon further testing, I found that it was only working on the main page. In order to apply the icon to ALL pages, you need to throw in an extra bit of conditional code to tell jekyll where the file is across all of your paths:
|
|
With this, it will be able to access the file across all of your sub pages and articles!
A note about .ico files
I’m not really sure what these files are, but they did come up when I was searching (evidently another type of file for icons). If you are using a .ico file, evidently you’ll need to include a ? at the end of your file name. So the example above would become:
|
|
Resources
💚 A.B.L.