Chapter 25 / 29 · Brand assets

Favicons. The roots.

Multi-format favicon set — .ico for legacy browsers, 9 PNG sizes, an Apple-touch icon. The snippet below is the canonical multi-line declaration to paste into any HTML <head>.

25.1 Head snippet

Paste into your HTML root's <head>. Adjust the relative paths if your assets aren't at /04-favicon-app-icon/. Click copy snippet to grab the full declaration in one click.

<link rel="icon" type="image/x-icon" href="04-favicon-app-icon/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="04-favicon-app-icon/favicon-16.png">
<link rel="icon" type="image/png" sizes="32x32" href="04-favicon-app-icon/favicon-32.png">
<link rel="icon" type="image/png" sizes="48x48" href="04-favicon-app-icon/favicon-48.png">
<link rel="apple-touch-icon" sizes="180x180" href="04-favicon-app-icon/apple-touch-icon-180.png">
<link rel="icon" type="image/png" sizes="192x192" href="04-favicon-app-icon/android-chrome-192.png">
<link rel="icon" type="image/png" sizes="512x512" href="04-favicon-app-icon/android-chrome-512.png">