Favicon guides
Straight answers to the questions that come up when you build a favicon: which sizes, which formats, which code to paste.
Favicon sizes: the complete guide
Searching for "favicon size" still returns fifteen-file checklists inherited from 2014. In practice six dimensions now cover browser tabs, search results, iOS, Android and PWAs. Here they are, and why.
Read the guideConvert a PNG to ICO, for free
The .ico is still the expected format at a site's root, and most online converters ask you to upload your image to their server. Here is how to get a correct multi-size favicon.ico from a PNG, without uploading anything.
Read the guideapple-touch-icon: size, format and code
The Apple Touch icon is what shows up when a visitor adds your site to their iPhone home screen. iOS ignores the web manifest for this particular case and applies its own rules. They fit in three points.
Read the guideDark mode favicon with an SVG
A black logo on a transparent background looks perfect in a light tab and vanishes in a dark one. The ICO format cannot adapt, but the SVG favicon can: it carries a CSS rule that swaps colors depending on the browser theme.
Read the guide