Favicons | Banner Health Design System Developer Resource

Here you can find instructions on implementing the Banner Health favicon on all platforms.

Favicon Implementation

Download the following zip file, unzip it, and place the favicons folder in the root of your site. It includes all favicons, mobile touch icons, and files necessary to use the favicons. It also includes a script that checks for dark mode, which will swap the Banner Health blue heart logo with the white heart logo, so it's easier to see. Download Zip
Include the following code in your <head> tag:

<!-- Favicons -->
<link id="bh-apple-touch-icon" rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png">
<link id="bh-favicon-32" rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
<link id="bh-favicon-16" rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
<link id="bh-favicon" rel="shortcut icon" href="favicons/favicon.png">
<link id="bh-manifest" rel="manifest" href="favicons/site.webmanifest">
<link id="bh-safari-pinned-tab" rel="mask-icon" href="favicons/safari-pinned-tab.svg" color="#00205b">
<meta id="bh-ms-tile-color" name="msapplication-TileColor" content="#00205b">
<meta id="bh-ms-tile-image" name="msapplication-TileImage" content="favicons/mstile-144x144.png">
<meta id="bh-theme-color" name="theme-color" content="#00205b">
<script src="favicons/favicons.js"></script>
<!-- / Favicons -->

What's included:

Favicons for all web browsers
Touch icons for Apple and Android devices
Other browser- and OS-specific icons (Safari icons and Windows Metro tiles shown below)