Hosting Forums Market
Osclass

How to Change Favicons (step-by-step guide)

How to Change Favicons in an Osclass Theme

Understanding Favicons in Osclass

A favicon is a small icon associated with a website, typically displayed in browser tabs, bookmarks, and shortcut icons. In Osclass, favicons are usually located in two primary locations:

  • Root Installation Folder: favicon.ico in the root directory.
  • Theme-Specific Folder: Located in oc-content/themes/{theme_name}/images/favicons/, where themes may support different types and sizes of favicons.

Default Favicon in Osclass

Osclass installations typically include a default favicon.ico in the root directory. If a browser cannot find a theme-specific favicon, it will attempt to use this default file.

Locating the Favicon Files in Your Theme

Most Osclass themes provide a set of favicons inside the theme directory. These are referenced in the theme's header file, usually located in:

  • oc-content/themes/{theme_name}/header.php
  • oc-content/themes/{theme_name}/head-favicon.php (some themes use an include file for head elements)

Here is a sample favicon setup from an Osclass theme:

<link rel="shortcut icon" type="image/x-icon" href="https://example.com/oc-content/themes/{theme_name}/images/favicons/favicon.ico" />
<link rel="icon" href="https://example.com/oc-content/themes/{theme_name}/images/favicons/favicon-16x16.png" sizes="16x16" type="image/png" />
<link rel="icon" href="https://example.com/oc-content/themes/{theme_name}/images/favicons/favicon-32x32.png" sizes="32x32" type="image/png" />
<link rel="apple-touch-icon" sizes="180x180" href="https://example.com/oc-content/themes/{theme_name}/images/favicons/apple-touch-icon.png" />

Steps to Change Favicons in Osclass

1. Prepare Your New Favicon Files

Create or obtain favicons in various sizes. Recommended sizes include:

  • favicon.ico (16x16 or 32x32, ICO format)
  • favicon-16x16.png (16x16 PNG format)
  • favicon-32x32.png (32x32 PNG format)
  • apple-touch-icon.png (180x180 PNG format for iOS devices)
  • Some themes may support even more favicons

You can generate these using online tools such as Real Favicon Generator.

2. Replace Theme-Specific Favicons

Upload your new favicon files to the theme's favicon folder:

oc-content/themes/{theme_name}/images/favicons/

Ensure the filenames match those referenced in your theme’s header file.

3. Replace the Root Favicon

For a global change, replace the default favicon.ico in the root folder:

/public_html/favicon.ico

Note that some browsers cache favicons, so changes may not appear immediately.

4. Update the Theme's Header File

If necessary, edit the theme’s header file (header.php or inc/head.php) to reference your new favicon paths.

<link rel="icon" href="{your-new-favicon-path}" type="image/png" sizes="32x32" />

5. Update the PWA Plugin Favicons

If you are using PWA Plugin to get your PWA application working, this plugin use custom set of favicons. Go to Plugins > PWA Plugin > Configure and upload/setup your new favicons here. Then make sure to re-build Manifest.json and Service workers as well.

6. Clear Browser Cache

To see your changes immediately:

  • Clear your browser cache (Ctrl + Shift + R in most browsers).
  • Try opening your site in incognito mode.
  • Use a different browser or device.

Note: It may take some time (days/weeks) to get new favicon into your browser and even more to see new favicon in Google results!

7. Verify Favicon Changes

Use online tools like:

  • Favicon Checker
  • Inspect element in the browser (Right-click > Inspect > Elements > Search for 'favicon')

Troubleshooting Favicon Issues

If the new favicon does not appear:

  • Ensure the file is in the correct location.
  • Check the header file for correct favicon paths.
  • Try renaming the favicon file and updating the reference.
  • Ensure no caching plugins or CDN settings are preventing updates.

Conclusion

Changing favicons in Osclass involves updating theme-specific favicon files and optionally replacing the root favicon.ico. Ensuring proper placement and clearing cache will help the new favicon appear correctly.