Zum Inhalt springen

MediaWiki Favicons einrichten

Aus Laub-Home Wiki

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:

Das Icon Paket speichert man dann im Bilder Verzeichnis /images/ des MediaWiki ab. Dann einfach folgendes der LocalSettings.php anhängen:

LocalSettings.php

$wgHeadScriptCode = <<<'START_END_MARKER'
  <!-- Favicons -->
  <link rel="icon" type="image/png" href="/images/favicon-96x96.png" sizes="96x96" />
  <link rel="icon" type="image/png" href="/images/favicon-32x32.png" sizes="32x32" />
  <link rel="icon" type="image/png" href="/images/favicon-16x16.png" sizes="16x16" />
  <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
  <link rel="shortcut icon" href="/images/favicon.ico" />

  <!-- Apple Touch -->
  <link rel="apple-touch-icon" sizes="180x180" href="/images/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="/images/site.webmanifest" />

START_END_MARKER;
$wgHeadScriptName = 'Icons';

zu guter Letzt muss man noch die im /images/ Verzeichnis liegende site.webmanifest anpassen. Hier den Pfad vor den Icons auf /images/ ändern und ggf. den name und short_name anpassen: site.webmanifest

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