Skip to main content

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 { getFavicon } 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​

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

32 x 32​

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

16 x 16​

16x16 favicon 
<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" })}
/>