MediaWiki Favicons einrichten

Hier ein kleines HowTo, wie man in einem MediaWiki Setup alle möglichen "favicons" bekommt. zunächst muss man sich alle Arten von Icons anhand eines original Icon Bildes generieren lassen? Habe dafür einfach mein Logo genommen:

• https://realfavicongenerator.net/

Das Icon Paket speichert man dann in einem Verzeichnis /favicon/ des MediaWiki ab, oder man mountet es bei einem Docker Setup einfach nach /var/www/html/favicon, hier ein Beispiel für die docker-compose Datei:

docker-compose.yml

- ./data/mediawiki/favicon/:/var/www/html/favicon:ro

. Dann einfach folgendes der LocalSettings.php anhängen: LocalSettings.php

# Apple Touch Icon
$wgAppleTouchIcon = "/favicon/apple-touch-icon.png";

# Favicon
$wgFavicon = "/favicon/favicon.ico";

$wgHeadScriptCode = <<<'START_END_MARKER'
<!-- Favicons -->
<link rel="icon" type="image/png" href="/favicon/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="/favicon/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="/favicon/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
<link rel="shortcut icon" href="/favicon/favicon.ico" />
<!-- Apple Touch -->
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
<meta name="apple-mobile-web-app-title" content="Laub-Home" />
<!-- PWA Manifest (kann auch im Root liegen; wichtig ist nur, dass es erreichbar ist) -->
<link rel="manifest" href="/favicon/site.webmanifest" />
START_END_MARKER;
$wgHeadScriptName = 'Favicon Stuff';

$wgHooks['BeforePageDisplay'][] = 'HeadScript';
function HeadScript( OutputPage &$out, Skin &$skin ) {
        global $wgHeadScriptCode, $wgHeadScriptName;
        $out->addHeadItem($wgHeadScriptName, $wgHeadScriptCode );
        return TRUE;
}

zu guter Letzt muss man noch die im /favicon/ Verzeichnis liegende site.webmanifest anpassen, solltet ihr das bei der Generierung der Icons nicht schon vorkonfiguriert haben. Hier den Pfad vor den Icons auf /favicon/ ändern und ggf. den name und short_name anpassen: site.webmanifest

{
  "name": "LHlab wiki",
  "short_name": "LHlab",
  "icons": [
    {
      "src": "/favicon/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/favicon/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}