For a minimalist favicon declaration, create the images listed in the table below.
||PNG format, 256x256 pixels, transparency allowed 1|
||SVG format, transparency allowed 2|
||PNG format, 256x256 pixels, no transparency 1|
Add the following code to the
<head> section of your project. You will also need to update the paths to your assets.
<link rel="icon" type="image/png" href="/path/to/favicon.png"> <link rel="icon" type="image/svg+xml" href="/path/to/favicon.svg"> <link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
The following table identifies which image is first loaded by each browser (as of the date of this article). I have experienced some weird behaviour by some browsers where secondary images (especially the
apple-touch-icon.png) are used elsewhere in some browsers.
|Microsoft IE 11||✓|
This does not cover all use cases but it’s a solid start for basic favicons. For more information about the favicon, read the Wikipedia page.
1 If your
favicon.png does not contain any transparency, you can combine
apple-touch-icon.png into a single image if they are the same. Remember to update the code as well.
2 You can omit
favicon.svg if you want but I include it because Firefox renders it first and hopefully other browsers will begin using it. I also created it without transparency for use in Top Sites.
3 Used for the Home Screen.
4 Used for Favorites.