Favicons

info

There is also a favicon component which will generate all the required favicons for your application.

Installation

yarn add @iag/chroma-react-ui.components

Import

import  from "@iag/chroma-react-ui.components";

Function

getFavicon({
      brand: { brand }, // set brand
      filename: "", // OPTIONS: apple-touch-icon.png | favicon-32x32.png | favicon-16x16.png | site.webmanifest
    });

Apple touch

<link
      rel="apple-touch-icon"
      sizes="180x180"
      href={getFavicon({ brand: "chroma", filename: "apple-touch-icon.png" })}
    />

32 x 32

<link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href={getFavicon({ brand: "chroma", filename: "favicon-32x32.png" })}
    />

16 x 16

<link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href={getFavicon({ brand: "chroma", filename: "favicon-16x16.png" })}
    />

site.webmanifest

{
      "name": "",
      "short_name": "",
      "icons": [
        {
          "src": "android-chrome-192x192.png",
          "sizes": "192x192",
          "type": "image/png"
        },
        {
          "src": "android-chrome-512x512.png",
          "sizes": "512x512",
          "type": "image/png"
        }
      ],
      "theme_color": "#ffffff",
      "background_color": "#ffffff",
      "display": "standalone"
    }

<link
      rel="manifest"
      href={getFavicon({ brand: { brand }, filename: "site.webmanifest" })}
    />