Small businessWeb

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

SENULA COMPANY · 2026-09-21 · 8 min read

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

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 crisp and professional across all operating systems and platforms.

The technical requirements of modern browsers

A single image file cannot satisfy the complex rendering requirements of modern web browsers and mobile operating systems. Different platforms request specific dimensions depending on screen pixel density and the specific interface context where the icon will be displayed. Providing only one size forces the browser to scale the image up or down, which often results in severe pixelation or blurred edges, especially with text-heavy logos.

Standard desktop browser tabs require 16x16 pixel icons to fit the compact layouts of Chrome, Safari, and Edge. This tiny dimension means your design must be simple and recognizable.

High-density displays, such as Apple Retina screens or 4K monitors, require 32x32 pixel icons to maintain crisp edges. When a high-resolution screen displays a standard 16x16 icon, it stretches the pixels, creating a fuzzy appearance.

Desktop shortcuts and operating system taskbars frequently display 48x48 pixel icons. When a customer drags your store URL to their Windows desktop, the operating system looks for this specific dimension to create a clean shortcut icon.

Mobile devices have entirely different requirements. iOS Safari uses a 180x180 pixel PNG image, called an Apple touch icon, when a customer saves your online store as a shortcut directly on their iPhone or iPad home screen. Android Chrome and Progressive Web App installations require much larger graphics, specifically 192x192 and 512x512 pixel icons. These dimensions are defined in a site.webmanifest configuration file that tells the Android device how to install your site as a web application.

Why the classic .ico format remains necessary

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

Older browser versions, enterprise environments, RSS readers, bookmarking tools, and various web crawlers automatically check the root /favicon.ico path by default when indexing or displaying your site. If this specific file is missing, improperly structured, or simply renamed to a .png file, these systems may display a generic globe symbol or a blank document icon instead of your carefully designed store logo.

Worked Example 1: Standard square logo preparation

Consider a Shopify store selling outdoor gear, using a solid square logo measuring 1024x1024 pixels. The logo features a white mountain outline on a solid dark green background.

Because the logo is already square and the central graphic does not touch the edges of the image frame, it requires very little modification. The store owner needs to convert this single large PNG file into the complete array of required sizes without losing quality or distorting the aspect ratio.

Instead of manually scaling this image seven different times in graphic design software, you can drop your primary logo into Favicon Generator to generate the complete multi-resolution .ico file, all required PNG sizes, the Apple touch icon, and the necessary web manifest file simultaneously.

For this outdoor gear logo, the store owner would select a 0% padding option since the mountain graphic already has sufficient breathing room within the 1024x1024 canvas. Selecting the standard square shape option ensures the dark green background fills the entire tab area on desktop browsers.

Worked Example 2: Circular logos and padding

Now consider a different scenario: a jewelry brand with a circular logo design measuring 800x800 pixels. The logo consists of a delicate gold monogram that touches the very edges of the circular boundary.

If this image is converted directly into a 16x16 pixel favicon without adjustments, the edges of the monogram will be cut off when displayed in square browser tabs or rounded mobile shortcuts. The design needs specific padding to sit correctly within the required icon dimensions.

Always leave empty space around your central graphic when designing for browser tabs. Icons that stretch edge-to-edge often appear cramped and illegible when scaled down to 16 pixels.

To fix this, the jewelry brand owner can apply an 8% or 15% padding preset within Favicon Generator so the central graphic shrinks slightly, leaving a protective border of empty space around the monogram. They can also set the background to transparent, ensuring the gold monogram floats cleanly on the browser tab, regardless of whether the user has light mode or dark mode active.

Required favicon files and sizes

Before uploading files to your Shopify theme, you must ensure you have the exact file names and dimensions required by the web standards.

Adding the base icons to your Shopify theme settings

Once you have generated and extracted your ZIP archive containing the complete icon set, the first step is to handle the basic theme upload for the primary desktop tab icons.

1. Open your Shopify Admin dashboard and navigate to Online Store > Themes.
2. Find your currently active theme and click the Customize button to open the visual editor.
3. In the left-hand theme editor sidebar, click the Theme settings icon (typically represented by a gear symbol).
4. Select the Logo or Favicon section from the settings menu.
5. In the Favicon image box, click Select image and choose the favicon-32.png file or the favicon.ico file from your generated set.
6. Click Save in the upper-right corner of the editor.

This basic upload handles standard desktop browsers, but it does not provide the high-resolution files required for Apple and Android mobile devices.

Advanced setup for Apple and Android mobile icons

To support crisp mobile home screen shortcuts and full Android manifest support, you must add the remaining generated files directly to your theme's code assets.

1. In the Shopify Admin dashboard, navigate to Online Store > Themes.
2. Click the three-dot menu icon next to your active theme and select Edit code.
3. Scroll down the left sidebar to the Assets directory and click Add a new asset.
4. Upload the following files one by one: apple-touch-icon.png, icon-192.png, icon-512.png, and site.webmanifest.
5. Next, scroll up to the Layout directory and open the theme.liquid file.
6. Locate the <head> section near the top of the document.
7. Paste the specific HTML link snippet provided inside your downloaded ZIP file directly before the closing </head> tag.
8. Click Save in the upper-right corner.

This process links the high-resolution images and the manifest configuration file to every page on your Shopify store, ensuring mobile devices always load the correct assets.

Common mistakes and troubleshooting

One frequent mistake is uploading a large rectangular logo file. Browsers expect a 1:1 square aspect ratio for all icon files. If you upload a rectangular image, the browser will force it into a square box, severely distorting the image. Always start with a perfectly square canvas before generating your files.

Another common issue involves browser caching. After uploading your new files, you might open your live Shopify store only to see the old placeholder icon still sitting in the browser tab. Browsers cache .ico files aggressively to save bandwidth. To force the browser to fetch the new image, perform a hard refresh by pressing Ctrl+F5 on Windows or Cmd+Shift+R on macOS.

Pre-launch store icon checklist

FAQ

What is a site.webmanifest file?

A web manifest is a simple text file containing JSON code. It tells Android devices and Chromium-based browsers how your website should behave when installed on a mobile home screen, pointing the operating system to the exact location of your 192x192 and 512x512 pixel icons.

Why does my icon look blurry on my iPhone?

If you only uploaded a 32x32 pixel image through the Shopify visual theme editor, iOS scales that tiny image up to 180x180 pixels for the home screen, causing severe blurring. You must add the specific apple-touch-icon.png file to your theme code to fix this.

Can I remove the background from my logo during conversion?

The conversion process requires your source image to already have the background removed if you want a transparent icon. You must prepare a transparent PNG file in your image editing software before generating the final asset package.

Consistent branding across every digital touchpoint builds trust with potential customers. Ensure your browser tabs and mobile shortcuts look sharp by generating your complete asset archive using Favicon Generator before you launch your store.