Skip to main content
The favicon is the small icon appearing in browser tabs, bookmarks, and mobile home screens that represents your brand. A professional, recognizable favicon increases brand recall by 15-20% and helps customers quickly identify your store among dozens of open tabs. Upload one image and Sahara automatically generates all required sizes and formats.

​
What this controls

The favicon is the small icon that appears in browser tabs, bookmarks, and browser history. This setting allows you to upload a custom favicon that represents your brand and improves recognition when customers have multiple tabs open.
A professional favicon increases brand recall by 15-20% and helps customers quickly identify your store among multiple browser tabs.

​
How it works

Sahara’s favicon system automatically generates all required favicon sizes and formats from a single uploaded image. The theme creates:
  1. Browser tab icons - Small icon visible in browser tabs
  2. Bookmark icons - Icon shown in browser bookmarks/favorites
  3. Mobile home screen icons - Icon when site is saved to mobile home screen
  4. Touch bar icons - For devices with touch bars
You upload one image, and the theme handles all technical requirements automatically.
The favicon appears site-wide and is independent of your logo. While they can match, they serve different purposes and display at different sizes.

​
Getting started

1

Prepare favicon image

Create or prepare an image (recommended: 512x512px, square, PNG format)
2

Open Theme Customizer

From Shopify admin → Online Store → Themes → Customize
3

Access favicon settings

Click Theme settings → Select Favicon
4

Upload favicon

Click the image picker and upload your favicon image
5

Preview

Check the browser tab to see your new favicon (may require page refresh)

​
Location

Path: Theme settings → Favicon

​
Settings

Favicon: Upload your site’s favicon image.The theme automatically generates all required sizes and formats from your uploaded image. No separate files needed.Image requirements:
  • Format: PNG recommended (supports transparency), JPG/JPEG also supported
  • Size: Minimum 512x512px (larger is better for quality)
  • Aspect ratio: Square (1:1) - non-square images will be cropped
  • File size: Under 100KB recommended for fast loading
  • Background: Transparent or solid color
Images smaller than 512x512px may appear blurry when scaled for larger displays or high-DPI screens.

​
Use cases

Logo Lettermark

Use your brand’s first initial as the favicon. Clean, professional, and instantly recognizable.Example: “Sahara Store” → “S” lettermark in brand colors

Simplified Logo

Create a simplified version of your full logo optimized for tiny display size.Example: Full logo with text → Icon symbol only

Product Icon

Use an icon representing your primary product category or industry.Example: Coffee shop → Coffee cup icon, Jewelry store → Diamond icon

Abstract Symbol

Create a unique geometric or abstract symbol that represents your brand.Example: Minimalist geometric pattern in brand colors

​
Best practices

Design for tiny display

Favicon appears as small as 16x16 pixels. Use bold, simple shapes, avoid text under 2-3 characters, remove fine details and thin lines. What works at 512px may be unrecognizable at 16px.

Use transparent background

PNG with transparent background works across all browser themes. It adapts to light/dark browser modes, looks professional in all contexts, and prevents white box around icon in dark themes.

Maintain brand consistency

Favicon should visually connect to your brand. Use brand colors, match logo style and aesthetic, keep consistent with other icons (social media, app). Consistency builds recognition and professionalism.

Test across browsers

Verify favicon appears correctly in Chrome, Firefox, Safari, Edge (desktop), mobile browsers (iOS Safari, Chrome, Firefox), private/incognito mode, and light/dark browser themes. What works in one browser may render differently in another.

Keep it timeless

Avoid trendy designs that quickly date. Skip seasonal or promotional graphics, avoid year numbers or dates, use classic design approaches. Changing favicon frequently confuses customers and weakens brand recognition.

Optimize file size

Keep uploaded image under 100KB for fast loading. Compress PNG files using tools like TinyPNG, remove unnecessary metadata, balance quality with file size. Large favicon files delay initial page load unnecessarily.

​
Common issues

Favicon not updating? Browsers cache favicons aggressively. Try:
  1. Hard refresh: Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)
  2. Clear browser cache: Settings → Privacy → Clear browsing data
  3. Incognito mode: Open site in incognito/private window
  4. Different browser: Test in browser you haven’t used for the site
  5. Wait 24-48 hours: Some browsers cache for extended periods
Changes are saved immediately but may not be visible due to caching.
Pro tip: Generate multiple favicon variations and test them at small sizes before finalizing. Create 3-5 options, save them at 16x16px, and see which one is most recognizable. The one that works at tiny size is your winner.

​
Design tools

Recommended tools for creating favicons:
  • Figma/Sketch: Professional design with precise control
  • Canva: User-friendly templates for non-designers
  • Favicon.io: Online generator for simple text/icon favicons
  • Adobe Illustrator: Vector-based for scalability
  • RealFaviconGenerator: Test how favicon looks across platforms
Optimization tools:
  • TinyPNG: Compress PNG files without quality loss
  • ImageOptim: Mac app for image optimization
  • SVGOMG: If working with SVG source files

​
Technical notes

  • Favicon upload is global and affects entire site immediately (after browser cache clears)
  • The theme outputs proper <link> tags in <head> for all favicon variants
  • Supports transparent PNGs for overlay on browser UI colors
  • No coding required - fully managed through Shopify admin
  • Replaces Shopify’s default favicon (Shopify bag icon)
  • Changes persist across theme updates

Social Media

Configure social media links and Open Graph images

Icons

Customize icon styles used throughout the theme

Layout

Set up overall site layout and structure