Small businessWeb

Creating a complete favicon set for a new Shopify store: sizes, formats, and uploading

2026-09-21 · 4 min read

When launching a new Shopify store, visual branding extends beyond your homepage banner and product photography. One important branding detail is the store favicon, the small icon that appears in browser tabs, bookmark bars, mobile home screen shortcuts, and search engine results.

Many new store owners upload a standard square logo directly into their theme settings, only to find that the icon looks blurry on desktop monitors or fails to appear properly on mobile devices. Creating a complete, properly formatted favicon package ensures your store branding looks professional across all platforms.

Why modern websites need multiple icon sizes

A single image file cannot satisfy the rendering requirements of modern web browsers and mobile operating systems. Different platforms request specific dimensions depending on screen pixel density and interface context:

1. Standard desktop tabs: Require 16x16 pixel icons to fit compact browser tab layouts.

1. High-density displays: Require 32x32 pixel icons to maintain crisp edges on high-resolution laptop and desktop screens.

1. Desktop shortcuts and taskbars: Windows taskbars and macOS desktop shortcuts frequently display 48x48 pixel icons.

1. Apple touch icons: iOS Safari uses a 180x180 pixel PNG image when a customer saves your online store as a shortcut on their home screen.

1. Android web manifests: Android Chrome and Progressive Web App installations require 192x192 and 512x512 pixel icons defined in a site.webmanifest configuration file.

Why the classic .ico format is still necessary

While modern browsers support PNG and SVG favicons, the traditional .ico format remains essential. The .ico file is a multi-resolution container that packages 16x16, 32x32, and 48x48 pixel PNG frames inside a single file.

Older browser versions, RSS readers, bookmarking tools, and web crawlers automatically check the root /favicon.ico path by default. If this file is missing or improperly structured, browsers may display a generic globe or blank document icon instead of your store logo.

Generating a complete icon set from a single image

Instead of manually resizing multiple graphics files in image editing software, you can convert a single high-resolution square logo into a complete favicon archive in one step.

You can drop your brand logo into Favicon Generator to create the multi-resolution favicon.ico, PNG sizes, Apple touch icon, and manifest files in one ZIP archive.

The tool lets you customize the output to match your brand style:

1. Background style: Choose a transparent background or select a specific brand background color to make light-colored logos stand out on dark browser tabs.

1. Padding options: Select 0%, 8%, or 15% padding around your logo graphic to prevent symbols from touching the edges of the icon boundary.

1. Corner shapes: Choose between square, rounded, or circular shapes to match your store branding.

Customizing the icon to match your brand

If your logo touches the canvas edges, apply an 8% or 15% padding preset in Favicon Generator so the mark stays balanced when placed inside circular or square tabs.

Because the tool processes everything offline directly in your browser without requiring a sign-up, you can generate your assets quickly and privately.

Step-by-step: Uploading your favicon to Shopify

Once you have downloaded your generated ZIP archive, follow these steps to add your favicon to your Shopify store. First, handle the basic theme upload for the desktop tab icon:

1. Open your Shopify Admin dashboard and navigate to Online Store > Themes.

1. Find your active theme and click the Customize button.

1. In the left-hand theme editor sidebar, click the Theme settings icon (the gear icon).

1. Select the Logo or Favicon section.

1. In the Favicon image box, click Select image and upload the 32x32 or 48x48 PNG file (or the .ico file) from your generated set.

1. Click Save in the upper-right corner of the editor.

Advanced setup for mobile icons

To support crisp mobile home screen shortcuts and Android manifest support, add the remaining files to your theme assets:

1. In Shopify Admin, go to Online Store > Themes > Actions > Edit code.

1. Under the Assets directory, click Add a new asset and upload apple-touch-icon.png, icon-192.png, icon-512.png, and site.webmanifest.

1. In the Layout directory, open theme.liquid.

1. Locate the head section and paste the HTML link snippet provided in your downloaded ZIP file.

1. Save the template file and preview your store on mobile devices to confirm the icons load correctly.

Verifying your store favicon

After uploading your files, open your live Shopify store in a new browser window. If the old placeholder icon still appears, perform a hard refresh by pressing Ctrl+F5 on Windows or Cmd+Shift+R on macOS to clear cached icon data. You can also bookmark the page to confirm that the icon displays properly in your bookmarks bar.

Keep your store branding consistent across every screen

A sharp favicon helps customers recognize your brand tab instantly during their shopping sessions. Create your complete icon archive with Favicon Generator and update your Shopify theme today.