Minimalist Favicons

For a minimalist favicon declaration, create the images listed in the table below.

File Details
favicon.png PNG format, 256x256 pixels, transparency allowed 1
favicon.svg SVG format, transparency allowed 2
apple-touch-icon.png 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.

Browser favicon.svg favicon.png apple-touch-icon.png
Brave    
Chrome    
Firefox    
Microsoft Edge    
Microsoft IE 11    
Opera    
Safari/iOS     3
Safari/macOS   4

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 favicon.png and 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.