{"id":2095,"date":"2021-09-15T20:56:11","date_gmt":"2021-09-15T18:56:11","guid":{"rendered":"https:\/\/artif.com\/blog\/?p=2095"},"modified":"2023-03-31T09:49:55","modified_gmt":"2023-03-31T07:49:55","slug":"howto-wirkungsvolle-favicons-fuer-die-website-verblueffend-einfach-teil-23","status":"publish","type":"post","link":"https:\/\/artif.com\/blog\/howto-wirkungsvolle-favicons-fuer-die-website-verblueffend-einfach-teil-23.html","title":{"rendered":"HowTo: wirkungsvolle Favicons f\u00fcr die Website verbl\u00fcffend einfach! Teil 2\/3"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Willkommen zur\u00fcck!<br>In unserem <a href=\"https:\/\/artif.com\/blog\/howto-wirkungsvolle-favicons-fur-die-website-verbluffend-einfach.html\" title=\"HowTo: wirkungsvolle Favicons f\u00fcr die Website verbl\u00fcffend einfach\">letzten Beitrag<\/a> haben wir er\u00f6rtert wie man das richtige Ursprungsmaterial erstellt, damit man ein sch\u00f6nes und passendes Endprodukt erh\u00e4lt: wirkungsvolle Favicons. In diesem Beitrag erfahren Sie alles rund um die Dateien, die wir jetzt erstellen m\u00fcssen. Da das manuelle erstellen von 41 Dateien ziemlich lange dauern w\u00fcrde, benutzen wir ein Online-Tool, das die Arbeit f\u00fcr uns macht. Damit sparen wir uns eine Menge Zeit.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Als erstes eine vollst\u00e4ndige Liste an Dateien die wir ben\u00f6tigen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Konfigurationsdateien:<br>&#8211; browserconfig.xml (Windows Tiles)<br>&#8211; site.webmanifest (Google)<br>&#8211; index.html<\/li>\n\n\n\n<li>Regul\u00e4re Favicons:<br>&#8211; favicon.ico<br>&#8211; favicon-16&#215;16.png<br>&#8211; favicon-32&#215;32.png<br>&#8211; favicon-194&#215;194.png<\/li>\n\n\n\n<li>Windows-Tiles-Favicons:<br>&#8211; mstile-70&#215;70.png<br>&#8211; mstile-144&#215;144.png<br>&#8211; mstile-150&#215;150.png<br>&#8211; mstile-310&#215;150.png<br>&#8211; mstile-310&#215;310.png<\/li>\n\n\n\n<li>Apple-Touch-Icons:<br>&#8211; appe-touch-icon.png<br>&#8211; appe-touch-icon-57&#215;57.png<br>&#8211; appe-touch-icon-60&#215;60.png<br>&#8211; appe-touch-icon-72&#215;72.png<br>&#8211; appe-touch-icon-76&#215;76.png<br>&#8211; appe-touch-icon-114&#215;114.png<br>&#8211; appe-touch-icon-120&#215;120.png<br>&#8211; appe-touch-icon-144&#215;144.png<br>&#8211; appe-touch-icon-152&#215;152.png<br>&#8211; appe-touch-icon-180&#215;180.png<\/li>\n\n\n\n<li>Apple-Touch-Icons-precomposed (IOS7):<br>&#8211; appe-touch-icon-precomposed.png<br>&#8211; appe-touch-icon-57&#215;57-precomposed.png<br>&#8211; appe-touch-icon-60&#215;60-precomposed.png<br>&#8211; appe-touch-icon-72&#215;72-precomposed-precomposed.png<br>&#8211; appe-touch-icon-76&#215;76-precomposed.png<br>&#8211; appe-touch-icon-114&#215;114-precomposed.png<br>&#8211; appe-touch-icon-120&#215;120-precomposed.png<br>&#8211; appe-touch-icon-144&#215;144-precomposed.png<br>&#8211; appe-touch-icon-152&#215;152-precomposed.png<br>&#8211; appe-touch-icon-180&#215;180-precomposed.png<\/li>\n\n\n\n<li>Google:<br>&#8211; android-chrome-36&#215;36.png<br>&#8211; android-chrome-48&#215;48.png<br>&#8211; android-chrome-72&#215;72.png<br>&#8211; android-chrome-96&#215;96.png<br>&#8211; android-chrome-144&#215;144.png<br>&#8211; android-chrome-192&#215;192.png<br>&#8211; android-chrome-256&#215;256.png<br>&#8211; android-chrome-384&#215;384.png<br>&#8211; android-chrome-512&#215;512.png<\/li>\n\n\n\n<li>MacOS\/Safari:<br>&#8211; safari-pinned-tab.svg<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Schritt 1:<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Das Online-Tool welches wir benutzen um wirkungsvolle Favicons zu erstellen finden wir <a href=\"https:\/\/realfavicongenerator.net\/\">hier<\/a>.<br>Falls die Weiterleitung nicht funktioniert, geben Sie in der Adresszeile Ihres Browsers folgenden Link ein:<br><a href=\"https:\/\/realfavicongenerator.net\/\">https:\/\/realfavicongenerator.net\/<\/a> <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Schritt 2:<\/strong><br>Nun klicken Sie auf den blauen Button &#8222;<em>Select your Favicon Image<\/em>&#8222;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"364\" src=\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/08\/Select_favicon_image-1024x364.png\" alt=\"\" class=\"wp-image-2151\" srcset=\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/08\/Select_favicon_image-1024x364.png 1024w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/08\/Select_favicon_image-300x107.png 300w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/08\/Select_favicon_image-768x273.png 768w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/08\/Select_favicon_image-1536x546.png 1536w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/08\/Select_favicon_image.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Schritt 3:<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">W\u00e4hlen Sie im Dateiexplorer, der sich nun ge\u00f6ffnet hat, Ihr im letzten Blogbeitrag erstelltes Bild aus und klicken Sie rechts unten auf &#8222;<em>\u00d6ffnen<\/em>&#8222;, um das Bild hochzuladen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"486\" src=\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/08\/Open_file-1024x486.png\" alt=\"\" class=\"wp-image-2152\" srcset=\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/08\/Open_file-1024x486.png 1024w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/08\/Open_file-300x142.png 300w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/08\/Open_file-768x364.png 768w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/08\/Open_file.png 1149w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Schritt 4:<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Warten Sie nun einen Moment, bis das Online-Tool das Bild verarbeitet hat.<br>Nach einer kurzen Zeit sollten Sie dies sehen:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"928\" src=\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/08\/Wait_for_process_1.png\" alt=\"\" class=\"wp-image-2153\" srcset=\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/08\/Wait_for_process_1.png 1920w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/08\/Wait_for_process_1-300x145.png 300w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/08\/Wait_for_process_1-1024x495.png 1024w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/08\/Wait_for_process_1-768x371.png 768w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/08\/Wait_for_process_1-1536x742.png 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Schritt 5:<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Unter &#8222;<em>Favicon for Desktop Browsers and Google Result Pages<\/em>&#8220; w\u00e4hlen Sie das erste H\u00e4kchen &#8222;<em>Use the original image as is<\/em>&#8222;, welches allerdings schon im Vorfeld ausgew\u00e4hlt sein sollte.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"426\" src=\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/08\/Favicon_for_Desktop_Browsers_and_Google_Result_Pages-1024x426.png\" alt=\"\" class=\"wp-image-2158\" srcset=\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/08\/Favicon_for_Desktop_Browsers_and_Google_Result_Pages-1024x426.png 1024w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/08\/Favicon_for_Desktop_Browsers_and_Google_Result_Pages-300x125.png 300w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/08\/Favicon_for_Desktop_Browsers_and_Google_Result_Pages-768x320.png 768w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/08\/Favicon_for_Desktop_Browsers_and_Google_Result_Pages.png 1143w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Schritt 6:<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Unter IOS k\u00f6nnen leider keine transparenten stellen genutzt werden. Daher muss man sich entscheiden, ob man unter &#8222;<em>Favicon for iOS &#8211; Web Clip<\/em>&#8220; unter dem Reiter &#8222;<em>Settings<\/em>&#8220; die Standardeingabe &#8222;<em>Use the original favicon as is.&nbsp;iOS will fill the transparent regions with black.<\/em>&#8220; beh\u00e4lt, was alle transparenten Stellen einen schwarzen Hintergrund gibt, oder ob man selber eine Farbe w\u00e4hlt in dem man &#8222;<em>Add a solid, plain background to fill the transparent regions.<\/em>&#8220; ausw\u00e4hlt und dann eine Farbe in Form von Hexadezimal angibt.<br>Sollten Sie nur RGB-Werte haben, k\u00f6nnen Sie auf vielen Seiten im Internet einen RGB-to-Hex-Converter finden.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"334\" src=\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Favicon-fuer-IOS-1024x334.png\" alt=\"\" class=\"wp-image-2236\" srcset=\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Favicon-fuer-IOS-1024x334.png 1024w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Favicon-fuer-IOS-300x98.png 300w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Favicon-fuer-IOS-768x251.png 768w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Favicon-fuer-IOS.png 1148w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><br>Wenn Sie sich f\u00fcr eines entschieden haben wechseln Sie auf den Reiter &#8222;<em>Assets<\/em>&#8222;.<br>Dort k\u00f6nnen Sie einmal jedes H\u00e4kchen setzen. Dies garantiert, dass das Favicon auf jedem Ger\u00e4t dargestellt werden kann, haupts\u00e4chlich wichtig f\u00fcr \u00e4ltere Ger\u00e4te.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"400\" src=\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Favicon-fuer-IOS-Assets-1024x400.png\" alt=\"\" class=\"wp-image-2235\" srcset=\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Favicon-fuer-IOS-Assets-1024x400.png 1024w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Favicon-fuer-IOS-Assets-300x117.png 300w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Favicon-fuer-IOS-Assets-768x300.png 768w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Favicon-fuer-IOS-Assets.png 1145w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Schritt 7:<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Unter &#8222;<em>Favicon for Android Chrome<\/em>&#8220; im Reiter &#8222;<em>Main settings<\/em>&#8220; ist wieder &#8222;<em>No change, keep the master picture as it is<\/em>.&#8220; standardm\u00e4\u00dfig ausgew\u00e4hlt. Hier empfiehlt sich aber auch &#8222;<em>Apply a slight drop shadow, similar to official Google apps (Gmail, Play Store, YouTube&#8230;)<\/em>&#8220; auszuw\u00e4hlen, da man dann einen leichten Schatten angezeigt bekommt, der das Favicon ein bisschen hervorhebt.<br>Darunter kann man dann noch einen benutzerdefinierten Namen vergeben. Dies ist Sinnvoll, da ansonsten der komplette Link als Name angezeigt wird.<br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"406\" src=\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Android-1024x406.png\" alt=\"\" class=\"wp-image-2241\" srcset=\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Android-1024x406.png 1024w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Android-300x119.png 300w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Android-768x304.png 768w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Android.png 1149w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Unter dem Reiter &#8222;<em>Assets<\/em>&#8220; wird Standardm\u00e4\u00dfig &#8222;<em>Create only recommended, high resolution icons<\/em>&#8220; ausgew\u00e4hlt.<br>Auch hier ist es besser f\u00fcr \u00e4ltere Ger\u00e4te, wenn Sie &#8222;<em>Create all documented icons<\/em>&#8220; ausw\u00e4hlen und darunter das H\u00e4kchen bei &#8222;<em>Declare the icon in the HTML code<\/em>&#8220; setzen, damit auch bei Android gew\u00e4hrleistet werden kann, dass das Favicon auf allen Ger\u00e4ten ordentlich angezeigt werden kann.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"402\" src=\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Android-Assets-1024x402.png\" alt=\"\" class=\"wp-image-2244\" srcset=\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Android-Assets-1024x402.png 1024w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Android-Assets-300x118.png 300w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Android-Assets-768x301.png 768w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Android-Assets.png 1147w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Schritt 8:<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Unter &#8222;<em>Windows Metro<\/em>&#8220; im Reiter &#8222;<em>Settings<\/em>&#8220; k\u00f6nnen Sie auch die standardm\u00e4\u00dfige Auswahl &#8222;<em>Use the original favicon as is.<\/em>&#8220; stehen lassen. Bei der Hintergrundfarbe k\u00f6nnen Sie wieder selbst entscheiden,  welche Farbe genutzt werden soll. Hierzu bietet sie Seite eine kleine Auswahl aus vordefinierten Farben an, oder Sie k\u00f6nnen selbst mit Hexadezimalen eine Farbe angeben.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"315\" src=\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Windows-1024x315.png\" alt=\"\" class=\"wp-image-2245\" srcset=\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Windows-1024x315.png 1024w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Windows-300x92.png 300w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Windows-768x236.png 768w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Windows.png 1148w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Unter dem Reiter &#8222;<em>Assets<\/em>&#8220; k\u00f6nnen Sie auch hier wieder alles ausw\u00e4hlen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"324\" src=\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Windows-Assets-1024x324.png\" alt=\"\" class=\"wp-image-2246\" srcset=\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Windows-Assets-1024x324.png 1024w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Windows-Assets-300x95.png 300w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Windows-Assets-768x243.png 768w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Windows-Assets.png 1148w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Schritt 9:<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Unter &#8222;<em>macOS Safari<\/em>&#8220; im Reiter &#8222;<em>Settings<\/em>&#8220; wird es etwas schwieriger.<br>Es wird aus der von Ihnen hochgeladenen Datei automatisch eine Vektorgrafik f\u00fcr MacOS-Ger\u00e4te generiert. Wie gut das funktioniert h\u00e4ngt ganz allein von dem hochgeladenen Bild ab.<br>Falls Sie im Vorfeld schon eine SVG erstellt haben, k\u00f6nnen Sie diese unter dem Reiter &#8222;<em>Dedicated picture<\/em>&#8220; Ausw\u00e4hlen.<br>Aber sehr wahrscheinlich haben Sie keine solche Vektorgrafik.<br>In den meisten F\u00e4llen ist Ihr Favicon auch nicht transparent. Daher m\u00fcssen Sie den zweiten Punkt &#8222;<em>Turn your picture into a monochrome icon. Play with the threshold to get the best result.<\/em>&#8220; ausw\u00e4hlen. In der Vorschau sollte ihr Favicon nun als einfarbige Vektorgrafik dargestellt werden. Sollten Sie einige Details vermissen, verschieben Sie den Schieberegler und probieren Sie ein bisschen aus, bis Ihnen das Ergebnis gef\u00e4llt. F\u00fcr ein optimales Ergebnis, oder falls zu viele Details fehlen, ben\u00f6tigen Sie eine zweifarbige Vorlage. Auch diese k\u00f6nnen, bzw. sollten Sie auch nochmals erstellen.<br>Hier ein Beispiel, das sehr viele Details hat und bei dem ich sehr viel experimentieren musste bis ich ein sauberes Ergebnis bekommen habe:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-corecolumns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Das originale Favicon und darunter dessen Ergebnis:<br><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"200\" height=\"200\" src=\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/00_favicon_original-1.png\" alt=\"\" class=\"wp-image-2252\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"673\" height=\"576\" src=\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Ipar-Original-1.png\" alt=\"\" class=\"wp-image-2259\" srcset=\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Ipar-Original-1.png 673w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Ipar-Original-1-300x257.png 300w\" sizes=\"auto, (max-width: 673px) 100vw, 673px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Das nachbearbeitete Bild und darunter dessen Ergebnis:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"200\" height=\"200\" src=\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/00_Favicon_original_macOS_Safari-1.png\" alt=\"\" class=\"wp-image-2255\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"674\" height=\"576\" src=\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Ipar-nachbearbeitet.png\" alt=\"\" class=\"wp-image-2258\" srcset=\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Ipar-nachbearbeitet.png 674w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Ipar-nachbearbeitet-300x256.png 300w\" sizes=\"auto, (max-width: 674px) 100vw, 674px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Zu guter Letzt kann man jetzt noch die Farbe, auch wieder in Hexadezimal, angeben, in der das Favicon angezeigt werden soll.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Schritt 10:<\/strong> <\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Unter &#8222;<em>Favicon Generator Options<\/em>&#8220;  kann man nun generelle Einstellungen zu den Favicons vornehmen.<br>Wichtig f\u00fcr uns sind die Reiter &#8222;<em>Path<\/em>&#8222;, &#8222;<em>Version\/Refresh<\/em>&#8220; und &#8222;<em>Scaling algorithm<\/em>&#8222;.<br>Doch eins nach dem anderen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Path:<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Unter dem Reiter &#8222;<em>Path<\/em>&#8220; kann man im Vorfeld festlegen, in welchem Ordner man sp\u00e4ter die Favicons ablegt. Der angegebene Pfad muss mit dem Ablageort der Favicons \u00fcbereinstimmen, da ein Browser sonst nicht wei\u00df, wo diese Dateien liegen und er sie somit nicht anzeigen kann.<br>Im Normalfall liegen die Favicons im Wurzelverzeichnis der Webseite. Also auch da, wo ggf. die .htaccess-Datei, die index.html der Hauptseite, und die ganzen verschiedenen Seiten in jeweils eigenen Ordnern liegen.<br>Diese Struktur ist allerdings veraltet und macht das ganze un\u00fcbersichtlich. Daher werden wir f\u00fcr unsere Anleitung einen eigenen Ordner f\u00fcr die Favicons anlegen. Im unserem dritten und voraussichtlich letzten Blogbeitrag mehr dazu.<br>Das Wurzelverzeichnis ist immer &#8222;\/&#8220;.<br>Da wir eine saubere Ordnerstruktur unserer Webseite haben m\u00f6chten w\u00e4hlen wir unter dem Reiter &#8222;<em>Path<\/em>&#8220; nun den zweiten Punkt &#8222;<em>I cannot or I do not want to place favicon files at the root of my web site. Instead I will place them here<\/em>&#8220; aus und tragen in die darunter liegende Zeile &#8222;<em>\/assets\/media\/favicons\/<\/em>&#8220; ein. diese Ordner legen wir sp\u00e4ter dann auch im Dateiverzeichnis unserer Webseite an.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"215\" src=\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Options-Path-1024x215.png\" alt=\"\" class=\"wp-image-2266\" srcset=\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Options-Path-1024x215.png 1024w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Options-Path-300x63.png 300w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Options-Path-768x161.png 768w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Options-Path.png 1150w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Version\/Refresh:<\/strong> <\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Zu Beginn: Dieser Punkt ist nur wichtig, falls Sie diese Seite schon l\u00e4nger betreiben und\/oder schon ein anderes Favicon  genutzt haben.<br>Wie schon in der Erkl\u00e4rung steht, ist es h\u00e4ufig (vor allem bei Apple-Ger\u00e4ten) so, dass Favicon einmal in ein Cache auf die Festplatte geschrieben werden und danach nicht mehr gel\u00f6scht werden, selbst wenn man den Browsercache l\u00f6scht. <br>Daher gibt es Versionierung f\u00fcr die Favicons.<br>Im Reiter &#8222;<em>Version\/Refresh<\/em>&#8220; w\u00e4hlen wir den zweiten Punkt &#8222;<em>The web site is already in production and many people already visited it. I want returning visitors to see my new favicon, not the old one.<\/em>&#8220; aus und tragen in das zweite Feld &#8222;<em>01<\/em>&#8220; ein. Hier k\u00f6nnen Sie etwas beliebiges eintragen, wir bleiben aber ordentlich.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"250\" src=\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Options-Version-1024x250.png\" alt=\"\" class=\"wp-image-2267\" srcset=\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Options-Version-1024x250.png 1024w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Options-Version-300x73.png 300w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Options-Version-768x188.png 768w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Options-Version.png 1145w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Scaling algorithm:<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In manchen F\u00e4llen kommt es vor, dass statt eine der erstellten gro\u00dfen Versionen des Favicons das kleine &#8222;favicon.ico&#8220; genutzt und gr\u00f6\u00dfer dargestellt wird. Hier k\u00f6nnen wir bestimmen, wie es hochgerechnet wird.<br>Dies ist ziemlich straightforward. D.h. suchen Sie sich aus den sechs angezeigten Grafiken das aus, was Ihnen am besten gef\u00e4llt. Die linken Grafiken sind ausschlaggebend. Die Rechten sind nur eine gr\u00f6\u00dfere Darstellung der Linken, damit man besser erkennen kann, wie genau das aussieht.<br>Ich habe mich f\u00fcr &#8222;<em>Mitchell<\/em>&#8220; entschieden.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"547\" src=\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Options-Scaling-1024x547.png\" alt=\"\" class=\"wp-image-2268\" srcset=\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Options-Scaling-1024x547.png 1024w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Options-Scaling-300x160.png 300w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Options-Scaling-768x410.png 768w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Options-Scaling.png 1149w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Damit sind wir fertig mit dem Konfigurieren unseres Favicons und klicken nun auf den gro\u00dfen blauen Button &#8222;<em>Generate your Favicons and HTML code<\/em>&#8222;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"366\" height=\"60\" src=\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Generate.png\" alt=\"\" class=\"wp-image-2269\" srcset=\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Generate.png 366w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Generate-300x49.png 300w\" sizes=\"auto, (max-width: 366px) 100vw, 366px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Schritt 11:<\/strong> <\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Nun dauert es einen Moment, w\u00e4hrend das Online-Tool unsere Eingaben verarbeitet und unser Paket zusammenstellt. Im Anschlu\u00df, wenn das Tool fertig ist, sollten wir das hier sehen:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"514\" src=\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Install-Overview-1024x514.png\" alt=\"\" class=\"wp-image-2272\" srcset=\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Install-Overview-1024x514.png 1024w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Install-Overview-300x151.png 300w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Install-Overview-768x386.png 768w, https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/09\/Install-Overview.png 1161w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Auf dem obersten blauen Button k\u00f6nnen Sie eine .zip herunterladen, die alle Dateien enth\u00e4lt, welche Sie ben\u00f6tigen. W\u00e4hrend der Download startet, markieren Sie den angezeigten Text unter &#8222;<em>3.<\/em>&#8220; und kopieren ihn, entweder mit &#8222;STRG+C&#8220;, oder mit Rechtsklick auf der Maus und im Kontextmen\u00fc auf &#8222;Kopieren&#8220; klicken.<br><br>Danach Erstellen Sie im n\u00e4chsten Schritt eine Textdatei und f\u00fcgen Sie den gerade kopierten Text dort ein und speichern diese Textdatei ab. Dieser Inhalt wird sp\u00e4ter noch ben\u00f6tigt!<br><br>In unserem <a href=\"https:\/\/artif.com\/blog\/howto-wirkungsvolle-favicons-fuer-die-website-verblueffend-einfach-teil-23.html\" target=\"_blank\" rel=\"noreferrer noopener\">n\u00e4chsten Blogbeitrag<\/a> erfahren Sie, wie Sie das Favicon in Ihre Webseite einbinden:<br>\u2022 Wie m\u00fcssen Sie die Dateien ablegen<br>\u2022 Welche Ver\u00e4nderungen m\u00fcssen Sie an Ihren HTML-Seiten vornehmen <br>\u2022 Wie \u00fcberpr\u00fcfen Sie, ob all Ihre Favicons funktionieren<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Willkommen zur\u00fcck!In unserem letzten Beitrag haben wir er\u00f6rtert wie man das richtige Ursprungsmaterial erstellt, damit man ein sch\u00f6nes und passendes Endprodukt erh\u00e4lt: wirkungsvolle Favicons. In diesem Beitrag erfahren Sie alles rund um die Dateien, die wir jetzt erstellen m\u00fcssen. Da das manuelle erstellen von 41 Dateien ziemlich lange dauern w\u00fcrde, benutzen wir ein Online-Tool, das&#8230;<\/p>\n<p><span class=\"hidden-desktop article_mobileCategory\"><a href=\"https:\/\/artif.com\/blog\/category\/allgemein\" title=\"Alle Artikel in Allgemein\"><span class=\"hidden-desktop articleCategory_icon icon-allgemein\"><\/span> Allgemein<\/a><\/span><a class=\"article_moreLink\" href=\"https:\/\/artif.com\/blog\/howto-wirkungsvolle-favicons-fuer-die-website-verblueffend-einfach-teil-23.html\" aria-label=\"Weiterlesen: HowTo: wirkungsvolle Favicons f\u00fcr die Website verbl\u00fcffend einfach! Teil 2\/3\"><span class=\"icon icon-readmore\"><\/span> Weiterlesen<\/a><\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[81,40,36],"class_list":["post-2095","post","type-post","status-publish","format-standard","hentry","category-allgemein","tag-favicon","tag-knowhow","tag-responsive-webdesign"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>HowTo: wirkungsvolle Favicons f\u00fcr die Website verbl\u00fcffend einfach! Teil 2\/3 - Blog artif T\u00fcbingen<\/title>\n<meta name=\"description\" content=\"Favicons im richtigen Format einbetten f\u00fcr eine klare Darstellung. Wir zeigen wie es ganz einfach geht und auf was Sie achten sollten: Teil 2\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/artif.com\/blog\/howto-wirkungsvolle-favicons-fuer-die-website-verblueffend-einfach-teil-23.html\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HowTo: wirkungsvolle Favicons f\u00fcr die Website verbl\u00fcffend einfach! Teil 2\/3 - Blog artif T\u00fcbingen\" \/>\n<meta property=\"og:description\" content=\"Favicons im richtigen Format einbetten f\u00fcr eine klare Darstellung. Wir zeigen wie es ganz einfach geht und auf was Sie achten sollten: Teil 2\" \/>\n<meta property=\"og:url\" content=\"https:\/\/artif.com\/blog\/howto-wirkungsvolle-favicons-fuer-die-website-verblueffend-einfach-teil-23.html\" \/>\n<meta property=\"og:site_name\" content=\"Blog artif T\u00fcbingen\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/pages\/TYPO3-Agentur-artif-Gmbh-Co-KG\/101490748200\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-15T18:56:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-31T07:49:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/08\/Select_favicon_image-1024x364.png\" \/>\n<meta name=\"author\" content=\"arti\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@artifcom\" \/>\n<meta name=\"twitter:site\" content=\"@artifcom\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"arti\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"12\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/artif.com\\\/blog\\\/howto-wirkungsvolle-favicons-fuer-die-website-verblueffend-einfach-teil-23.html#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/artif.com\\\/blog\\\/howto-wirkungsvolle-favicons-fuer-die-website-verblueffend-einfach-teil-23.html\"},\"author\":{\"name\":\"arti\",\"@id\":\"https:\\\/\\\/artif.com\\\/blog\\\/#\\\/schema\\\/person\\\/817283e2b7162470a5b977b7318850de\"},\"headline\":\"HowTo: wirkungsvolle Favicons f\u00fcr die Website verbl\u00fcffend einfach! Teil 2\\\/3\",\"datePublished\":\"2021-09-15T18:56:11+00:00\",\"dateModified\":\"2023-03-31T07:49:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/artif.com\\\/blog\\\/howto-wirkungsvolle-favicons-fuer-die-website-verblueffend-einfach-teil-23.html\"},\"wordCount\":1577,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/artif.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/artif.com\\\/blog\\\/howto-wirkungsvolle-favicons-fuer-die-website-verblueffend-einfach-teil-23.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/artif.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/Select_favicon_image-1024x364.png\",\"keywords\":[\"Favicon\",\"KnowHow\",\"Responsive Webdesign\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/artif.com\\\/blog\\\/howto-wirkungsvolle-favicons-fuer-die-website-verblueffend-einfach-teil-23.html#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/artif.com\\\/blog\\\/howto-wirkungsvolle-favicons-fuer-die-website-verblueffend-einfach-teil-23.html\",\"url\":\"https:\\\/\\\/artif.com\\\/blog\\\/howto-wirkungsvolle-favicons-fuer-die-website-verblueffend-einfach-teil-23.html\",\"name\":\"HowTo: wirkungsvolle Favicons f\u00fcr die Website verbl\u00fcffend einfach! Teil 2\\\/3 - Blog artif T\u00fcbingen\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/artif.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/artif.com\\\/blog\\\/howto-wirkungsvolle-favicons-fuer-die-website-verblueffend-einfach-teil-23.html#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/artif.com\\\/blog\\\/howto-wirkungsvolle-favicons-fuer-die-website-verblueffend-einfach-teil-23.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/artif.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/Select_favicon_image-1024x364.png\",\"datePublished\":\"2021-09-15T18:56:11+00:00\",\"dateModified\":\"2023-03-31T07:49:55+00:00\",\"description\":\"Favicons im richtigen Format einbetten f\u00fcr eine klare Darstellung. Wir zeigen wie es ganz einfach geht und auf was Sie achten sollten: Teil 2\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/artif.com\\\/blog\\\/howto-wirkungsvolle-favicons-fuer-die-website-verblueffend-einfach-teil-23.html#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/artif.com\\\/blog\\\/howto-wirkungsvolle-favicons-fuer-die-website-verblueffend-einfach-teil-23.html\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/artif.com\\\/blog\\\/howto-wirkungsvolle-favicons-fuer-die-website-verblueffend-einfach-teil-23.html#primaryimage\",\"url\":\"https:\\\/\\\/artif.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/Select_favicon_image.png\",\"contentUrl\":\"https:\\\/\\\/artif.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/Select_favicon_image.png\",\"width\":1920,\"height\":683,\"caption\":\"Favicon Generator \u00dcbersicht unterschiedlicher Icons in diversen Bereichen\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/artif.com\\\/blog\\\/howto-wirkungsvolle-favicons-fuer-die-website-verblueffend-einfach-teil-23.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\\\/\\\/artif.com\\\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HowTo: wirkungsvolle Favicons f\u00fcr die Website verbl\u00fcffend einfach! Teil 2\\\/3\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/artif.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/artif.com\\\/blog\\\/\",\"name\":\"Blog artif T\u00fcbingen\",\"description\":\"Blog von artif aus T\u00fcbingen: Internetagentur, Webdesign und TYPO3 von den Web Experts f\u00fcr Internet und Intranet aus T\u00fcbingen.\",\"publisher\":{\"@id\":\"https:\\\/\\\/artif.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/artif.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/artif.com\\\/blog\\\/#organization\",\"name\":\"artif T\u00fcbingen\",\"url\":\"https:\\\/\\\/artif.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/artif.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/artif.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/logo-artif-cs5_rgb.png\",\"contentUrl\":\"https:\\\/\\\/artif.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/logo-artif-cs5_rgb.png\",\"width\":1902,\"height\":528,\"caption\":\"artif T\u00fcbingen\"},\"image\":{\"@id\":\"https:\\\/\\\/artif.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/pages\\\/TYPO3-Agentur-artif-Gmbh-Co-KG\\\/101490748200\",\"https:\\\/\\\/x.com\\\/artifcom\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/artif.com\\\/blog\\\/#\\\/schema\\\/person\\\/817283e2b7162470a5b977b7318850de\",\"name\":\"arti\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/358a03b7694baea6aaa1d125b46716741d638ac58db5cf9ac2840a11558f7e40?s=96&d=identicon&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/358a03b7694baea6aaa1d125b46716741d638ac58db5cf9ac2840a11558f7e40?s=96&d=identicon&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/358a03b7694baea6aaa1d125b46716741d638ac58db5cf9ac2840a11558f7e40?s=96&d=identicon&r=g\",\"caption\":\"arti\"},\"sameAs\":[\"https:\\\/\\\/artif.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HowTo: wirkungsvolle Favicons f\u00fcr die Website verbl\u00fcffend einfach! Teil 2\/3 - Blog artif T\u00fcbingen","description":"Favicons im richtigen Format einbetten f\u00fcr eine klare Darstellung. Wir zeigen wie es ganz einfach geht und auf was Sie achten sollten: Teil 2","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/artif.com\/blog\/howto-wirkungsvolle-favicons-fuer-die-website-verblueffend-einfach-teil-23.html","og_locale":"de_DE","og_type":"article","og_title":"HowTo: wirkungsvolle Favicons f\u00fcr die Website verbl\u00fcffend einfach! Teil 2\/3 - Blog artif T\u00fcbingen","og_description":"Favicons im richtigen Format einbetten f\u00fcr eine klare Darstellung. Wir zeigen wie es ganz einfach geht und auf was Sie achten sollten: Teil 2","og_url":"https:\/\/artif.com\/blog\/howto-wirkungsvolle-favicons-fuer-die-website-verblueffend-einfach-teil-23.html","og_site_name":"Blog artif T\u00fcbingen","article_publisher":"https:\/\/www.facebook.com\/pages\/TYPO3-Agentur-artif-Gmbh-Co-KG\/101490748200","article_published_time":"2021-09-15T18:56:11+00:00","article_modified_time":"2023-03-31T07:49:55+00:00","og_image":[{"url":"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/08\/Select_favicon_image-1024x364.png","type":"","width":"","height":""}],"author":"arti","twitter_card":"summary_large_image","twitter_creator":"@artifcom","twitter_site":"@artifcom","twitter_misc":{"Verfasst von":"arti","Gesch\u00e4tzte Lesezeit":"12\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/artif.com\/blog\/howto-wirkungsvolle-favicons-fuer-die-website-verblueffend-einfach-teil-23.html#article","isPartOf":{"@id":"https:\/\/artif.com\/blog\/howto-wirkungsvolle-favicons-fuer-die-website-verblueffend-einfach-teil-23.html"},"author":{"name":"arti","@id":"https:\/\/artif.com\/blog\/#\/schema\/person\/817283e2b7162470a5b977b7318850de"},"headline":"HowTo: wirkungsvolle Favicons f\u00fcr die Website verbl\u00fcffend einfach! Teil 2\/3","datePublished":"2021-09-15T18:56:11+00:00","dateModified":"2023-03-31T07:49:55+00:00","mainEntityOfPage":{"@id":"https:\/\/artif.com\/blog\/howto-wirkungsvolle-favicons-fuer-die-website-verblueffend-einfach-teil-23.html"},"wordCount":1577,"commentCount":1,"publisher":{"@id":"https:\/\/artif.com\/blog\/#organization"},"image":{"@id":"https:\/\/artif.com\/blog\/howto-wirkungsvolle-favicons-fuer-die-website-verblueffend-einfach-teil-23.html#primaryimage"},"thumbnailUrl":"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/08\/Select_favicon_image-1024x364.png","keywords":["Favicon","KnowHow","Responsive Webdesign"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/artif.com\/blog\/howto-wirkungsvolle-favicons-fuer-die-website-verblueffend-einfach-teil-23.html#respond"]}]},{"@type":"WebPage","@id":"https:\/\/artif.com\/blog\/howto-wirkungsvolle-favicons-fuer-die-website-verblueffend-einfach-teil-23.html","url":"https:\/\/artif.com\/blog\/howto-wirkungsvolle-favicons-fuer-die-website-verblueffend-einfach-teil-23.html","name":"HowTo: wirkungsvolle Favicons f\u00fcr die Website verbl\u00fcffend einfach! Teil 2\/3 - Blog artif T\u00fcbingen","isPartOf":{"@id":"https:\/\/artif.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/artif.com\/blog\/howto-wirkungsvolle-favicons-fuer-die-website-verblueffend-einfach-teil-23.html#primaryimage"},"image":{"@id":"https:\/\/artif.com\/blog\/howto-wirkungsvolle-favicons-fuer-die-website-verblueffend-einfach-teil-23.html#primaryimage"},"thumbnailUrl":"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/08\/Select_favicon_image-1024x364.png","datePublished":"2021-09-15T18:56:11+00:00","dateModified":"2023-03-31T07:49:55+00:00","description":"Favicons im richtigen Format einbetten f\u00fcr eine klare Darstellung. Wir zeigen wie es ganz einfach geht und auf was Sie achten sollten: Teil 2","breadcrumb":{"@id":"https:\/\/artif.com\/blog\/howto-wirkungsvolle-favicons-fuer-die-website-verblueffend-einfach-teil-23.html#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/artif.com\/blog\/howto-wirkungsvolle-favicons-fuer-die-website-verblueffend-einfach-teil-23.html"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/artif.com\/blog\/howto-wirkungsvolle-favicons-fuer-die-website-verblueffend-einfach-teil-23.html#primaryimage","url":"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/08\/Select_favicon_image.png","contentUrl":"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/08\/Select_favicon_image.png","width":1920,"height":683,"caption":"Favicon Generator \u00dcbersicht unterschiedlicher Icons in diversen Bereichen"},{"@type":"BreadcrumbList","@id":"https:\/\/artif.com\/blog\/howto-wirkungsvolle-favicons-fuer-die-website-verblueffend-einfach-teil-23.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/artif.com\/blog"},{"@type":"ListItem","position":2,"name":"HowTo: wirkungsvolle Favicons f\u00fcr die Website verbl\u00fcffend einfach! Teil 2\/3"}]},{"@type":"WebSite","@id":"https:\/\/artif.com\/blog\/#website","url":"https:\/\/artif.com\/blog\/","name":"Blog artif T\u00fcbingen","description":"Blog von artif aus T\u00fcbingen: Internetagentur, Webdesign und TYPO3 von den Web Experts f\u00fcr Internet und Intranet aus T\u00fcbingen.","publisher":{"@id":"https:\/\/artif.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/artif.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/artif.com\/blog\/#organization","name":"artif T\u00fcbingen","url":"https:\/\/artif.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/artif.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/03\/logo-artif-cs5_rgb.png","contentUrl":"https:\/\/artif.com\/blog\/wp-content\/uploads\/2021\/03\/logo-artif-cs5_rgb.png","width":1902,"height":528,"caption":"artif T\u00fcbingen"},"image":{"@id":"https:\/\/artif.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/pages\/TYPO3-Agentur-artif-Gmbh-Co-KG\/101490748200","https:\/\/x.com\/artifcom"]},{"@type":"Person","@id":"https:\/\/artif.com\/blog\/#\/schema\/person\/817283e2b7162470a5b977b7318850de","name":"arti","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/358a03b7694baea6aaa1d125b46716741d638ac58db5cf9ac2840a11558f7e40?s=96&d=identicon&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/358a03b7694baea6aaa1d125b46716741d638ac58db5cf9ac2840a11558f7e40?s=96&d=identicon&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/358a03b7694baea6aaa1d125b46716741d638ac58db5cf9ac2840a11558f7e40?s=96&d=identicon&r=g","caption":"arti"},"sameAs":["https:\/\/artif.com"]}]}},"publishpress_future_action":{"enabled":false,"date":"2026-05-26 03:20:24","action":"change-status","newStatus":"draft","terms":[],"taxonomy":"category","extraData":[]},"publishpress_future_workflow_manual_trigger":{"enabledWorkflows":[]},"_links":{"self":[{"href":"https:\/\/artif.com\/blog\/wp-json\/wp\/v2\/posts\/2095","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/artif.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/artif.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/artif.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/artif.com\/blog\/wp-json\/wp\/v2\/comments?post=2095"}],"version-history":[{"count":41,"href":"https:\/\/artif.com\/blog\/wp-json\/wp\/v2\/posts\/2095\/revisions"}],"predecessor-version":[{"id":2877,"href":"https:\/\/artif.com\/blog\/wp-json\/wp\/v2\/posts\/2095\/revisions\/2877"}],"wp:attachment":[{"href":"https:\/\/artif.com\/blog\/wp-json\/wp\/v2\/media?parent=2095"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/artif.com\/blog\/wp-json\/wp\/v2\/categories?post=2095"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/artif.com\/blog\/wp-json\/wp\/v2\/tags?post=2095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}