How To Add Favicon, Android & Apple Touch Icon In MediaWiki?

Unlike to WordPress, adding favicon, Android and Apple touch icon on MediaWiki website needs some coding. You are required editing your website’s LocalSettings.php and add few lines of code.

What Favicon and Apple Touch Icons Are?

AppleTouchIconA Favicon is a small icon displayed next to a URL in the web address bar of any browser. Whereas an Apple Touch icon is an icon that shows up when someone bookmarks your website.

Likewise Apple’s iPhone, iPod Touch and iPad devices comes with ability to add an icon when someone saves a bookmark onto the home screen using Safari web-browser.

Unlike to favicon, Apple touch icon has larger sizes (57×57, 72×72, 114×114 and 144×144 pixels, as per device).

In most websites, favicon needs no additional configurations to setup. You simply upload it on your website’s root directory as favicon.ico file and web-browsers automatically look for it there by default.

But in-case of MediaWiki, first of all make sure you have uploaded your favicon file in your website’s root directory. And then add use the following:

For Example:

$wgFavicon = "$wgScriptPath/favicon.ico";

You simply need to favicon’s path (as shown above) in LocalSettings.php file located in your MediaWiki website's root directory

Also make sure that your favicon image should be either 16 x 16 pixels or 32 x 32 pixels. You can easily generate favicon from any image file using online favicon generator tool.

For adding Apple Touch icon, you simply need to upload your file and locate it in LocalSettings.php file:

$wgAppleTouchIcon = "/wiki/icons/apple-touch-icon.png";

The code produces a <link> tag in HTML header output of your website. For Android devices use “apple-touch-icon-precomposed.png” in your root directory, and include $wgAppleTouchIcon = “$wgScriptPath/apple-touch-icon-precomposed.png”; again in your LocalSettings.php file.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.