Design System Dev 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
    Banner Health favicons Banner Health favicon in an iMessage
  • Touch icons for Apple and Android devices
    Banner Health touch icon on an iPhone
  • Other browser- and OS-specific icons (Safari icons and Windows Metro tiles shown below)
    Banner Health icons in Safari Banner Health tile on Windows Metro