Adding a favicon to a static HTML page
Actually, to make your favicon work in all browsers, you must have more than 10 images in the correct sizes and formats.
I created an App (faviconit.com) so people don´t have to create all these images and the correct tags by hand.
Hope you like it.
You can make a .png image and then use one of the following snippets between the <head> tags of your static HTML documents:
<link rel="icon" type="image/png" href="/favicon.png"/>
<link rel="icon" type="image/png" href="https://example.com/favicon.png"/>
Most browsers will pick up favicon.ico from the root directory of the site without needing to be told; but they don't always update it with a new one right away.
However, I usually go for the second of your examples:
<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />