Glossary
/
favicon
E-commerce favicon: browser tab icon definition, formats and sizes, vs logo branding, Shopify theme configuration, and key points.
Updated on
June 4, 2026
The favicon (favorite icon) is the small icon displayed in the browser tab, bookmarks, history, and sometimes on the mobile home screen. In e-commerce, it often uses the brand's symbol or letter to make the online store recognizable when multiple sites are open. A subtle element of branding, it reinforces trust and memorability.
Summary
Simple definition: favicon
The favicon is declared in the HTML <head> of each page via a <link rel="icon" …> tag. The browser loads it automatically.
Common formats and sizes:
PNG: 32×32 px or 16×16 px (web standard).; ICO: multi-size file (legacy, still supported).; SVG: vector, sharp at any scale (modern browsers).
Apple Touch Icon: 180×180 px for iOS home screen.; Android / PWA: 192×192 px, 512×512 px (web app manifest).
Useful distinctions:
Favicon vs logo: the full logo (name + icon) is displayed in the header; the favicon is a simplified version legible at 16 pixels.; Favicon vs branding: the favicon is a visual component; branding encompasses identity, tone, and experience.; Favicon vs Open Graph image (meta tag): the OG image is used for social sharing (1200×630 px); the favicon is for the browser tab.
Favicon vs checkout logo: Shopify also displays the logo on the checkout page; this can be the full logo, not necessarily the favicon.; Site favicon vs app icon: same visual logic, though files are sometimes distinct (Shop app, PWA).
The importance of a favicon for an online store
The favicon does not directly impact Google rankings like a title tag, but it contributes to credibility and the perceived UX.
Recognition: find your shop among 15 open tabs.; Trust: a generic or missing favicon is a signal of a "sloppy site."; Favorites: visible icon when the customer bookmarks the shop.; Mobile: home screen shortcut with the brand icon.
Consistency: aligned with the header logo, emails, and social networks.; Professionalism: an expected detail on a serious DTC shop.; Direct return: customer comes back via bookmark or history, with a memorable icon.
A blurry, pixelated favicon, or the default Shopify theme one, weakens the first impression, especially if traffic is comparing multiple brands side-by-side.
Using with Shopify
On Shopify, the favicon is configured in the theme settings (Shopify Help Center, Theme settings).
Theme settings > Logo or Favicon section depending on the theme (Dawn, etc.).; Upload: square PNG recommended (32×32 minimum, 512×512 ideal for sharpness).; Propagation: all Online Store pages inherit the favicon.
Checkout: checkout branding (logo) is separate from the storefront favicon.; Preview: clear browser cache if the old favicon persists.; Custom theme: link tag in theme.liquid if multi-format is needed.
Merchant checklist:
Export favicon from style guide (do not resize horizontal logo).; Upload in Theme settings.; Check Chrome, Safari, Firefox (desktop + mobile).
Check bookmarks and iOS home screen.; Update after rebranding.
The default Shopify favicon on an uncustomized theme is a common sign of a newly launched store: replace it as soon as the brand identity is defined.
In brief
Favicon = small brand icon in the browser tab and bookmarks.; Distinct logo header, Open Graph image, global branding.; Key aspects: recognition, trust, UX, visual consistency.
Formats: PNG 32×32, SVG, Apple Touch Icon 180×180.; Shopify: Theme settings, simple square upload, multi-browser testing.
Associated terms, FAQ, and going further
Associated terms
Branding: identity of which the favicon is an element.
Online store: site where the favicon is displayed.
Meta tag: head metadata including favicon and OG.
UX: experience including browser visual cues.
E-commerce CMS: platform managing the theme and favicon.
FAQ
Favicon and logo: same file?
Not necessarily. The header logo is often horizontal or detailed. The favicon is a simplified iconic version (symbol or initial) optimized for 16 to 32 pixels.
What size for a Shopify favicon?
Upload a square PNG of at least 32×32 px; 512×512 px is recommended for a crisp render on high-density screens. Shopify resizes automatically.
Does the favicon impact SEO?
Low direct SEO impact. However, it improves recognition, trust, and UX, which can indirectly foster return visits and engagement on the store.
How to change the favicon on Shopify?
Admin > Online Store > Themes > Customize > Theme settings > Logo or Favicon section > upload your image.
Go further
Sources: Shopify Help Center (Theme editor), web visual identity reference points.
In brief
Favicon = small brand icon in the browser tab and bookmarks.
Distinct logo header, Open Graph image, global branding.
Key factors: recognition, trust, UX, visual consistency.
Formats: PNG 32×32, SVG, Apple Touch Icon 180×180.
Shopify: Theme settings, simple square upload, multi-browser test.
Associated terms, FAQ, and going further
Associated terms
Branding: identity of which the favicon is an element.
Online store: site where the favicon is displayed.
Meta tag: head metadata including favicon and OG.
UX: experience including browser visual cues.
E-commerce CMS: platform managing the theme and favicon.
FAQ
Favicon and logo: same file?
Not necessarily. The header logo is often horizontal or detailed. The favicon is a simplified iconic version (symbol or initial) optimized for 16 to 32 pixels.
What size for a Shopify favicon?
Upload a square PNG of at least 32×32 px; 512×512 px is recommended for a crisp render on high-density screens. Shopify resizes automatically.
Does the favicon impact SEO?
Low direct SEO impact. However, it improves recognition, trust, and UX, which can indirectly promote return visits and engagement on the store.
How to change the favicon on Shopify?
Admin > Online Store > Themes > Customize > Theme settings > Logo or Favicon section > upload your image.
Go further
Sources: Shopify Help Center (Theme editor), web visual identity best practices.
Enzo
June 4, 2026
