How to change the logo in MediaWiki

Changing the logo in MediaWiki is done differently than other programs. Where some programs, like WordPress for example, have the appearance section where the logo can be uploaded to the server, the MediaWiki logo is uploaded directly on the server.

The image type MediaWiki uses for the logo by default is the .PNG file format. This allows the image to have a transparent background. If you want to change the logo to an image that has a background that is not transparent, the background color will need to be set to the correct color.

The Default image size and background color for the Vector logo are shown below. These will be needed to properly set the background color and image size.

  • Background color – #f6f6f6
  • Logo image size – 135px x 135px

Original Logo  shown on the page before changing it

Although this article explains how to change the logo in MediaWiki, how to create and edit the logo is not the scope of this tutorial. To explain the process of changing the logo in MediaWiki, the Vector skin will be used. The image to the right shows the default Vector image looks like on the page.

In this article, we will change the original logo and upload a new logo. For an example, to help with the tutorial process, the original logo will be changed to the new logo shown below.

Original LogoNew Logo
Original Wiki Logo fo Vector skinNew custom logo for mediawiki

Uploading a custom logo for MediaWiki

  1. Login to your cPanel
  2. Go to the Files > File Manager on your server.
  3. Select the directory for your MediaWiki installations and click Go.
  4. Navigate to the following directory (Where “yourwiki”is the folder for your MediaWiki site):

    public_html/yourwiki/skins/common/images/wiki.png

    Note! If the wiki.png is not the logo that is used for your MediaWiki, you can find the path to the logo by going to the LocalSettings.php. Open the LocalSettings.php file in the code editor and find the line with the $wgLogo code. See the image below.
    Finding the path for the logo in MediaWiki


    The directory will be based off the skins folder so the location will look like the following path:

    /skins/common/images/wiki.png

  5. Download the image to your local computer from the /skins/common/images/ directory through the File manager.
  6. Edit the image with an editor like Photoshop or Gimp.

    The .PNG file format will retain the transparency and is what the path referances in the image link, so you will want to keep that file format.

    Editing the original image will keep the correct file resolution and dimensions of the image.

  7. The MediaWiki site with the new logo

    Once done editing the image, rename the original wiki.png image on the server.

    Upload the new image to the /skins/common/images/ directory.

    You may need to clear your browser cache for the change to be seen. After uploading the image, view you MediaWiki site. Now you should see  the new logo will display similar to the image to the right.


Was this article helpful? Join the conversation!