Search

How to Favicon in 2024

Andrey Sitnik does a good job each year investigating what websites actually need in terms of doing the best we can for site favicons. The 2024 edition is out, and it looks like this:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest">Code language: HTML, XML (xml)
// manifest.webmanifest
{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}Code language: JSON / JSON with Comments (json)

It’s worth knowing what you actually need, as there are quite a few “favicon generator” websites out there that spit out many dozen files and suggest outdated code that just isn’t needed anymore.

Looking for a complete course on getting into web development?

Frontend Masters logo

We have a complete intro course to web development by renowned developer Brian Holt from Microsoft. You'll learn how to be a successful coder knowing everything from practical HTML and CSS to modern JavaScript to Git and basic back-end development.

2 responses to “How to Favicon in 2024”

  1. Avatar Alexius says:

    Thanky you 🙏🏼

  2. Avatar Alan Brown says:

    Thanks Chris! Succinct.

Leave a Reply

Your email address will not be published. Required fields are marked *

Frontend Masters ❤️ Open Source

Did you know? Frontend Masters Donates to open source projects. $313,806 contributed to date.