Favicon

Component: Favicon

The package was created with RealFaviconGenerator.

<!-- Default -->
<link rel="apple-touch-icon" sizes="180x180" href="../../images/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="../../images/favicon/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="../../images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="../../images/favicon/android-chrome-192x192.png">
<link rel="manifest" href="../../images/favicon/site.webmanifest">
<meta name="msapplication-config" content="../../images/favicon/browserconfig.xml" />
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">

<!-- Documentation only -->
<section class="doc-variant">

    <header class="doc-variant-header">
        <h2 class="doc-variant-title">Favicon (16&times;16 Pixel)</h2>
    </header>

    <div class="doc-favicon is-favicon-16">

        <div class="doc-favicon-context">
            <span class="doc-favicon-icon" style="background-image: url(../../images/favicon/favicon-16x16.png);"></span>
        </div>

    </div>

</section>
<section class="doc-variant">

    <header class="doc-variant-header">
        <h2 class="doc-variant-title">iOS</h2>
    </header>

    <div class="doc-favicon is-ios">

        <div class="doc-favicon-context">
            <span class="doc-favicon-icon" style="background-image: url(../../images/favicon/apple-touch-icon.png);"></span>
        </div>

    </div>

</section>
<section class="doc-variant">

    <header class="doc-variant-header">
        <h2 class="doc-variant-title">Android</h2>
    </header>

    <div class="doc-favicon is-android">

        <div class="doc-favicon-context">
            <span class="doc-favicon-icon" style="background-image: url(../../images/favicon/android-chrome-512x512.png);"></span>
        </div>

    </div>

</section>
<section class="doc-variant">

    <header class="doc-variant-header">
        <h2 class="doc-variant-title">Windows</h2>
    </header>

    <div class="doc-favicon is-windows">

        <div class="doc-favicon-context" style="background-color: #ffffff">
            <span class="doc-favicon-icon" style="background-image: url(../../images/favicon/mstile-150x150.png);"></span>
        </div>

    </div>

</section>

<!-- Default -->
<link rel="apple-touch-icon" sizes="180x180" href="{{path '/images/favicon/apple-touch-icon.png'}}">
<link rel="icon" type="image/png" sizes="16x16" href="{{path '/images/favicon/favicon-16x16.png'}}">
<link rel="icon" type="image/png" sizes="32x32" href="{{path '/images/favicon/favicon-32x32.png'}}">
<link rel="icon" type="image/png" sizes="192x192" href="{{path '/images/favicon/android-chrome-192x192.png'}}">
<link rel="manifest" href="{{path '/images/favicon/site.webmanifest'}}">
<meta name="msapplication-config" content="{{path '/images/favicon/browserconfig.xml'}}" />
{{#theme-color}}<meta name="msapplication-TileColor" content="{{.}}">{{/theme-color}}
{{#theme-color}}<meta name="theme-color" content="{{.}}">{{/theme-color}}

<!-- Documentation only -->
{{#variants}}
<section class="doc-variant">

    <header class="doc-variant-header">
            {{#title}}
        <h2 class="doc-variant-title">{{{.}}}</h2>
            {{/title}}
    </header>

    <div class="doc-favicon is-{{type}}">

        <div class="doc-favicon-context"{{#tile-color}} style="background-color: {{.}}"{{/tile-color}}{{#theme-color}} style="background-color: {{.}}"{{/theme-color}}>
                {{#if is-svg}}
            <span class="doc-favicon-icon" style="background-color: {{#if color}}{{color}}{{/if}}{{#unless color}}white{{/unless}}; -webkit-mask-image: url({{path url}}); mask-image: url({{path url}});" ></span>
                {{/if}}
                {{#unless is-svg}}
            <span class="doc-favicon-icon" style="background-image: url({{path url}});" ></span>
                {{/unless}}
        </div>

    </div>

</section>
    {{/variants}}
/* Default */
{
  "theme-color": "#ffffff"
}

/* Documentation only */
{
  "theme-color": "#ffffff",
  "variants": [
    {
      "title": "Favicon (16&times;16 Pixel)",
      "type": "favicon-16",
      "url": "/images/favicon/favicon-16x16.png"
    },
    {
      "title": "iOS",
      "type": "ios",
      "url": "/images/favicon/apple-touch-icon.png"
    },
    {
      "title": "Android",
      "type": "android",
      "url": "/images/favicon/android-chrome-512x512.png"
    },
    {
      "title": "Windows",
      "type": "windows",
      "url": "/images/favicon/mstile-150x150.png",
      "tile-color": "#ffffff"
    }
  ]
}