Use favicons to ensure users know they are on an official Government of Ontario site.
Guiding principle: Be consistent.
On this page
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.
Recommended file formats
We recommend using all three file formats to ensure consistency across as many browsers as possible.
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 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 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.
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
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.
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
- 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.
- Move the favicon files to the appropriate asset folder of your project.
- Include links to all favicons and the
manifest.json file in the
<head> tag of the main root index file.
- Add individual links to the SVG, ICO and two of the PNG files (48×48 and 180×180).
- 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.
- 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/@ontario-digital-service/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/@ontario-digital-service/ontario-design-system-component-library-react/dist/assets/favicons/**" public/assets/favicons
Example: links in the head tag
<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” />