> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Favicon

> Configure your site favicon (browser tab icon)

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.

<Tip>A professional favicon increases brand recall by 15-20% and helps customers quickly identify your store among multiple browser tabs.</Tip>

## 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.

<Note>The favicon appears site-wide and is independent of your logo. While they can match, they serve different purposes and display at different sizes.</Note>

## Getting started

<Steps>
  <Step title="Prepare favicon image">
    Create or prepare an image (recommended: 512x512px, square, PNG format)
  </Step>

  <Step title="Open Theme Customizer">
    From Shopify admin → **Online Store** → **Themes** → **Customize**
  </Step>

  <Step title="Access favicon settings">
    Click **Theme settings** → Select **Favicon**
  </Step>

  <Step title="Upload favicon">
    Click the image picker and upload your favicon image
  </Step>

  <Step title="Preview">
    Check the browser tab to see your new favicon (may require page refresh)
  </Step>
</Steps>

## Location

**Path:** Theme settings → Favicon

## Settings

<Tabs>
  <Tab title="Favicon Image">
    **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

    <Warning>Images smaller than 512x512px may appear blurry when scaled for larger displays or high-DPI screens.</Warning>
  </Tab>

  <Tab title="Design Guidelines">
    **Icon style recommendations:**

    **Simplified design:**

    * Use simple, recognizable symbols or lettermarks
    * Avoid complex details that disappear at small sizes
    * Ensure icon is distinguishable at 16x16px (actual browser tab size)

    **Color approach:**

    * Use solid, high-contrast colors for visibility
    * Avoid gradients (may not render well at small sizes)
    * Consider how icon looks on light and dark browser themes

    **Brand consistency:**

    * Match your logo's style and colors
    * Use same icon across all platforms (website, app, social media)
    * Keep favicon timeless - changing frequently confuses customers

    <Tip>Test your favicon by zooming out in your browser. If you can't recognize it at very small size, simplify the design.</Tip>
  </Tab>

  <Tab title="Technical Details">
    **What the theme generates:**

    From your uploaded image, Sahara automatically creates:

    * `favicon.ico` (16x16, 32x32, 48x48) - Classic browser favicon
    * `apple-touch-icon.png` (180x180) - iOS home screen icon
    * `favicon-32x32.png` - Standard desktop browsers
    * `favicon-16x16.png` - Minimum size for older browsers
    * `android-chrome-192x192.png` - Android home screen
    * `android-chrome-512x512.png` - Android splash screen

    **Browser support:** All modern browsers including Chrome, Firefox, Safari, Edge, and mobile browsers.

    **Caching:** Browsers aggressively cache favicons. Changes may take 24-48 hours to appear for returning visitors. Clear browser cache to see updates immediately.

    <Note>The theme handles all technical implementation automatically. You only need to upload one image.</Note>
  </Tab>
</Tabs>

## Use cases

<CardGroup cols={2}>
  <Card title="Logo Lettermark" icon="a">
    Use your brand's first initial as the favicon. Clean, professional, and instantly recognizable.

    **Example:** "Sahara Store" → "S" lettermark in brand colors
  </Card>

  <Card title="Simplified Logo" icon="star">
    Create a simplified version of your full logo optimized for tiny display size.

    **Example:** Full logo with text → Icon symbol only
  </Card>

  <Card title="Product Icon" icon="shopping-bag">
    Use an icon representing your primary product category or industry.

    **Example:** Coffee shop → Coffee cup icon, Jewelry store → Diamond icon
  </Card>

  <Card title="Abstract Symbol" icon="shapes">
    Create a unique geometric or abstract symbol that represents your brand.

    **Example:** Minimalist geometric pattern in brand colors
  </Card>
</CardGroup>

## Best practices

<CardGroup cols={2}>
  <Card title="Design for tiny display" icon="magnifying-glass-minus">
    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.
  </Card>

  <Card title="Use transparent background" icon="layer-group">
    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.
  </Card>

  <Card title="Maintain brand consistency" icon="palette">
    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.
  </Card>

  <Card title="Test across browsers" icon="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.
  </Card>

  <Card title="Keep it timeless" icon="clock">
    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.
  </Card>

  <Card title="Optimize file size" icon="file">
    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.
  </Card>
</CardGroup>

## Common issues

<Warning>
  **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.
</Warning>

<Tip>
  **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.
</Tip>

## 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

## Related guides

<CardGroup cols={3}>
  <Card title="Social Media" icon="share-nodes" href="/themes/sahara/theme-settings/social-media">
    Configure social media links and Open Graph images
  </Card>

  <Card title="Icons" icon="icons" href="/themes/sahara/theme-settings/icons">
    Customize icon styles used throughout the theme
  </Card>

  <Card title="Layout" icon="table-columns" href="/themes/sahara/theme-settings/layout">
    Set up overall site layout and structure
  </Card>
</CardGroup>