Ontario.ca homepage
Français

Ontario Design System

Favicon

Use favicons to ensure users know they are on an official Government of Ontario site.

Guiding principle: Be consistent.

About favicons

Example

Example of the Government of Ontario favicon in a browser tab and in the bookmarks bar.

A favicon (or “favourite icon”) is a small icon associated with a website. It displays in several places across the internet and on users’ devices.

Most people are familiar with favicons in their browser tab. They also show up in other places, such as:

  • browser history
  • bookmark menus
  • browser search bar recommendations
  • search engine results
  • shared link previews
  • device home screens

Favicons are important for:

  • adding credibility to sites
  • ensuring brand consistency
  • helping users identify sites within lists without having to read the text

When to use favicons

All Government of Ontario websites, sub-sites and applications must include the favicon.

This guidance is specifically for favicons used on websites. It does not apply to native apps.

We recommend using all three file formats to ensure consistency across as many browsers as possible.

PNG

PNG files are raster images with a fixed size and resolution. They cannot be scaled up mathematically without looking blurry, so different sizes are usually supplied in this format.

PNG works well with iOS, Android, and Windows 10+ devices. It is the recommended file type because it is supported by most modern browsers.

SVG

SVG files are vector images that look crisp when scaled up or down to any size.

This single format is also compatible in both light and dark mode, making it more future proof.

Despite these advantages, it is not fully supported on all web browsers, so it is not recommended as the only format.

ICO

ICO files are raster images. As the oldest favicon file format, an ICO will work in almost all web browsers, even older ones. They are often used for legacy browsers.

It is recommended for maximum compatibility.

Favicon sizes

We provide a range of formats and sizes to ensure the favicon:

  • looks crisp on retina screens
  • addresses most requirements and quirks across different browsers

Mobile devices

iOS and Android devices allow users to add webpages to their home screen. This feature requires larger favicon sizes to ensure a clean, crisp appearance.

Implementation instructions

The favicon package includes:

  • a single SVG icon that is compatible in both light and dark mode for modern browsers
  • a 32×32 pixel ICO file for legacy browsers
  • four PNG files:
    • 48×48 pixels for browsers and search engine results
    • 180×180 pixels for Apple devices
    • 192×192 pixels for Android device home screens
    • 512×512 pixels for Android device splash screens (used when a site/app is loading)
  • a sample manifest.json file

HTML instructions

  1. Download the distribution package or install the Ontario Design System Global Styles package (refer to Getting started for developers for these options.) All favicons and a sample manifest.json file are located under the “favicons” folder within the package.
  2. Move the favicon files to the appropriate asset folder of your project.
  3. Include links to all favicons and the manifest.json file in the <head> tag of the main root index file.
    1. Add individual links to the SVG, ICO and two of the PNG files (48×48 and 180×180).
    2. The remaining two PNG files (192×192 and 512×512) are referenced in the manifest.json file. Add a link to this file in the head tag as well.
  4. Update the manifest.json application name and description to match your project. The icon sources may also need to be updated depending on where the favicon assets are stored in your project.

Refer to the example.

Note: Do not change the design system’s favicon filenames. Keeping the filenames consistent makes updates easier.

Example: favicon asset copy with Node

copyfiles -E -f "node_modules/@ongov/ontario-design-system-component-library-react/dist/assets/favicons/**" public/assets/favicons

Note: by default copyfiles will overwrite a customized manifest.json file with our generic version. To avoid overwriting your manifest.json file add an exclusion to the file copy process. For example:

copyfiles -e **/manifest.json -E -f "node_modules/@ongov/ontario-design-system-component-library-react/dist/assets/favicons/**" public/assets/favicons
<head>
    …
    <link rel=”icon” href=”/favicon.ico” size=”any”/> <link rel=”shortcut icon” href=”/favicon.ico” size=”any”/>
    <link rel=”icon” href=”/favicon.svg” type=”image/svg+xml” />
    <link rel=”icon” href=”/favicon-48x48” type=”image/png” /> // (48 x 48)
    <link rel=”apple-touch-icon” href=”/apple-touch-icon.png” type=”image/png”/> // (180 x 180)
    <link rel=”manifest” href=”/manifest.json” />
    …
</head>

If you have any questions or feedback, please get in touch.