{%- comment -%}
All of these can be automatically generated by
http://faviconit.com/en : browserconfig.xml, all the .ico and favicon-XX.png files
and https://realfavicongenerator.net : site.webmanifest + android-chrome-384x384.png and android-chrome-192x192.png

CHECKLIST
- http://faviconit.com/en :: add all files to the root of project (omit the instructions file)
- realfavicongenerator.net :: add only the following to the root of the project
    - site.webmanifest, 
    - android-chrome-384x384.png 
    - android-chrome-192x192.png
- Update TileColor in browserconfing.xml and meta tag below
- Update Theme and Background color in site.webmanifest
- Update theme-color meta tag below
{%- endcomment -%}

<!-- _includes/partials/favicon.html -->

    {% comment %}
        Classic desktop browsers
    {%- endcomment -%}
    <link rel="shortcut icon" href="{{ "favicon.ico" | absolute_url }}" />

    {% comment %}
        Additional sizes for various browsers
    {%- endcomment -%}
    <link rel="icon" sizes="16x16 32x32 64x64" href="/favicon.ico">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ "favicon-16.png" | absolute_url }}">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ "favicon-32.png" | absolute_url }}">
    <link rel="icon" type="image/png" sizes="64x64" href="{{ "favicon-64.png" | absolute_url }}">
    <link rel="icon" type="image/png" sizes="96x96" href="{{ "favicon-96.png" | absolute_url }}">
    <link rel="icon" type="image/png" sizes="160x160" href="{{ "favicon-160.png" | absolute_url }}">
    <link rel="icon" type="image/png" sizes="192x192" href="{{ "favicon-192.png" | absolute_url }}">

    {% comment %}
        Android Chrome
    {%- endcomment -%}
    <link rel="icon" type="image/png" sizes="192x192" href="{{ "favicon-192.png" | absolute_url }}">
    <link rel="icon" type="image/png" sizes="384x384" href="{{ "android-chrome-384x384.png" | absolute_url }}">
    <link rel="manifest" href="{{ "site.webmanifest" | absolute_url }}">

    {% comment %}
        iOS Safari & Android Chrome
    {%- endcomment -%}
    <link rel="apple-touch-icon" sizes="57x57" href="{{ "favicon-57.png" | absolute_url }}">
    <link rel="apple-touch-icon" sizes="60x60" href="{{ "favicon-60.png" | absolute_url }}">
    <link rel="apple-touch-icon" sizes="72x72" href="{{ "favicon-72.png" | absolute_url }}">
    <link rel="apple-touch-icon" sizes="76x76" href="{{ "favicon-76.png" | absolute_url }}">
    <link rel="apple-touch-icon" sizes="114x114" href="{{ "favicon-114.png" | absolute_url }}">
    <link rel="apple-touch-icon" sizes="120x120" href="{{ "favicon-120.png" | absolute_url }}">
    <link rel="apple-touch-icon" sizes="144x144" href="{{ "favicon-144.png" | absolute_url }}">
    <link rel="apple-touch-icon" sizes="152x152" href="{{ "favicon-152.png" | absolute_url }}">
    <link rel="apple-touch-icon" sizes="180x180" href="{{ "favicon-180.png" | absolute_url }}">

    {% comment %}
        Win 8.0, Win 8.1, Edge and IE11+
    {%- endcomment -%}
    <meta name="msapplication-TileImage" content="favicon-144.png">
    <meta name="msapplication-config" content="browserconfig.xml">
    <meta name="msapplication-TileColor" content="#ffffff">

    {% comment %}
        Mobile Chrome theme color
    {%- endcomment -%}
    <meta name="theme-color" content="#ffffff">

    {% comment %}
        Preffered image for SERPs, optional, uncomment the code if needed.
        https://support.google.com/customsearch/answer/1626955?hl=en

        <meta name="thumbnail" content="{{ "thumbnail.png" | absolute_url }}" />
    {%- endcomment -%}

    <!-- / _includes/partials/favicon.html -->