Wie man Favicons für den Darkmode erstellt (German) 🌚
Tags: darkmode, wordpress, favicon, deutsch
Published: 2022-03-15 11:42:15

---
title: Wie man Favicons für den Darkmode erstellt (German) 🌚
published: true
description: Wie man Favicons für den Darkmode erstellt (German) 🌚
tags: darkmode, wordpress, favicon, deutsch
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxotqr0f4ce6zqdlaiqh.jpg
---

> Dieser Artikel ist auch in [Englisch](https://dev.to/jolution/how-to-create-favicons-for-darkmode-english-46j8) verfügbar 🇬🇧

<!-- TOC -->

- [Beweggründe](#beweggr%C3%BCnde)
- [Voraussetzung](#voraussetzung)
- [Grundlagen erstellen](#grundlagen-erstellen)
- [Einbindung](#einbindung)
    - [Pfad](#pfad)
    - [Dateien](#dateien)
    - [WordPress](#wordpress)
        - [Optional: Admin Favicon](#optional-admin-favicon)
        - [Fun: Emoji Favicon](#fun-emoji-favicon)
    - [Typo3](#typo3)
    - [Static](#static)
- [Darkmode](#darkmode)
- [Fallback](#fallback)
    - [Safari](#safari)
    - [Andere Browser](#andere-browser)
    - [Aussichten](#aussichten)
        - [Manifest Farbdefinition](#manifest-farbdefinition)
        - [PWA / Maskable Icons](#pwa--maskable-icons)
- [Credits](#credits)

<!-- /TOC -->

## Beweggründe

👋🏼 Hello World,

mein Name ist [Julian](https://www.linkedin.com/in/julian-kasimir/). Ich bin Webentwickler und setze mich beruflich aktuell vermehrt mit dem Darkmode auseinander.

Das Thema handelt über die Anpassung der Favicons.
Da ich viel mit Wordpress arbeite, wird auch die Einbindung thematisiert.

## Voraussetzung

Seit der Firefox Version 41 (2015) und der [Chrome Version 80](https://chromestatus.com/feature/5180316371124224) (2019) können wir SVG-Favicons nutzen.
In Safari gibt es allerdings noch keinen Support.

Zu den Voraussetzungen siehe hierzu den Browser-Support von Caniuse.com zu folgenden Themen:

1. [SVG Favicons im Browser](https://caniuse.com/?search=SVG%20favicons)
2. [CSS Media Querie prefers-color-scheme](https://caniuse.com/?search=prefers-color-scheme)

![Caniuse: https://caniuse.com/?search=SVG%20favicons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qv51umhpnz3zq9mbnd63.jpg)

## Grundlagen erstellen

Als Ausgangsdatei habe ich für maximale Skalierbarkeit und optimale Performance mein Entwickler-Logo als SVG vorliegen.

Andernfalls ein Bild (PNG, JPG) mit der Größe von 260x260 Pixeln für optimale Ergebnisse.

Daraus exportieren wir nun folgende fünf Formate und Größen:

| Datei                | Größe   |
|----------------------|---------|
| favicon.ico          | 32×32   |
| favicon.svg          | -       |
| apple-touch-icon.png | 180×180 |
| icon-192.png         | 192x192 |
| icon-512.png         | 512x512 |


Die Dateien generiere ich über den Onlinedienst [RealFaviconGenerator](https://realfavicongenerator.net). Einstellungen habe ich hierfür auf der Standardausführung gelassen.

_Du kannst natürlich aber auch andere Grafikprogramme nutzen und mithilfe von Erweiterungen die Formate wie .ico exportieren._
_Sollte ein Icon nicht mitkommen oder nachjustiert werden müssen, kann man es natürlich auch gesondert als Datei aus Illustrator exportieren._
_Wenn du Inkscape zur Hand hast, kannst du es auch einfach direkt über die Console [generieren](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs):_

    inkscape ./icon.svg --export-width=512 --export-filename="./icon-512.png"


Nun sollten folgende Dateien vorliegen, welche wir (bspw. per sFTP) in den [Dokument Root](#pfad) der Seite laden:

    │   └── public
    |       ├── favicon.ico
    |       ├── favicon.svg
    |       ├── apple-touch-icon.png
    |       ├── icon-192.png
    |       ├── icon-512.png

    |       ├── manifest.webmanifest    (Siehe hierzu nächster Abschnitt)
    |       ├── favicon_admin.svg       (Optional: Siehe hierzu nächster Abschnitt)


_Die Angabe sizes="any" ist aktuell wichtig, da in Chrome [statt dem svg die ico Datei](https://bugs.chromium.org/p/chromium/issues/detail?id=1162276) gezogen wird._

## Einbindung

### Pfad

**Als Ablagepfad für die Icons eignet sich der Documentroot.**

Dies hat den Vorteil das, dass favicon.ico ebenfalls zum Einsatz kommen kann, wenn auch kein HTML verwendet wird: Beispiel hierfür, wären Dateien, wie [eine PDF Datei die im Browser geöffnet wird](https://stackoverflow.com/questions/4886423/display-favicon-for-pdf-files), oder [Bilder](https://stackoverflow.com/questions/21359342/is-putting-your-favicon-ico-file-in-a-non-root-path-a-bad-idea).
_Falls dies nicht möglich ist, könnte man hier einen Redirect vorsehen._

### Dateien

Manifest-Datei zum Hochladen:

Dateiname: manifest.webmanifest

    {
        "name": "Jolution",
        "short_name": "Jolution",
        "icons": [
            { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
            { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
        ],
        "theme_color": "#292c2f",
        "background_color": "#292c2f",
        "display": "standalone"
    }

Alternative mit den Minimum-Angaben:

    {
        "icons": [
            { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
            { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
        ]
    }

### WordPress

    // favicon frontend
    add_action('wp_head', 'custom_favicon');
    function custom_favicon() {
        echo '<link rel="icon" href="/favicon.ico" sizes="any">';
        echo '<link rel="icon" href="/favicon.svg" type="image/svg+xml">';
        echo '<link rel="apple-touch-icon" href="/apple-touch-icon.png">';
        echo '<link rel="manifest" href="/manifest.webmanifest" crossorigin="use-credentials">';
        echo '<meta name="theme-color" content="#22343b" media="(prefers-color-scheme: light)">';
        echo '<meta name="theme-color" content="#fff" media="(prefers-color-scheme: dark)">';
    }

_Alternativ können wir hier auch eine Zeile daraus machen oder [verketten](https://www.php.net/manual/en/language.operators.string.php) (concatenation):_

    add_action('wp_head', 'custom_favicon');
    function custom_favicon() {
        echo '<link rel="icon" href="/favicon.ico" sizes="any"><link rel="icon" href="/favicon.svg" type="image/svg+xml"><link rel="apple-touch-icon" href="/apple-touch-icon.png"><link rel="manifest" href="/manifest.webmanifest"><meta name="theme-color" content="#22343b" media="(prefers-color-scheme: light)"><meta name="theme-color" content="#fff" media="(prefers-color-scheme: dark)">';
    }

#### Optional: Admin Favicon

Als kleines Goodie, um einfacher zwischen Frontend und Backend Tabs in Chrome zu unterscheiden, habe ich im Theme eine gesonderte Favicon liegen:

    // favicon backend
    add_action('login_head', 'custom_favicon_admin');
    add_action('admin_head', 'custom_favicon_admin');
    function custom_favicon_admin() {
        printf('<link rel="icon" href="%s/favicon_admin.svg" type="image/svg+xml">', get_stylesheet_directory_uri());
        echo '<meta name="theme-color" content="#22343b" media="(prefers-color-scheme: light)">';
        echo '<meta name="theme-color" content="#fff" media="(prefers-color-scheme: dark)">';
    }

_Solltest du kein Schreibzugriff auf den Documentroot haben und die Dateien in das Theme legen müssen, dann kannst du statt echo die printf Anweisung oben verwenden._

_Wenn du das Admin-Icon ebenfalls im Document Root liegen hast, dann benötigst du `get_stylesheet_directory_uri()` nicht und kannst direkt mit /favicon_admin.svg arbeiten:_

    echo '<link rel="icon" href="/favicon_admin.svg" type="image/svg+xml">';

#### Fun: Emoji Favicon

Wer Emojis mag, kann alternativ auch mit diesen arbeiten, siehe hierzu den Tweet von [LeaVerou](https://twitter.com/LeaVerou/status/1241619866475474946),
sowie die Online-Dienste hierzu, [emojicon.dev](https://emojicon.dev/) und [fav.farm](https://fav.farm/).

    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><text x='0' y='14'>🌶</text></svg>

### Typo3

Wichtig: Vor dem Einbinden des folgenden Codes prüfen, dass die Zahl (=Position) 20 nicht schon vergeben ist und somit überschrieben wird.

_Falls es bereits die Position 20 in Ihrem [TypoScript](https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/UsingSetting/Index.html) gibt, dann prüfen Sie am besten in [10er Schritten](https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/Setup/Page/Index.html#setup-page-1-2-3-4), ob die 10 oder 30 frei ist._

    headerData {
        20 = TEXT
        20 {
            value (
                <link rel="icon" href="/favicon.ico" sizes="any">
                <link rel="icon" href="/favicon.svg" type="image/svg+xml">
                <link rel="apple-touch-icon" href="/apple-touch-icon.png">
                <link rel="manifest" href="/manifest.webmanifest" crossorigin="use-credentials">
                <meta name="theme-color" content="#22343b" media="(prefers-color-scheme: light)">
                <meta name="theme-color" content="#fff" media="(prefers-color-scheme: dark)">
            )
        }
    }

Aktuell lässt die **alternative Einbindungsmöglichkeit** [`shortcutIcon`](https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/Setup/Page/Index.html#shortcuticon) nur ein Icon zu:

    page.shortcutIcon = fileadmin/Icons/favicon.ico

Die Meta-Angaben theme-color im oberen Teil, lässt sich (aktuell) leider nicht über [`page.meta`](https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/Setup/Page/Index.html#meta) einbinden, da hier kein media Abfrage integriert werden kann.

### Static

In den Head der Webseite packen wir nun folgenden HTML Code:

    <head>

      <link rel="icon" href="/favicon.ico" sizes="any">
      <link rel="icon" href="/favicon.svg" type="image/svg+xml">
      <link rel="apple-touch-icon" href="/apple-touch-icon.png">
      <link rel="manifest" href="/manifest.webmanifest">

      <title>Example</title>
    </head>

_Optional kann auch zusätzlich, oberhalb des title, die theme-color eingebunden werden:_

    <meta name="theme-color" content="#22343b" media="(prefers-color-scheme: light)">
    <meta name="theme-color" content="#fff" media="(prefers-color-scheme: dark)">


Statt content="#fff" kann hier auch auf [CSS-Variablen](https://css-tricks.com/meta-theme-color-and-trickery/) gesetzt werden.
_Die Variablen in diesem Beispiel stammen von TailwindCSS._

    echo '<meta name="theme-color" content="var(--teal-800)" media="(prefers-color-scheme: light)">';
    echo '<meta name="theme-color" content="var(--white)" media="(prefers-color-scheme: dark)">';

## Darkmode

Da SVG mittlerweile von den großen Browsern gut unterstützt wird, konzentriere ich mich nur auf die SVG-Datei.

Mit einem Textprogramm öffnen wir diese und schauen uns diese an.
Eine SVG-Datei kann je nach Logo sehr groß werden.
Du könntest versuchen dies bereits im Vektorenprogramm zu reduzieren.
Zusätzlich kannst du mit [SVGOMG](https://jakearchibald.github.io/svgomg/) oder anderen [Diensten zur Optimierung](https://css-tricks.com/tools-for-optimizing-svg/) die SVG-Datei komprimieren.

__Wichtig: Vorher ein Backup der Originaldatei erstellen.__

Mein [Entwickler-Logo](https://jolution.de/) ist ein J in einem Kreis.
Dies habe ich als ein Pfad exportiert, dass ist aber natürlich kein Muss. Natürlich können auch mehrere Pfade angesprochen werden.
Dem Pfad habe ich nun standardmäßig eine dunkle Farbe zugewiesen.
Wird der Darkmode erkannt, wird der gleiche Pfad mit einer weißen Farbe definiert.

**Erwartetes Resultat:**

Darkmode: Ⓙ

Lightmode: 🅙

    <svg version="1.1" baseProfile="full" width="400" height="400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
	<path d="M200 0A200 200 0 0 0 0 200a200 200 0 0 0 200 200 200 200 0 0 0 200-200 200 200 0 0 0-76.736-157.21l-.028 156.01c0 4.268-.214 8.484-.636 12.64-.422 4.155-1.05 8.25-1.873 12.273-.824 4.023-1.843 7.975-3.047 11.846-1.204 3.87-2.593 7.66-4.157 11.356-1.563 3.697-3.302 7.302-5.205 10.805-1.903 3.504-3.97 6.904-6.19 10.192-2.222 3.288-4.6 6.463-7.118 9.516-2.52 3.052-5.18 5.98-7.977 8.777-2.796 2.796-5.727 5.46-8.78 7.98-3.052 2.518-6.227 4.892-9.515 7.114-3.288 2.22-6.688 4.29-10.19 6.192-3.504 1.903-7.11 3.642-10.806 5.205-3.697 1.564-7.487 2.953-11.357 4.157-3.87 1.203-7.823 2.22-11.846 3.044-4.024.824-8.12 1.45-12.274 1.873-4.156.423-8.372.64-12.64.64-3.914-.005-7.81-.195-11.677-.566-3.867-.372-7.703-.924-11.497-1.653-3.794-.727-7.545-1.633-11.242-2.71-3.696-1.076-7.34-2.324-10.917-3.74-3.577-1.415-7.088-2.997-10.52-4.742-3.435-1.744-6.79-3.65-10.054-5.715-3.267-2.064-6.443-4.285-9.517-6.66s-6.046-4.903-8.904-7.578l28.102-38.64s1.317 1.547 3.84 3.868c1.262 1.16 2.824 2.516 4.676 3.967 1.852 1.452 3.993 3 6.408 4.55 2.415 1.548 5.104 3.096 8.055 4.548 2.952 1.452 6.164 2.808 9.624 3.97 3.46 1.163 7.167 2.133 11.11 2.813 1.97.34 4 .61 6.087.792 2.088.183 4.23.28 6.43.283 2.636 0 5.24-.128 7.81-.38 2.568-.25 5.097-.622 7.583-1.112 2.487-.49 4.93-1.095 7.323-1.812 2.392-.716 4.732-1.545 7.017-2.478 2.285-.933 4.513-1.97 6.678-3.11 2.166-1.137 4.268-2.375 6.3-3.706 2.032-1.332 3.994-2.758 5.88-4.272 1.887-1.513 3.698-3.113 5.427-4.797 1.728-1.684 3.372-3.452 4.93-5.295 1.556-1.843 3.025-3.76 4.398-5.752 1.372-1.99 2.65-4.052 3.826-6.18 1.177-2.126 2.25-4.318 3.218-6.57.966-2.25 1.824-4.562 2.568-6.927.744-2.365 1.374-4.785 1.883-7.252.508-2.466.896-4.983 1.157-7.54.26-2.558.395-5.156.395-7.793l.015-147.084-.045-38.035A200 200 0 0 0 200 0z">
	</path>
	<style>
		path {
			fill: #22343b
		}
		@media (prefers-color-scheme: dark) {
			path{
				fill: #fff
			}
		}
	</style>
    </svg>


Alternativ kannst du statt einer Farbänderung auch die Helligkeit verändern.
Das kann je nach Aufwand (Menge der Pfadanpassungen) auch eine Lösung sein.
_Ich persönlich bevorzuge allerdings die einfache Farbanpassung._

    @media (prefers-color-scheme: dark) {
      :root {
        filter: brightness(4);
      }
    }

https://codepen.io/jolution/pen/bGadeQY


Wenn du nun noch als Meta theme-color hinzufügen möchtest, ist dies auch einfach [machbar](https://css-tricks.com/meta-theme-color-and-trickery/):
    <meta name="theme-color" content="#22343b" media="(prefers-color-scheme: light)">
    <meta name="theme-color" content="#fff" media="(prefers-color-scheme: dark)">

## Fallback

### Safari 

Safari unterstützt den automatisch erkennbaren Darkmode leider noch nicht.
Die normalen Toggle-Funktionen wären hier natürlich [kein Problem](https://www.w3schools.com/howto/howto_js_toggle_dark_mode.asp).
_Wenn ich eine Lösung gefunden habe, aktualisiere ich den Artikel natürlich._

    <link rel="mask-icon" href="favicon.svg" color="#22343b">

Schreibt mir gerne in die Kommentare, wenn Ihr einen guten und leichten Ansatz dafür habt.

### Andere Browser

Da nicht alle Browser die Medienabfragefunktionen im Link-Tag unterstützen, behebt dieses [Polyfill](https://github.com/rumkin/favicon-switcher) dies.
Hier wird allerdings JS verwendet, daher würde ich den Einsatz abwiegen und im Zweifelsfall darauf verzichten.

_Mit dem Favicon checker von realfavicongenerator kann man den Einsatz anschließend [prüfen](https://realfavicongenerator.net/favicon_checker?protocol=https&site=jolution.de#.Yi9ZJrgxlzV)._
_Sollte für euren Geschmack noch ein Browser fehlen, ergänzt die Meta Angaben durch die von dem Generator und ladet die entsprechenden Dateien dazu._

### Aussichten

#### Manifest Farbdefinition
Für manche Fälle wäre es ideal im Manifest bereits Farben für beide Modes anzugeben.
Wer sich dafür jetzt schon interessiert, findet bei github auf Englisch [weiterführende Informationen sowie den Austausch](https://github.com/w3c/manifest/issues?q=is%3Aissue+is%3Aopen+%22dark+mode%22).

#### PWA / Maskable Icons
Bei [web.dev](https://web.dev/maskable-icon/?utm_source=devtools) gibt es zu dem Thema PWA einen Ansatz von 2019 zum Thema "maskable icons".

## Credits

Danke an Andrey Sitnik (Autor von PostCSS und Autoprefixer) der die oben aufgeführten Maße als [optimales Set](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs) zusammengetragen hat.
Und auch an Houssein Djirdeh (Software Engineer bei @GoogleChrome) der diese Angaben mit 512x512 ebenfalls [verwendet](https://web.dev/add-manifest-react/).

Viel Erfolg und Spaß bei der Umsetzung.



_P.s. Wenn dich das Thema Darkmode, ganz allgemein, interessiert, ist mein Artikel bei [Medium](https://jolution.medium.com/how-to-rock-the-darkmode-de-6a4c4540e5bc) vielleicht Interessant für dich._