This is an example of a Jekyll site using Jekyll Favicon Plugin.
How does this work?
First: the favicon gem
Add the Jekyll Favicon gem at your Gemfile and bundle!
gem 'jekyll-favicon', '~> 1.0.0.pre.3', group: :jekyll_plugins
Second: the favicon template
Put an SVG like 
at the root of your project and name it favicon.svg.
| favicon.ico | favicon.png | safari-pinned-tab.svg |
|---|---|---|
 |
 |
| android-chrome-192x192.png | android-chrome-512x512.png |
|---|---|
 |
 |
| mstile-icon-128x128.png | mstile-icon-270x270.png | mstile-icon-558x270.png | mstile-icon-558x558.png |
|---|---|---|---|
 |
 |
 |
 |
Also, It will generate or update a browserconfig and a webmanifest.
Last: the favicon links and meta
In order to load those files, a new Liquid tag favicon is available. Use it in your head tag:
<head>
<!-- your other head content goes here -->
{% favicon %}
</head>
Jekyll Favicon will generate tags for all the new resources:
<link href='/favicon.ico' rel='shortcut icon' sizes='36x36 24x24 16x16' type='image/x-icon'/>
<link href='/favicon.png' rel='icon' sizes='196x196' type='image/png'/>
<link color='transparent' href='/safari-pinned-tab.svg' rel='mask-icon'/>
<meta content='/mstile-icon-128x128.png' name='msapplication-TileImage'/>
<meta content='transparent' name='msapplication-TileColor'/>
<link href='/manifest.webmanifest' rel='manifest'/>
<meta content='/browserconfig.xml' name='msapplication-config'/>
Use yout browser to inspect the source code of this page, specifically, the content of the head tag.