Recommended HTML head icon tags

HTML, Metadata, Head · Jan 24, 2023

Over the years, I've seen many different and often conflicting guidelines about favicons and which tags are essential. Nowadays, I think you can get away with a very minimal set of meta tags and tailor them to your needs as you go. Here's my recommendation for the bare minimum you should include in your <head> element:

<head>
  <link rel="icon" sizes="192x192" href="favicon.png">
  <link rel="apple-touch-icon" href="favicon.png">
  <link rel="mask-icon" href="favicon.svg" color="#000000">
</head>

By creating a single 192x192 PNG asset, you can cover almost all modern devices and browsers, without too much hassle. If you want to go the extra mile, you can include a few more quite easily. Simply downscale the image and include more rel="icon" meta tags with different sizes attributes.

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub.

More like this

  • Recommended social tags for HTML head

    Ensure your HTML documents can be shared on social media by including these lines in your <head> element.

    HTML, Metadata · Jan 22, 2023

  • Recommended minimum HTML head

    Ensure your HTML documents are properly structured by including these lines in your <head> element.

    HTML, Metadata · Jan 18, 2023

  • Recommended HTML head links

    Make your HTML documents more SEO-friendly by including these lines in your <head> element.

    HTML, Metadata · Jan 26, 2023