Favicons & Previews

Favicons (favorite icons) may be displayed by a user agent for a website. They may be used for bookmarks, in the tab bar or for other things. Previews are larger images that preview the content of a certain website. They are often used as a link preview on social media sites.

Favicon

Traditionally, icons had to be called "favicon.ico" and be stored in a website's root directory [Wikipedia]. Later, the <link> element was extended to configure a favicon [MDN, spec].

It is possible to provide icons in different formats and/or for different contexts using the link element [MDN].

All current browsers support the PNG image format in favicons [caniuse], but only some support the SVG format [caniuse, austingil.com]. Additionally, other formats may be supported in some browsers [Wikipedia].

Different devices, operating systems, and browsers all have their own preferences or recommendations regarding how favicons should look, what dimensions they should have, what file format they should be in, etc. Hence, there are different icon configuration that you optionally can use. [evilmartians.com, dev.to/masakudamatsu, bitsofco.de]

Search engines may have different rules for favicons, how they are used, and what formats they support (e.g. Google).

Preview

There are multiple ways to annotate a website with a preview. Most of them are specific to a certain social media service. [htmlhead.dev]