Skip to main content

Favicon

Overview

The Style Kit includes a default Favicon based on the BAS logo.

Supported browsers

The Style Kit favicon is designed to work with all browsers and devices supported by the Style Kit. This includes icons in browsers and when pinned to start/home screens.

Usage

The Style Kit hosts hosts a default Favicon through the BAS CDN. Unfortunately there is no universal way to do specify a favicon that works across all browsers and devices, which means multiple references are needed.

If integrating the Style Kit directly into a website or application, add these tags to the HTML <head> element.

If you are using one of the Style Kit’s themes or templates this is already done for you.

<!-- Add these tags to the HTML 'head' element -->
<link rel="apple-touch-icon" sizes="180x180" href="https://cdn.web.bas.ac.uk/bas-style-kit/0.5.0/img/favicon/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="https://cdn.web.bas.ac.uk/bas-style-kit/0.5.0/img/favicon/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="https://cdn.web.bas.ac.uk/bas-style-kit/0.5.0/img/favicon/favicon-16x16.png" />
<link rel='manifest' href="https://cdn.web.bas.ac.uk/bas-style-kit/0.5.0/img/favicon/site.webmanifest" />
<link rel="mask-icon" href="https://cdn.web.bas.ac.uk/bas-style-kit/0.5.0/img/favicon/safari-pinned-tab.svg" color="#222222" />
<link rel="shortcut icon" href="https://cdn.web.bas.ac.uk/bas-style-kit/0.5.0/img/favicon/favicon.ico" />
<meta name="msapplication-TileColor" content="#222222">
<meta name="msapplication-config" content="https://cdn.web.bas.ac.uk/bas-style-kit/0.5.0/img/favicon/browserconfig.xml">
<meta name="theme-color" content="#222222">