How to setup a favicon
The short answer
The easiest way to set up a favicon (assuming that an image is already made) is by using the following code, and placing it in the
<link rel="icon" type="image/png" href="http://example.com/favicon.png" />
The long answer
The simplest and quickest way is listed above, but what if you want to have different sizes of favicons for different devices and browsers?
To add different sizes to a favicon link you can add a
sizes attribute to the link tag. The typical sizes for favicons in most browsers are
32x32 and higher. For some other browsers like Google Tv and Chrome on Android, the recommended sizes are
192x192 respectively. An example of these sizes would look like this.
<link rel="icon" type="image/png" sizes="16x16" href="http://example.com/favicon-16.png" /> <link rel="icon" type="image/png" sizes="32x32" href="http://example.com/favicon-32.png" /> <link rel="icon" type="image/png" sizes="96x96" href="http://example.com/favicon-96.png" /> <link rel="icon" type="image/png" sizes="192x192" href="http://example.com/favicon-192.png" />
ICO file type
The primary way to set an icon would be to use a .ico file. While all modern browsers can read the png format, this is primarily used for older versions of IE. You can find plenty of favicon.ico generators online to build a properly formatted ICO file. Using a favicon.ico file would look like this.
<link rel="icon" href="favicon.ico" />
Browsers will also be able to find the ICO file if it is just left on the root of the site and not declared in a link tag.
A few browsers including Chrome and Firefox recently added support for SVG favicons. If you want to see what browsers support this at the time of reading then check out caniuse.com/#feat=link-icon-svg. To use this new feature you will need an SVG version of the favicon of your website and add this link to the head of your site. Make sure to include the
sizes="any" or the browser will download the file even if it can't display this as the favicon.
<link rel="icon" sizes="any" href="/favicon.svg" type="image/svg+xml" />
CSS color scheme media changing favicons
If you are using the
prefers-color-scheme media query on your website and would like to change the favicon for each theme then all you need is a dark and/or light version of your favicon and a media attribute.
<link rel="icon" media="prefers-color-scheme: dark" href="favicon-light.ico" /> <link rel="icon" media="prefers-color-scheme: light" href="favicon-light.ico" />