Aber wir w\u00e4ren nicht artif, wenn wir nicht noch ein, zwei Tricks auf Lager h\u00e4tten, um Ihnen das Leben leichter zu machen. Oder zumindest Ihren Traffic.
Die in unserem letzten Blogbeitrag erstellten Favicons sind das was man braucht um garantieren zu k\u00f6nnen, dass es auf jedem Ger\u00e4t funktioniert.
Man kann jedoch ein paar Dinge verschlanken und somit etwas Traffic und Schreibarbeit einsparen.
Sehen wir uns an was wir mindestens brauchen, damit gerade so noch \u00fcberall ein Favicon angezeigt wird.
Fangen wir bei den Dateien an.
Hier k\u00f6nnen wir fast alles l\u00f6schen bis auf:<\/p>\n\n\n\n
\u2022 android-chrome-192×192.png
\u2022 apple-touch-icon.png
\u2022 browserconfig.xml
\u2022 favicon.ico
\u2022 favicon.png
\u2022 mstile-70×70.png
\u2022 mstile-150×150.png
\u2022 safari-pinned-tab.svg
\u2022 site.webmanifest<\/p>\n\n\n\n
Evtl. gibt es die Datei „favicon.png“ nicht. in diesem Fall k\u00f6nnen wir einfach die Datei „favicon-16×16.png“ umbenennen.<\/p>\n\n\n\n
Jetzt ben\u00f6tigen wir noch eine „favicon.svg“.
Dazu k\u00f6nnen wir die „safari-pinned-tab.svg“ kopieren und die gemachte Kopie umbenennen.<\/p>\n\n\n\n
Nun m\u00fcsste der Ordner ziemlich genau so aussehen:![\"uebrig](\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2022\/07\/files.png\")
<\/p>\n\n\n\n
Im <head> der HTML-Seiten k\u00f6nnen wir nun ein paar Zeilen ab\u00e4ndern oder l\u00f6schen.
Dieser sollte dann wie folgt aussehen:![\"head](\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2022\/07\/head.png\")
<\/p>\n\n\n\n
<link rel=“icon“ type=“image\/svg+xml“ href=“\/favicon.svg“ sizes=“any“>
<link rel=“icon“ type=“image\/png“ href=“\/favicon.png“>
<link rel=“icon“ type=“image\/x-icon“ href=“\/favicon.ico“>
<link rel=“manifest“ href=“\/site.webmanifest“>
<link rel=“mask-icon“ href=“\/safari-pinned-tab.svg“ color=“#228c41″>
<meta name=“apple-mobile-web-app-title“ content=“artif.com“>
<meta name=“application-name“ content=“artif.com“>
<meta name=“theme-color“ content=“#228c41″><\/p>\n\n\n\n
Hierbei muss man auf die Reihenfolge der obersten drei Zeilen achten, da jeder Browser zuerst seinen Lieblingsnamen testet und wenn dieser nicht gefunden worden ist, die Reihenfolge von oben nach unten, vorausgesetzt der Browser unterst\u00fctzt das jeweilige Dateiformat.
Daher ist die Reihenfolge:
1. SVG
2. PNG
3. ICO
Sobald wir dies gemacht haben m\u00fcssen wir noch den Inhalt der Dateien „site.webmanifest“, „browserconfig.xml“ und „favicon.svg“ bearbeiten, bzw. ein paar Zeilen l\u00f6schen. Dies funktioniert in jedem herk\u00f6mmlichen Texteditor. (Word z\u00e4hlt nicht dazu!)
Fangen wir mit dem Einfacheren an. Dies ist die Datei „browserconfig.xml“.
Dort l\u00f6schen wir die Zeilen, welche den Eintrag „310×310“ und „310×150“ haben.
Hier ein Vorher\/Nachher Vergleich:<\/p>\n\n\n\n
![\"xml](\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2022\/07\/xml_before.png\")
<\/p>\n<\/div>\n\n\n\n
![\"xml](\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2022\/07\/xml_after.png\")
<\/p>\n<\/div>\n<\/div>\n\n\n\n
Ein bisschen komplizierter ist die „site.webmanifest“. Diese Datei ist im JSON-Format und daher ist es zwingend erforderlich, dass die Struktur eingehalten wird.
Wenn Sie die Datei mit einem Texteditor \u00f6ffnen finden Sie darin mehrere Eintr\u00e4ge, die in etwa so aussehen:<\/p>\n\n\n\n
![\"webmanifest](\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2022\/07\/webmanifest_example-1.png\")
<\/figure>\n<\/div>\n\n\n\nEin einzelnes Element sieht so aus:<\/p>\n\n\n
![\"webmanifest](\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2022\/07\/image-3.png\")
<\/figure>\n<\/div>\n\n\nMit einer geschweiften Klammer wird der Anfang wird mit „{“ definiert und das Ende mit „}“.<\/p>\n\n\n\n
Wenn man mehrere Elemente aneinander Reiht, so muss man diese mit einem Komma trennen.<\/p>\n<\/div>\n<\/div>\n\n\n\n
Nun entfernen wir alle Elemente bis auf den Eintrag mit der Gr\u00f6\u00dfe „192×192“. Somit sollte die Datei nun so aussehen:<\/p>\n\n\n\n
![\"webmanifest](\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2022\/07\/webmanifest_final.png\")
<\/figure>\n<\/div>\n\n\n\nDa hier nur ein Element enthalten ist, muss darauf geachtet werden, dass nach der geschweiften Klammer „}“ kein Komma mehr steht.<\/p>\n\n\n
![\"webmanifest](\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2022\/07\/komma.png\")
<\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\nZu guter Letzt kommt noch die „favicon.svg“. Daraus entnehmen wir „#228c41“. Dort f\u00fcgen wir jetzt den HEX-Wert ein. Danach sieht der Inhalt so aus:<\/p>\n\n\n\n Das funktioniert allerdings nur, wenn das Favicon einfarbig ist. Wenn wir nun auch die SVG richtig bearbeitet haben, sind wir am Ende angekommen. Ich hoffe, mein Beitrag konnte Ihnen weiter helfen. Falls Sie dennoch Probleme mit der Darstellung Ihres Favicons oder einem anderen Thema im Webbereich haben, dann kontaktieren Sie uns gerne!<\/a><\/p>\n","protected":false},"excerpt":{"rendered":" Hallo nochmal. Wenn Sie unsere Beitragsserie HowTo: wirkungsvolle Favicons f\u00fcr die Website verbl\u00fcffend einfach! gelesen haben, dann wissen Sie ja jetzt schon alles was Sie brauchen zum Thema Favicons. Aber wir w\u00e4ren nicht artif, wenn wir nicht noch ein, zwei Tricks auf Lager h\u00e4tten, um Ihnen das Leben leichter zu machen. Oder zumindest Ihren Traffic….<\/p>\n <\/span> TYPO3<\/a><\/span><\/span> Allgemein<\/a><\/span><\/span> Weiterlesen<\/a><\/p>\n","protected":false},"author":7,"featured_media":2620,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,1],"tags":[40,36],"class_list":["post-2369","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-typo3","category-allgemein","tag-knowhow","tag-responsive-webdesign"],"yoast_head":"\n
Da wir diese erhalten haben in dem wir die „safari-pinned-tab.svg“ kopiert und die Kopie umbenannt haben, ist diese schwarz-wei\u00df. Um hier etwas Farbe hineinzubekommen, ben\u00f6tigen wir zuerst einmal den HEX-Wert der Farbe, die wir benutzen m\u00f6chten.
Da wir diese beim Erstellen des Favicons bereits angegeben haben, finden wir diesen Wert nun an mehreren Stellen in den Dateien.
Beispielsweise im <head> der HTML:<\/p>\n\n\n\n![\"hex](\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2022\/07\/image-5.png\")
<\/figure>\n\n\n\n
Dies brauchen wir, nachdem wir die „favicon.svg“ mit einem Texteditor ge\u00f6ffnet haben.
Die Datei ist im XML-Format und daher ist es zwingend erforderlich, dass die Struktur eingehalten wird.
Wir suchen nun nach dem Wort „fill“, welches sich in diesem Beispiel im XML-TAG „<g>“ befindet:<\/p>\n\n\n\n![\"fill](\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2022\/07\/image-8.png\")
<\/figure>\n\n\n\n![\"abge\u00e4ndertes](\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2022\/07\/image-10.png\")
<\/figure>\n\n\n\n
Wenn Sie ein mehrfarbiges Favicon haben, sollten Sie aus der Datei, mit der h\u00f6chsten Aufl\u00f6sung eine SVG generieren und diese dann benutzen.
Alternativ k\u00f6nnen die auch f\u00fcr jeden „<path>“ Tag ein eigenes fill=“#123456″ definieren. Dies w\u00fcrde dann in etwa so aussehen:<\/p>\n\n\n\n![\"Beispiel](\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2022\/07\/svg_manually-1.png\")
<\/figure>\n<\/div>\n\n\n\n![\"Beispiel](\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2022\/07\/svg_result_manually.png\")
<\/figure>\n<\/div>\n<\/div>\n\n\n\n
Wenn Sie m\u00f6chten, k\u00f6nnen Sie das Ergebnis noch einmal mit dem Favicon Checker<\/a> \u00fcberpr\u00fcfen.<\/p>\n\n\n\n