Favicon

Provides favicon in necessary formats and dimensions for all supported browsers and operating systems.

Usage

Favicons should be defined within the <head> tag of the HTML page along with the theme-color <meta> tag:

  <link
    rel="apple-touch-icon"
    sizes="180x180"
    href="/favicon/apple-touch-icon.png?v=__ASSET_VERSION__"
  />
  <link
    rel="icon"
    type="image/png"
    sizes="32x32"
    href="/favicon/favicon-32x32.png?v=__ASSET_VERSION__"
    class="js-site-icon"
  />
  <link
    rel="icon"
    type="image/png"
    sizes="16x16"
    href="/favicon/favicon-16x16.png?v=__ASSET_VERSION__"
    class="js-site-icon"
  />
  <link
    rel="icon"
    type="image/svg+xml"
    sizes="any"
    href="/favicon/favicon.svg?v=__ASSET_VERSION__"
    class="js-site-icon"
  />
  <link
    rel="mask-icon"
    href="/favicon/safari-pinned-tab.svg?v=__ASSET_VERSION__"
    color="#bd1127"
  />
  <meta name="theme-color" content="#333333" />

Dark grey and light grey favicons are used on RA2 family of devices to indicate an active Remote Access connection in the given browser tab. Dark grey is used in light system scheme and light in dark system scheme.

For advanced usage favicons can also be accessed directly at /src/assets/favicon/<brand>.

Brands

Favicons are branded.

If possible the correct brand should be used. If the required brand is not available the generic blank brand can be used.

RACOM

Base

racom/favicon.ico
racom/favicon.svg
racom/safari-pinned-tab.svg
racom/favicon-16x16.png
racom/favicon-32x32.png
racom/android-chrome-192x192.png
racom/android-chrome-512x512.png
racom/android-chrome-maskable-192x192
racom/apple-touch-icon.png

Light Scheme (Dark Grey)

racom/favicon-dark-16x16.png
racom/favicon-dark-32x32.png
racom/favicon-dark.svg

Dark Scheme (Light Grey)

racom/favicon-light-16x16.png
racom/favicon-light-32x32.png
racom/favicon-light.svg"

Blank

Base

blank/favicon.ico
blank/favicon.svg
blank/safari-pinned-tab.svg
blank/favicon-16x16.png
blank/favicon-32x32.png
blank/android-chrome-192x192.png
blank/android-chrome-512x512.png
blank/android-chrome-maskable-192x192
blank/apple-touch-icon.png

Light Scheme (Dark Grey)

blank/favicon-dark-16x16.png
blank/favicon-dark-32x32.png
blank/favicon-dark.svg

Dark Scheme (Light Grey)

blank/favicon-light-16x16.png
blank/favicon-light-32x32.png
blank/favicon-light.svg