This “Two Dozen Favicons” Rubbish Is Getting Out Of Control

Jason Knight
CodeX
Published in
12 min readApr 9, 2022

--

I’m working on a site for a client right now I can’t go into too many details about — NDA and all — but one of the most ridiculous things in their existing site is this:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" sizes="196x196" href=“/images/favicon-196.png" type="image/png">
<link rel="icon" href="/images/favicon-32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/images/favicon-57.png" sizes="57x57" type="image/png">
<link rel="icon" href="/images/favicon-76.png" sizes="76x76" type="image/png">
<link rel="icon" href="/images/favicon-96.png" sizes="96x96" type="image/png">
<link rel="icon" href="/images/favicon-128.png" sizes="128x128" type="image/png">
<link rel="icon" href="/images/favicon-144.png" sizes="144x144" type="image/png">
<link rel="icon" href="/images/favicon-192.png" sizes="192x192" type="image/png">
<link rel="icon" href="/images/favicon-228.png" sizes="228x228" type="image/png">
<link rel="shortcut icon" sizes="196x196" href=“/images/favicon-196.png" type="image/png">
<link rel="apple-touch-icon" href="/images/favicon-120.png" sizes="120x120" type="image/png">
<link rel="apple-touch-icon" href="path/to/favicon-152.png" sizes="152x152" type="image/png">
<link rel="apple-touch-icon" href="path/to/favicon-180.png" sizes="180x180" type="image/png">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="mask-icon" color="#90FF00" href="/safari-pinned-tab.svg" type="image/svg+xml">

--

--

Jason Knight
CodeX

Accessibility and Efficiency Consultant, Web Developer, Musician, and just general pain in the arse