isotropic-2022
Share
Blog
Search
Menu

How To Add A Favicon To Oxygen Builder

By James LePage
 on July 24, 2020
Last modified on January 6th, 2022

How To Add A Favicon To Oxygen Builder

By James LePage
 on July 24, 2020
Last modified on January 6th, 2022

In this quick tutorial we are going to discuss how to add a favicon to a WordPress website created with Oxygen Builder. This seems to be a popular question between clients, and those on the Facebook group, so we figured we would make a very quick tutorial on how to do this. 

Oxygen Builder piggybacks on WordPress, and even though it disables the theme, the process of adding a favicon to Oxygen Builder is the same as any other WordPress site. 

How To Add A Favicon To Oxygen

To do this, simply navigate to appearances, and load the WordPress customiser. You can do this via the admin menu on the back end interface, or the admin bar (just click customize). Once the customiser interface is loaded, navigate to site identity, and then upload these site icon. In real time, you should see that your favicon changes from the default globe to your new site logo. 

This is a quick and easy way to add a Favicon to your Oxygen Builder website. 

You can also simply upload a Favicon.ico file directly into your WordPress root directory. This is actually what all favicon plugins and the core favicon interface in WordPress do. 

Here's an example of a favicon from the Oxygen Builder website

Google Mobile Search 

While this method works well for changing the fabric on that displays in the browser tabs, it won't change the icon that displays next to your search entry when looking at the Google mobile search. 

Google Mobile Search Icon

No favicon or website logo displays on the Google mobile search with the default installation of Oxygen Builder. To resolve this, you can use a plugin or manually add a favicon. Let's take a look at both of these options. 

First, Google recommends manually adding a “mobile search icon” This is relatively simple to do in Oxygen Builder; you can choose to use the code snippets plugin, or a code block within the header of your site. 

Then go ahead and add this link HTML tag in the <head> of your site: 

 <link rel="shortcut icon" href="/path/to/favicon.ico"> Code language: HTML, XML (xml)

You can do that by downloading code snippets and using one of the default templates to add this HTML directly into the header of your WordPress website. 

Change the path to match the favicon path of your site. Typically it is a URL that looks something like this https://isotropic.co/favicon.ico, but you can also use this handy tool to figure it out automatically: 

https://i.olsh.me/ 

Instead of doing this, you can also choose to use a plugin that will automatically do all of these steps for you, and more. This tool not only covers the Google mobile search requirements for fabric cons, but it will generate a favicon for your Oxygen Builder website that applies to all device types and classifications. 

All-in-one favicon generator for Oxygen Builder 

The plugin that we're talking about is called Favicon by RealFaviconGenerator, and it has over 200,000 active installations and 600 5 star reviews. 

All you need to do is install it, upload your base favicon image, and it will automatically generate multiple sizes, and the corresponding link tags and necessary for displaying a favicon or site icon image on all different device types and implementations.  

If you're looking for an easy way to add a fabric on to your Oxygen Builder website, this is your best bet. At the same time, it's another plugin that you're adding to the site, and while it probably doesn't have a massive impact on speed, going the manual route is a perfectly valid way to add a favicon to Oxygen. 

Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Andrew
Andrew
3 years ago

"First, Google recommends manually adding a “mobile search icon” This is relatively simple to do in Oxygen Builder; you can choose to use the code snippets plugin, or a code block within the header of your site."

How do you do that exactly? -Thanks

Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic, a WordPress education company and digital agency. He is also the founder of CodeWP.ai, a venture backed startup bringing AI to WordPress creators.
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram