University of Leeds Design System v1.0.15

Favicons

Guidance

  • Favicon code should be placed in-between head tags.

  • The favicon URL must be stable (don’t change the URL frequently)

  • The href’s should be changed accordingly to the correct file paths when implemented on the live site

<link rel="apple-touch-icon" sizes="57x57" href="{{ '/assets/favicons/apple-icon-57x57.png' | path }}">
<link rel="apple-touch-icon" sizes="60x60" href="{{ '/assets/favicons/apple-icon-60x60.png' | path }}">
<link rel="apple-touch-icon" sizes="72x72" href="{{ '/assets/favicons/apple-icon-72x72.png' | path }}">
<link rel="apple-touch-icon" sizes="76x76" href="{{ '/assets/favicons/apple-icon-76x76.png' | path }}">
<link rel="apple-touch-icon" sizes="114x114" href="{{ '/assets/favicons/apple-icon-114x114.png' | path }}">
<link rel="apple-touch-icon" sizes="120x120" href="{{ '/assets/favicons/apple-icon-120x120.png' | path }}">
<link rel="apple-touch-icon" sizes="144x144" href="{{ '/assets/favicons/apple-icon-144x144.png' | path }}">
<link rel="apple-touch-icon" sizes="152x152" href="{{ '/assets/favicons/apple-icon-152x152.png' | path }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ '/assets/favicons/apple-icon-180x180.png' | path }}">
<link rel="icon" type="image/png" sizes="192x192"  href="{{ '/assets/favicons/android-icon-192x192.png' | path }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ '/assets/favicons/favicon-32x32.png' | path }}">
<link rel="icon" type="image/png" sizes="96x96" href="{{ '/assets/favicons/favicon-96x96.png' | path }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ '/assets/favicons/favicon-16x16.png' | path }}">
<link rel="manifest" href="{{ '/assets/favicons/manifest.json' | path }}">
<link rel="shortcut icon" href="{{'/assets/favicons/favicon.ico' | path }}" type="image/ico">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="{{ '/assets/favicons/ms-icon-144x144.png' | path }}">
<meta name="theme-color" content="#ffffff">
 
<link rel="apple-touch-icon" sizes="57x57" href="../../assets/favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="../../assets/favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="../../assets/favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="../../assets/favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="../../assets/favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="../../assets/favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="../../assets/favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="../../assets/favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="../../assets/favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="../../assets/favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="../../assets/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="../../assets/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="../../assets/favicons/favicon-16x16.png">
<link rel="manifest" href="../../assets/favicons/manifest.json">
<link rel="shortcut icon" href="../../assets/favicons/favicon.ico" type="image/ico">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="../../assets/favicons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
  • Handle: @uol-favicons-example
  • Preview:
  • Filesystem Path: src/library/01-foundations/03-utilities/favicons/favicons.njk 
/* No context defined. */