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="icon" type="image/png" sizes="96x96" href="{{ '/assets/favicons/favicon-96x96.png' | path }}">
<link rel="icon" type="image/svg+xml" href="{{ '/assets/favicons/favicon.svg' | path }}">
<link rel="shortcut icon" href="{{ '/assets/favicons/favicon.ico' | path }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ '/assets/favicons/apple-touch-icon.png' | path }}">
<link rel="manifest" href="{{ '/assets/favicons/site.webmanifest' | path }}">
<link rel="icon" type="image/png" sizes="96x96" href="../../assets/favicons/favicon-96x96.png">
<link rel="icon" type="image/svg+xml" href="../../assets/favicons/favicon.svg">
<link rel="shortcut icon" href="../../assets/favicons/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="../../assets/favicons/apple-touch-icon.png">
<link rel="manifest" href="../../assets/favicons/site.webmanifest">
  • Handle: @uol-favicons-example
  • Preview:
  • Filesystem Path: src/library/01-foundations/03-utilities/favicons/favicons.njk
/* No context defined. */