Circuit - DEHN's design system of the lightning and surge protection professionals

Favicons

Description

In line with contemporary web standards and user experience best practices, we have established guidelines for implementing favicons across our digital properties. Favicons play a crucial role in branding and user recognition, appearing in browser tabs, bookmarks, and other instances, enhancing the overall user experience.

Implementation Guidelines:

To ensure seamless integration and optimal display across various devices and platforms, we recommend the following steps for implementing the provided favicon files:

  1. Favicon Files:

    • favicon.ico: This file serves as the primary favicon and should be placed in the root directory of your website. It is supported by most browsers and platforms.
    • icon-192.png: This 192x192px PNG file is intended for Android devices' home screen icons. Include it in your website's root directory.
    • icon-512.png: Use this 512x512px PNG file for Windows 10 tile icons and other specific use cases. Place it in your website's root directory.
    • apple-touch-icon.png: This file, named apple-touch-icon.png, is for Apple devices' home screen icons. Include it in the root directory of your website.
    • icon.svg: SVG format of the favicon. While not required for all use cases, it provides scalability and can be included in your website's root directory.
    • manifest.webmanifest: This JSON-formatted file specifies metadata about the web application. It includes information like the name, description, and icons for the application. Ensure it is correctly referenced in your HTML document.

  2. HTML Implementation:

    • Insert the favicon link element into the head section of each HTML document.
    • Specify the location and file format using the "rel" and "href" attributes.
    • Example code snippet for including favicon links:
      <link rel="icon" type="image/png" sizes="16x16" href="favicon.ico">
<link rel="icon" type="image/png" sizes="192x192" href="icon-192.png">
<link rel="icon" type="image/png" sizes="512x512" href="icon-512.png">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="manifest" href="manifest.webmanifest">

  3. Testing and Validation:

    • After implementing favicon links, thoroughly test across various browsers, devices, and screen resolutions to ensure consistent display and functionality.
    • Verify that each favicon file is correctly displayed in its respective context (browser tabs, bookmarks, home screens, etc.).

Resources