How to Set Up Your Favicon and Webclip Icon

TL;DR / Overview

Favicons and touch icons personalize your site’s appearance in browser tabs, bookmarks, and mobile home screens. With Nilead, uploading and activating these icons takes just a few clicks. This tutorial will walk you through preparing your image assets and updating your site settings.

Prerequisites

• A 32×32 PNG or ICO file for your favicon

• A 192×192 PNG image for your Webclip or Touch icon

• Access to your Nilead admin dashboard

• Appropriate permissions to modify global website settings

Walkthrough

Step 1: Prepare Your Icon Files

Before uploading, make sure your images meet the following requirements:

💡 Pro Tip: Use a transparent background and simple design for best visibility at small sizes.

Step 2: Open the General Configuration Panel

1. Log into your Nilead Admin Dashboard

2. Click the Quick Menu (top-right corner or via sidebar shortcut)

3. In the search bar, type: General Configuration

4. Click on Website Logo & Favicon

Step 3: Upload Your Icons

1. In the "Website Logo & Favicon" section:

   • Upload the 32×32 favicon file to the "Favicon" field

   • Upload the 192×192 touch icon to the "Webclip Icon" or "Mobile Icon" field (label may vary)

2. Click Save to apply your changes

Step 4: Verify on the Live Site

1. Open your site in a new tab or incognito window

2. Refresh the browser to bypass any cached version

3. Check:

   • The browser tab shows your new favicon

   • Saving the site to your phone’s home screen uses the correct icon

⚠️ Note: Some changes may take a few minutes to propagate due to browser caching. Use Ctrl + F5 (Windows) or ⌘ + Shift + R (Mac) to hard refresh.

FAQs

1. What happens if I don’t upload a Webclip icon?
A1: On some mobile devices (like iOS), your site may display a blank or generic icon when saved to the home screen.

2. Can I upload SVG icons instead of PNG?
Yes. For favicons and touch icons, PNG and ICO formats are widely supported and recommended. However, SVG favicons are well supported by modern browsers.

3. Why isn’t my new favicon showing up?
Your browser may be caching the old icon. Try a hard refresh (Ctrl + F5) or clear the site cache.

4. Can I set different favicons for light and dark mode?
This is not currently supported natively, but you can request a custom enhancement via Nilead support.

5. Do I need to include different sizes for favicon.ico?
Not necessarily. A single 32x32 favicon works well across most modern browsers.