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: formats and uses
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 explicitly provides the image used when a visitor adds your site to an iPhone home screen. It remains separate from the browser-tab favicon and icons declared in the web app manifest.
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 guideAdd a favicon in HTML
A reliable HTML favicon does not depend on one magic tag. It uses a small set of reachable files and links placed in the head. This procedure covers modern tabs, older clients and mobile shortcuts without multiplying historical variants.
Read the guideFavicon not showing or not updating
When a favicon is missing, the file is not always the problem. The browser, a CDN, a service worker and a search engine can each retain a different version. An ordered diagnosis avoids changing several variables at once.
Read the guideFavicons in Next.js App Router
The App Router can produce icon elements from conventional files or from the metadata object. Both approaches are valid, but mixing them without a clear rule can easily create competing declarations.
Read the guideSVG favicon guide
SVG keeps edges sharp at every pixel density and can adapt colors to the theme. That flexibility comes with one constraint: the file must remain self-contained, simple and readable in a tiny space.
Read the guide