A favicon is a small icon that appears next to your website’s title in the browser tab, bookmarks, and address bar. It helps users quickly identify your website and adds a professional touch to your branding. Adding a favicon to your website using OzSpeed’s hPanel is a simple process. Here’s a step-by-step guide on how to do it.
Step 1: Design or Choose Your Favicon #
Before adding a favicon, you need to create or select an image that represents your brand.
Favicon Design Tips: #
- Size: The recommended size for a favicon is 48×48 pixels or 32×32 pixels. The image should be square.
- Format: Save your favicon as a PNG, ICO, or SVG file.
- Simplicity: Use a simple, recognizable icon or logo that is easily visible at a small size.
Tip: #
- Use tools like Canva, Favicon.io, or Adobe Express to design your favicon quickly.
Step 2: Access the Website Settings in hPanel #
To upload your favicon, navigate to the Website Settings in hPanel.
- Log in to hPanel at ozspeed.com.au.
- Go to Website Settings > Branding & Appearance.
Tip: #
- Make sure your favicon image is ready and saved on your computer before proceeding.
Step 3: Upload the Favicon Image #
In the Branding & Appearance section, you can upload your favicon image.
How to Upload the Favicon: #
- Click on the Favicon option under Branding & Appearance.
- Click Upload Image.
- Select your favicon file from your computer and click Open.
- Click Save to apply the changes.
Tip: #
- Use a high-contrast image for better visibility in browser tabs.
Step 4: Preview the Favicon #
Before publishing, check how the favicon looks in the browser.
How to Preview: #
- Open your website in an incognito browser window.
- Look at the browser tab to see your favicon next to the page title.
- If it’s not visible, clear your browser cache and refresh the page.
Tip: #
- Test the favicon on both desktop and mobile browsers to ensure it displays correctly.
Step 5: Publish the Changes #
Once you’re satisfied with the favicon, publish your updates to make it live on your website.
How to Publish: #
- Click Publish in the top right corner of hPanel.
- Confirm the changes.
Tip: #
- After publishing, it may take a few hours for the favicon to appear on all browsers due to caching.
Step 6: Verify the Favicon on Different Devices #
Check the appearance of your favicon on multiple devices and browsers to ensure consistency.
How to Verify: #
- Open your website on different browsers (Chrome, Firefox, Safari, Edge).
- Check the favicon in the browser tab, bookmarks, and address bar.
- If the favicon doesn’t appear, try clearing the cache or using a favicon checker tool online.
Tip: #
- Use tools like Favicon Checker or Real Favicon Generator to see how your favicon appears on different platforms.
Troubleshooting Tips #
- Favicon Not Showing Up:
- Clear your website cache in hPanel and your browser cache.
- Ensure the favicon file is in the correct format (PNG, ICO, or SVG) and the recommended size (32×32 or 48×48 pixels).
- Favicon Appears Blurry:
- Use a higher-resolution image (e.g., 64×64 pixels) and save it as a PNG file for better clarity.
- Favicon Not Updating:
- If you’ve replaced an existing favicon, use Ctrl + F5 (Windows) or Cmd + Shift + R (Mac) to force a browser refresh.
- Use the Google Search Console to request indexing of your updated site.
Additional Tips: #
- Consistent Branding: Use a favicon that matches your website’s logo or theme colors for a cohesive brand identity.
- Keep It Simple: Avoid using text or complex images in your favicon, as they may not be visible at small sizes.
- Test Regularly: Check your favicon periodically to ensure it displays correctly across different browsers and devices.
