XenForo: How to Change Logo


Well-Known Member
  • #1
I have a question. I recently purchased a license of XenForo and installed it on my hosting account. I then ran the installation and the site is all set up and ready to be customized. I'm now working my way through the admin panel to make any changes I deem necessary. Most of them are easy, but I'm wondering how to change the logo. I obviously don't want to keep the logo that came with the software. Anyone know how to do this?


Well-Known Member
  • #2
All of the header logo settings can be accessed at the following location in the admin panel:

Appearance > Style Properties > Basic Options

Once inside that page, you'll see the path to the header logo. In the Logo URL field, you can change the path to anything you'd like. In a fresh install, the logo is held in the "styles/default/xenforo/" directory. You'll see the XenForo logo file at the end of that path. To change the logo, all you need to do is create a new file and upload it to the same (or whichever you choose) directory. Then, go back to this page and update the Logo URL field with your new filename. So it would look something like this:


To change the size of the logo, I believe all you need to do is make the new logo larger or smaller and it will change automatically on the software. You don't need to update any dimensions anywhere. On the same page, you may also add paths to the 2x logo URL, Metadata Logo URL, Favicon URL (32x32), and the Push notification badge URL.

If you're planning on changing the height of the logo so it's greater than 200 pixels or whatever it's set to, you may need to add some code to the extra-less file, found in the template area (Appearance > Templates > extra.less)

.p-header-logo.p-header-logo--image img {
    max-width: 100% !important;
    max-height: 200px !important;

Just update the above code with whatever you need.

Also, if you're using a CDN like Cloudflare, you'll need to log into your Cloudflare account of whatever account you're using and clear the cache of the current logo file. If you're naming your new logo file the same at the original, it'll be cached within Cloudflare's servers and even if you press the F5 button on your keyboard, it'll never refresh in your browser. Clear the cache and the new one should show. Also, you probably won't get the logo right the first time, so it'll be important to keep clearing the Cloudflare cache as you're uploading new versions of the logo to test. Just a tip from my own experience.