Favicon and meta tags as elements of digital identity
Favicon is not about aesthetics, but about recognition within 0,3 seconds
Logo and favicon solve different tasks, and confusing them is a common mistake among designers. A logo should work for recognizability in a large format: on a banner, in the site header, on a business card. A favicon works in an extremely small size, where the brain doesn't read details — it reads silhouette and color in fractions of a second. Therefore, a favicon should contain not a miniature of the logo, but its most simplified version: without text, without shadow, without gradient, in 1-2 colors with high contrast.
UX recommendations say that when there are multiple open tabs, users rely on browser icons as a navigation element to find the right page. This means that a favicon is not interface decoration, but a navigation element that either helps the user return to you or sends them to a competitor with a more noticeable icon.
Why a favicon "does not update" after a redesign
A classic complaint after rebranding: "we changed the favicon, but the old logo is still in the browser." The reason is not a layout error, but aggressive caching. Browsers and search engines store favicons longer than most other website resources, and simply overwriting the favicon.ico file at the same address does not work.
The solution is versioning. Either change the filename (favicon-2026.png instead of favicon.png), or add a version parameter to the link (favicon.png?v=2). Without this step, changes will reach users and search engines in 1-2 weeks, sometimes even later. An additional nuance: Google uses a separate crawler for favicons — Googlebot-Image — which does not read changes from HTML tags "on the fly". Updates may appear in search results within a few days or longer, depending on the reindexing schedule.
How much CTR does a site lose due to a poor favicon
The influence of favicon on clickability in the results is not an abstract theory about branding, but a measurable indicator. Baymard Institute in its 2026 study recorded that sites with quality favicons receive 8,7% higher CTR in search results compared to sites without them or with a default icon.
A more detailed breakdown is in the Favicon Impact Study of the same year:
- The absence of a favicon (default Google globe in the results) reduces CTR by 11,4%, and on mobile devices — by 14,8%.
- A dark favicon on a transparent background in dark browser theme loses up to 8,7% CTR — it visually "dissolves" in the interface.
- A high-contrast favicon on a solid background, on the contrary, increases CTR by 6,2%.
The difference between the best and worst scenario is more than 20 percentage points in CTR. For a site with traffic in tens of thousands of visits, this is a noticeable difference in real leads, not a cosmetic issue.
Dark browser theme — a hidden trap for branding
Many brands build their favicons around dark logos on a transparent background—and this is a mistake that only becomes apparent to a portion of the audience. In a light browser theme, such an icon is readable enough, but in a dark theme it literally disappears against the dark tab background: there is no contrast, the silhouette is lost, and along with it, brand recognition is lost.
Raster formats (PNG, ICO) are unable to adapt to the browser theme—they are static images. The solution is only available through an SVG favicon: it supports CSS media queries, including @media (prefers-color-scheme: dark), and can automatically switch between light and dark versions, depending on user settings. This is the only way to guarantee that the favicon will be readable in both themes, and essentially the only technical argument in favor of SVG over ICO for projects where brand identity is important.
How to assemble favicon and meta tags into a single system, not separate checklists
The main problem with most instructions is that they describe favicon, Open Graph, and Twitter Card as separate technical tasks. In practice, this is one layer of digital identity: the user sees the brand in the browser tab, then in the card when sharing in a messenger, then in the search results — and in all three places, the same visual code should be counted, not a random set of images.
| Context | What is responsible for display | Requirement |
|---|---|---|
| Browser tab, bookmarks | favicon.ico / PNG / SVG | 16×16, 32×32, 48×48px; Google — from 48×48, Yandex — 16-120px |
| iOS home screen | apple-touch-icon | 180×180px |
| Android home screen | icon in manifest.json | 192×192px |
| Sharing card (Facebook, LinkedIn, messengers) | og:title, og:type, og:image, og:url | og:image — 1200×630px, HTTPS, absolute URL |
| Card in X (Twitter) | twitter:card + fallback to og:-tags | twitter:card=summary_large_image is required — without it, the card will not be rendered at all |
An important nuance about Twitter Card: if there are no twitter:* tags at all, the X platform will pick up og:-tags as a fallback. However, the twitter:card tag has no analog in Open Graph — without it, the card will not be rendered, even if og:image and og:title are filled in perfectly. This is the only element that cannot be skipped, hoping for automatic substitution.
Minimum set for a landing page: what is actually needed and what is redundancy
Most articles in the top rank overload the topic: they recommend preparing 8-10 favicon sizes for all conceivable devices. For a small site or a landing page, this is unnecessary. The following set is sufficient:
- favicon.ico, including sizes 16×16, 32×32 and 48×48 — for universal browser support and Google's requirements.
- PNG 32×32 as a modern alternative for browsers that prefer this format.
- apple-touch-icon 180×180 — if there is a chance that users will add the site to the home screen of an iPhone.
- icon 192×192 for Android/PWA — similarly, only when there is actual need.
- og:image 1200×630, og:title, og:type, og:url — for proper display when sharing a link.
- twitter:card=summary_large_image — separately, without it the card will not appear in X.
SVG favicon with a media query for dark theme — not a mandatory minimum, but a reasonable addition if brand code is important and the audience actively uses dark theme. Everything else — 8 additional sizes for rare devices — is excessive work that can be safely skipped at the start.
Favicon is not about aesthetics, but about recognition within 0,3 seconds
Logo and favicon solve different tasks, and confusing them is a common mistake among designers. A logo should work for recognizability in a large format: on a banner, in the site header, on a business card. A favicon works in an extremely small size, where the brain doesn't read details — it reads silhouette and color in fractions of a second. Therefore, a favicon should contain not a miniature of the logo, but its most simplified version: without text, without shadow, without gradient, in 1-2 colors with high contrast.
UX recommendations say that when there are multiple open tabs, users rely on browser icons as a navigation element to find the right page. This means that a favicon is not interface decoration, but a navigation element that either helps the user return to you or sends them to a competitor with a more noticeable icon.
Why a favicon "does not update" after a redesign
A classic complaint after rebranding: "we changed the favicon, but the old logo is still in the browser." The reason is not a layout error, but aggressive caching. Browsers and search engines store favicons longer than most other website resources, and simply overwriting the favicon.ico file at the same address does not work.
The solution is versioning. Either change the filename (favicon-2026.png instead of favicon.png), or add a version parameter to the link (favicon.png?v=2). Without this step, changes will reach users and search engines in 1-2 weeks, sometimes even later. An additional nuance: Google uses a separate crawler for favicons — Googlebot-Image — which does not read changes from HTML tags "on the fly". Updates may appear in search results within a few days or longer, depending on the reindexing schedule.
How much CTR does a site lose due to a poor favicon
The influence of favicon on clickability in the results is not an abstract theory about branding, but a measurable indicator. Baymard Institute in its 2026 study recorded that sites with quality favicons receive 8,7% higher CTR in search results compared to sites without them or with a default icon.
A more detailed breakdown is in the Favicon Impact Study of the same year:
- The absence of a favicon (default Google globe in the results) reduces CTR by 11,4%, and on mobile devices — by 14,8%.
- A dark favicon on a transparent background in dark browser theme loses up to 8,7% CTR — it visually "dissolves" in the interface.
- A high-contrast favicon on a solid background, on the contrary, increases CTR by 6,2%.
The difference between the best and worst scenario is more than 20 percentage points in CTR. For a site with traffic in tens of thousands of visits, this is a noticeable difference in real leads, not a cosmetic issue.
Dark browser theme — a hidden trap for branding
Many brands build their favicons around dark logos on a transparent background—and this is a mistake that only becomes apparent to a portion of the audience. In a light browser theme, such an icon is readable enough, but in a dark theme it literally disappears against the dark tab background: there is no contrast, the silhouette is lost, and along with it, brand recognition is lost.
Raster formats (PNG, ICO) are unable to adapt to the browser theme—they are static images. The solution is only available through an SVG favicon: it supports CSS media queries, including @media (prefers-color-scheme: dark), and can automatically switch between light and dark versions, depending on user settings. This is the only way to guarantee that the favicon will be readable in both themes, and essentially the only technical argument in favor of SVG over ICO for projects where brand identity is important.
How to assemble favicon and meta tags into a single system, not separate checklists
The main problem with most instructions is that they describe favicon, Open Graph, and Twitter Card as separate technical tasks. In practice, this is one layer of digital identity: the user sees the brand in the browser tab, then in the card when sharing in a messenger, then in the search results — and in all three places, the same visual code should be counted, not a random set of images.
| Context | What is responsible for display | Requirement |
|---|---|---|
| Browser tab, bookmarks | favicon.ico / PNG / SVG | 16×16, 32×32, 48×48px; Google — from 48×48, Yandex — 16-120px |
| iOS home screen | apple-touch-icon | 180×180px |
| Android home screen | icon in manifest.json | 192×192px |
| Sharing card (Facebook, LinkedIn, messengers) | og:title, og:type, og:image, og:url | og:image — 1200×630px, HTTPS, absolute URL |
| Card in X (Twitter) | twitter:card + fallback to og:-tags | twitter:card=summary_large_image is required — without it, the card will not be rendered at all |
An important nuance about Twitter Card: if there are no twitter:* tags at all, the X platform will pick up og:-tags as a fallback. However, the twitter:card tag has no analog in Open Graph — without it, the card will not be rendered, even if og:image and og:title are filled in perfectly. This is the only element that cannot be skipped, hoping for automatic substitution.
Minimum set for a landing page: what is actually needed and what is redundancy
Most articles in the top rank overload the topic: they recommend preparing 8-10 favicon sizes for all conceivable devices. For a small site or a landing page, this is unnecessary. The following set is sufficient:
- favicon.ico, including sizes 16×16, 32×32 and 48×48 — for universal browser support and Google's requirements.
- PNG 32×32 as a modern alternative for browsers that prefer this format.
- apple-touch-icon 180×180 — if there is a chance that users will add the site to the home screen of an iPhone.
- icon 192×192 for Android/PWA — similarly, only when there is actual need.
- og:image 1200×630, og:title, og:type, og:url — for proper display when sharing a link.
- twitter:card=summary_large_image — separately, without it the card will not appear in X.
SVG favicon with a media query for dark theme — not a mandatory minimum, but a reasonable addition if brand code is important and the audience actively uses dark theme. Everything else — 8 additional sizes for rare devices — is excessive work that can be safely skipped at the start.
Recent articles
MegaFon, BMW, VTB and more 240+ companies. See how it looks in the showcase reel:
Our branding agency is approached to order:
Branding agency services
