Adding a favicon to your site

The small icon in the browser tab: which files you need today and the lines that add them.

1 January 2011 · 1 min read

From the archive: first published on mohamedsharaf.net in January 2011. Rewritten and checked in 2026; some details may be out of date.

The favicon is the small icon in the browser tab and bookmarks. In 2011 that meant one favicon.ico file (and an extra non-animated one, because Internet Explorer didn’t support animated icons). Today, three small files cover almost everything:

<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">

favicon.ico for older browsers and tools that look for it automatically.
icon.svg for modern browsers: one sharp file at every size.
apple-touch-icon.png (180×180) for iPhones and iPads when someone saves your site to the home screen.

Put the lines inside <head> and the files at your site’s root. Search engines use a crawlable favicon file in results too, so a real file beats an icon embedded in the page.