{"id":1110,"date":"2016-08-04T10:28:42","date_gmt":"2016-08-04T08:28:42","guid":{"rendered":"https:\/\/www.clickstorm.de\/blog\/?p=1110"},"modified":"2017-11-03T14:28:40","modified_gmt":"2017-11-03T13:28:40","slug":"touch-favicons-so-behalten-sie-den-ueberblick","status":"publish","type":"post","link":"https:\/\/www.clickstorm.de\/blog\/touch-favicons-so-behalten-sie-den-ueberblick\/","title":{"rendered":"Touch-  &#038; Favicons &#8211; so behalten Sie den \u00dcberblick"},"content":{"rendered":"<p>Auf dem Feld der Touch- und Favicons kocht aktuell jeder Hersteller sein eigenes S\u00fcppchen. Das Ergebnis sind \u00fcber 30 verschiedene Gr\u00f6\u00dfenanforderungen\u00a0und Einbindungsarten &#8211; f\u00fcr eigentlich nur eine Aufgabe. Ziemlich chaotisch &#8230; finden wir. Chaos genug, um es zu Entwirren und einen Weg zu finden, damit umzugehen.<\/p>\n<h2>Favicon<\/h2>\n<p>Fangen wir mit dem \u00fcbersichtlichen Feld der Favicons an. Der Name leitet sich von dem englischen Wort &#8222;Favorite&#8220; ab. Wie der Name daher schon vermuten l\u00e4sst, wird das Favicon bei den Lesezeichen gezeigt. Ist eine Webseite in einem Browser als Lesezeichen gespeichert, wird das Favicon neben dem Seitentitel in der Lesezeichenliste angezeigt. Zudem findet das Favicon im Browser-Tab Verwendung. Auch hier wird es neben dem Seitentitel angezeigt. Im\u00a0folgenden Ausschnitt werden die Favicons zur Verdeutlichung hervorgehoben.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1134 size-full\" src=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2016\/08\/favicon-beispiel.jpg\" alt=\"Favicon Beispiel von clickstorm\" width=\"440\" height=\"101\" srcset=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2016\/08\/favicon-beispiel.jpg 440w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2016\/08\/favicon-beispiel-300x69.jpg 300w\" sizes=\"auto, (max-width: 440px) 100vw, 440px\" \/><\/p>\n<p>Das Favicon wird von den Browsern in einer Gr\u00f6\u00dfe von 16&#215;16 px dargestellt. Da wir aber auch die hochaufl\u00f6senden Bildschirme beachten m\u00fcssen, ist es ratsam das Favicon in der doppelten Gr\u00f6\u00dfe, also 32&#215;32 px, zu hinterlegen. So wird das Favicon u.a. auch auf den sogenannten Retina-Displays scharf dargestellt. Mehr zum Thema <a href=\"https:\/\/www.clickstorm.de\/blog\/das-internet-wird-immer-schaerfer\/\">hochaufl\u00f6sende Bildschirme<\/a>\u00a0haben wir in einem anderen Blog-Beitrag beschrieben.<\/p>\n<p>Die Einbindung des 32&#215;32 px gro\u00dfen Favicons passiert im head-Bereich der HTML-Webseite. Dieser Bereich ist f\u00fcr den Webseiten-Nutzer nicht lesbar. Hier wird das Favicon verlinkt. Damit der Browser diesen Link auch als Favicon erkennt, wird das Attribut &#8222;rel&#8220; gesetzt. Laut HTML-Standard wird\u00a0als rel-Attribut der Wert &#8222;icon&#8220; f\u00fcr Favicons gesetzt. Hier tanzt aber der Internet Explorer aus der Reihe, dieser erwartet f\u00fcr Favicons dea rel-Attribut &#8222;shortcut icon&#8220;.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;link rel=\"shortcut icon\" href=\"\/images\/favicon.ico\" type=\"image\/x-icon\"&gt;<\/pre>\n<p>\u00dcblicherweise wird das Favicon in dem Dateiformat .ico hinterlegt. Im Netz findet man einige Konverter, die PNG-Bilder mit Transparenzen in das Format .ico umwandeln. Der Kreativiti\u00e4t sind also durch das ICO-Format keine Grenzen gesetzt. Ein Beispiel f\u00fcr einen solchen Konverter finden Sie auf\u00a0<a href=\"http:\/\/convertico.com\/\">convertico.com<\/a>.<\/p>\n<h2>Touch Icon<\/h2>\n<p>Touch Icons kamen mit dem Aufstieg der Smartphones einher. Auf Smartphones ist\u00a0es m\u00f6glich, Lesezeichen auf dem Home-Screen anzulegen. Daf\u00fcr wurde ein gro\u00dfes, quadratisches Icon ben\u00f6tigt, welches dann in der typischen Kachel-Ansicht genutzt werden konnte. Zudem nutzen g\u00e4ngige Browser wie der mobile Chrome Browser diese Touch Icons auf der Startseite des Browsers. Hier werden beliebte Seiten angeboten, ebenfalls in einer Kachel-Optik.<\/p>\n<p>S\u00e4mtliche Touch Icons werden, wie auch das Favicon, im head-Bereich jeder HTML-Seite eingebunden.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1146\" src=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2016\/08\/touch-icon-beispiel-1024x868.png\" alt=\"Touch Icon Beispiel anhand clickstorm\" width=\"700\" height=\"593\" srcset=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2016\/08\/touch-icon-beispiel-1024x868.png 1024w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2016\/08\/touch-icon-beispiel-300x254.png 300w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2016\/08\/touch-icon-beispiel-768x651.png 768w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2016\/08\/touch-icon-beispiel.png 1160w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<h3>Apple Touch Icon<\/h3>\n<p>Apple war im Bereich der Touch Icons Vorreiter und definierte eine Anforderung zur Einbindung eines Touch Icons &#8211; das sogenannte &#8222;Apple Touch Icon&#8220;. Android schloss sich dem an und greift auch &#8211; noch &#8211; auf dieses Apple Touch Icon zu.<\/p>\n<p>Da sich die Aufl\u00f6sung der Smartphone-Displays in den letzten Jahren extrem gesteigert hat, gab es an die Gr\u00f6\u00dfe dieser Icons mit jedem neuen Display andere Anforderungen. So kam ein Gr\u00f6\u00dfen-Katalog mit um die 10 Gr\u00f6\u00dfen-Anforderungen zusammen. Von 57&#215;57 px bis zu 180&#215;180 px. Den\u00a0Glanzeffekt, runde Ecken oder Schatten werden von\u00a0jedem Betriebssystem (z.B. iOS, Android) individuell zu dem Icon hinzu gerechnet. Daher muss das Touch Icon diese Effekte nicht enthalten. Auch ist es so, dass ein Icon, welches zu gro\u00df ist, von dem Betriebssystem heruntergerechnet wird. Hierbei kann es zu leichten Unsch\u00e4rfen kommen, die aber zu verkraften sind. <strong>Somit reicht es, ein Apple Touch Icon in der aktuell gr\u00f6\u00dften Gr\u00f6\u00dfen-Anforderung zu hinterlegen (aktuell 180&#215;180 px f\u00fcr das\u00a0iPhone 7).<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;link rel=\"apple-touch-icon\" href=\"\/images\/clickstorm-touch-icon.png\"&gt;<\/pre>\n<h3>Android\u00a0Touch Icon<\/h3>\n<p>Der obenstehende Code zeigt die Einbindung des Apple Touch Icons. Android greift\u00a0aktuell auch auf die Apple Touch Icons zur\u00fcck, allerdings ist dies bereits als &#8222;deprecated&#8220; markiert. Das bedeutet, dass dies in Zukunft nicht mehr passieren wird. Daher muss f\u00fcr Android ein eigenes Touch Icon hinterlegt werden.\u00a0<strong>Google empfiehlt f\u00fcr die Touch Icons auf Android-Systemen die folgende Einbindung des Touch Icons in der Gr\u00f6\u00dfe 196x196px.<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;link rel=\"shortcut icon\" href=\"\/images\/clickstorm-touch-icon.png\" sizes=\"196x196\"&gt;<\/pre>\n<h3>Windows Tile Icons<\/h3>\n<p>Somit haben wir bereits ein Apple Touch Icon eingebunden, welches f\u00fcr iOS und &#8211; noch &#8211; f\u00fcr Android gilt. Dieses haben wir in der gr\u00f6\u00dften bisher angeforderten Gr\u00f6\u00dfe eingebunden, welches auch die kleineren Touch Icons abdeckt. F\u00fcr neuere Android Ger\u00e4te haben wir zudem ein Touch Icon mit der von Google empfohlenen Gr\u00f6\u00dfe eingebunden. Nat\u00fcrlich hat Windows auch sein eigenes S\u00fcppchen gekocht und greift im Gegensatz zu Android nicht auf das Apple Touch Icon zu. Daher\u00a0muss\u00a0f\u00fcr Windows Smartphone noch ein weiteres Touch Icon eingebunden werden, das sogenannte Tile Icon.<\/p>\n<p><strong>F\u00fcr Windows sollten unterschiedliche Tile Icons in verschiedenen Gr\u00f6\u00dfen hinterlegt werden.<\/strong> Windows hat einen kleinen <a href=\"https:\/\/msdn.microsoft.com\/en-us\/windows\/uwp\/controls-and-patterns\/tiles-and-notifications-app-assets\">Style-Guide<\/a> f\u00fcr die Tile Icons erstellt. Auf welche Gr\u00f6\u00dfen man sich hier konzentrieren will, ist jedem selbst \u00fcberlassen. Eine \u00dcbersicht aller Gr\u00f6\u00dfen ist in dem Style-Guide zu finden. Wir empfehlen die Gr\u00f6\u00dfen 70&#215;70 px, 150&#215;150 px, 310&#215;150 px und 310&#215;310 px.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;meta name=\"msapplication-square70x70logo\" content=\"\/images\/tile-70x70.png\"&gt;\r\n&lt;meta name=\"msapplication-square150x150logo\" content=\"\/images\/tile-150x150.png\"&gt;\r\n&lt;meta name=\"msapplication-wide310x150logo\" content=\"\/images\/tile-310x150.png\"&gt;\r\n&lt;meta name=\"msapplication-square310x310logo\" content=\"\/images\/tile-310x310.png\"&gt;<\/pre>\n<p>&nbsp;<\/p>\n<h2>Fazit<\/h2>\n<p>Ein Favicon sollte jede Webseite mitbringen. Der Aufwand ein solches zu erstellen und zu hinterlegen ist sehr gering. Bei den Touch Icons ist es schon etwas komplizierter, zu entscheiden, was genau man einbinden will. Da jeder Betriebssystem-Hersteller auf dem Gebiet seine individuellen Anforderungen stellt und die geforderten Gr\u00f6\u00dfen sich durch die besseren Displays st\u00e4ndig ver\u00e4ndert haben, ist ein gro\u00dfes Chaos entstanden. Es gibt wahnsinnig viele Gr\u00f6\u00dfen die man bedienen kann, gerade unter Windows.<\/p>\n<p>Aber man muss sich hierbei auch mal wieder auf den Boden der Tatsachen zur\u00fcckholen. Die Touch Icons sind ein nettes Feature. Versteifen sollte man sich auf die Touch Icons aber nicht. Eine gut funktionierende <a href=\"\/leistungen\/webdesign\/\">responsive Webseite <\/a>bietet dem Nutzer schlussendlich doch deutlich mehr Mehrwert als 30 liebevoll hinterlegte Touch und Tile Icons in jeder erdenklichen Gr\u00f6\u00dfe.<\/p>\n<p>Sie wollen sich mehr auf Ihre mobilen Kunden konzentrieren? Wir helfen Ihnen Ihre Webseite mobil zu optimieren und einige Touch Icons zu hinterlegen. <a href=\"https:\/\/www.clickstorm.de\/kontakt\/\">Sprechen Sie uns an<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Auf dem Feld der Touch- und Favicons kocht aktuell jeder Hersteller sein eigenes S\u00fcppchen. Ziemlich chaotisch &#8230; finden wir. Chaos genug, um es zu Entwirren und einen Weg zu finden, damit umzugehen.<\/p>\n","protected":false},"author":8,"featured_media":1165,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[137],"tags":[74,27,26,75,66],"class_list":["post-1110","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend","tag-favicon","tag-mobile-websites","tag-responsive","tag-touch-icon","tag-webdesign"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Touch- &amp; Favicons - so behalten Sie den \u00dcberblick - clickstorm Blog<\/title>\n<meta name=\"description\" content=\"Auf dem Feld der Touch- und Favicons kocht aktuell jeder Hersteller sein eigenes S\u00fcppchen. Ziemlich chaotisch ... finden wir.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.clickstorm.de\/blog\/touch-favicons-so-behalten-sie-den-ueberblick\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Touch- &amp; Favicons - so behalten Sie den \u00dcberblick - clickstorm Blog\" \/>\n<meta property=\"og:description\" content=\"Auf dem Feld der Touch- und Favicons kocht aktuell jeder Hersteller sein eigenes S\u00fcppchen. Ziemlich chaotisch ... finden wir.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.clickstorm.de\/blog\/touch-favicons-so-behalten-sie-den-ueberblick\/\" \/>\n<meta property=\"og:site_name\" content=\"clickstorm Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/de-de.facebook.com\/clickstorm\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-08-04T08:28:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-11-03T13:28:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2016\/08\/icon-suppe_teaser-01.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1170\" \/>\n\t<meta property=\"og:image:height\" content=\"577\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Angela\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@clickstorm_gmbh\" \/>\n<meta name=\"twitter:site\" content=\"@clickstorm_gmbh\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Angela\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"5\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/touch-favicons-so-behalten-sie-den-ueberblick\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/touch-favicons-so-behalten-sie-den-ueberblick\\\/\"},\"author\":{\"name\":\"Angela\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/person\\\/ba487d63eccacea4839c77536f9dd569\"},\"headline\":\"Touch- &#038; Favicons &#8211; so behalten Sie den \u00dcberblick\",\"datePublished\":\"2016-08-04T08:28:42+00:00\",\"dateModified\":\"2017-11-03T13:28:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/touch-favicons-so-behalten-sie-den-ueberblick\\\/\"},\"wordCount\":972,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/touch-favicons-so-behalten-sie-den-ueberblick\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/08\\\/icon-suppe_teaser-01.jpg\",\"keywords\":[\"Favicon\",\"Mobile Websites\",\"Responsive\",\"Touch Icon\",\"Webdesign\"],\"articleSection\":[\"Frontend\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/touch-favicons-so-behalten-sie-den-ueberblick\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/touch-favicons-so-behalten-sie-den-ueberblick\\\/\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/touch-favicons-so-behalten-sie-den-ueberblick\\\/\",\"name\":\"Touch- & Favicons - so behalten Sie den \u00dcberblick - clickstorm Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/touch-favicons-so-behalten-sie-den-ueberblick\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/touch-favicons-so-behalten-sie-den-ueberblick\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/08\\\/icon-suppe_teaser-01.jpg\",\"datePublished\":\"2016-08-04T08:28:42+00:00\",\"dateModified\":\"2017-11-03T13:28:40+00:00\",\"description\":\"Auf dem Feld der Touch- und Favicons kocht aktuell jeder Hersteller sein eigenes S\u00fcppchen. Ziemlich chaotisch ... finden wir.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/touch-favicons-so-behalten-sie-den-ueberblick\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/touch-favicons-so-behalten-sie-den-ueberblick\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/touch-favicons-so-behalten-sie-den-ueberblick\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/08\\\/icon-suppe_teaser-01.jpg\",\"contentUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/08\\\/icon-suppe_teaser-01.jpg\",\"width\":1170,\"height\":577,\"caption\":\"Kochtopf, Suppe mit Icons\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/touch-favicons-so-behalten-sie-den-ueberblick\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Touch- &#038; Favicons &#8211; so behalten Sie den \u00dcberblick\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/\",\"name\":\"clickstorm Blog\",\"description\":\"Neuigkeiten rund um Webentwicklung\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#organization\",\"name\":\"clickstorm GmbH\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/11\\\/logo.svg\",\"contentUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/11\\\/logo.svg\",\"caption\":\"clickstorm GmbH\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/de-de.facebook.com\\\/clickstorm\\\/\",\"https:\\\/\\\/x.com\\\/clickstorm_gmbh\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCEaU1eUbug6OiI4uU6vA-cA\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/person\\\/ba487d63eccacea4839c77536f9dd569\",\"name\":\"Angela\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7a410dd158504ccaf4003dcfc3e8458caf513e73b06ddbfee2b0a7cdc0fa6456?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7a410dd158504ccaf4003dcfc3e8458caf513e73b06ddbfee2b0a7cdc0fa6456?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7a410dd158504ccaf4003dcfc3e8458caf513e73b06ddbfee2b0a7cdc0fa6456?s=96&d=mm&r=g\",\"caption\":\"Angela\"},\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/author\\\/angela\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Touch- & Favicons - so behalten Sie den \u00dcberblick - clickstorm Blog","description":"Auf dem Feld der Touch- und Favicons kocht aktuell jeder Hersteller sein eigenes S\u00fcppchen. Ziemlich chaotisch ... finden wir.","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:\/\/www.clickstorm.de\/blog\/touch-favicons-so-behalten-sie-den-ueberblick\/","og_locale":"de_DE","og_type":"article","og_title":"Touch- & Favicons - so behalten Sie den \u00dcberblick - clickstorm Blog","og_description":"Auf dem Feld der Touch- und Favicons kocht aktuell jeder Hersteller sein eigenes S\u00fcppchen. Ziemlich chaotisch ... finden wir.","og_url":"https:\/\/www.clickstorm.de\/blog\/touch-favicons-so-behalten-sie-den-ueberblick\/","og_site_name":"clickstorm Blog","article_publisher":"https:\/\/de-de.facebook.com\/clickstorm\/","article_published_time":"2016-08-04T08:28:42+00:00","article_modified_time":"2017-11-03T13:28:40+00:00","og_image":[{"width":1170,"height":577,"url":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2016\/08\/icon-suppe_teaser-01.jpg","type":"image\/jpeg"}],"author":"Angela","twitter_card":"summary_large_image","twitter_creator":"@clickstorm_gmbh","twitter_site":"@clickstorm_gmbh","twitter_misc":{"Verfasst von":"Angela","Gesch\u00e4tzte Lesezeit":"5\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.clickstorm.de\/blog\/touch-favicons-so-behalten-sie-den-ueberblick\/#article","isPartOf":{"@id":"https:\/\/www.clickstorm.de\/blog\/touch-favicons-so-behalten-sie-den-ueberblick\/"},"author":{"name":"Angela","@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/person\/ba487d63eccacea4839c77536f9dd569"},"headline":"Touch- &#038; Favicons &#8211; so behalten Sie den \u00dcberblick","datePublished":"2016-08-04T08:28:42+00:00","dateModified":"2017-11-03T13:28:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www.clickstorm.de\/blog\/touch-favicons-so-behalten-sie-den-ueberblick\/"},"wordCount":972,"commentCount":0,"publisher":{"@id":"https:\/\/www.clickstorm.de\/blog\/#organization"},"image":{"@id":"https:\/\/www.clickstorm.de\/blog\/touch-favicons-so-behalten-sie-den-ueberblick\/#primaryimage"},"thumbnailUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2016\/08\/icon-suppe_teaser-01.jpg","keywords":["Favicon","Mobile Websites","Responsive","Touch Icon","Webdesign"],"articleSection":["Frontend"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.clickstorm.de\/blog\/touch-favicons-so-behalten-sie-den-ueberblick\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.clickstorm.de\/blog\/touch-favicons-so-behalten-sie-den-ueberblick\/","url":"https:\/\/www.clickstorm.de\/blog\/touch-favicons-so-behalten-sie-den-ueberblick\/","name":"Touch- & Favicons - so behalten Sie den \u00dcberblick - clickstorm Blog","isPartOf":{"@id":"https:\/\/www.clickstorm.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.clickstorm.de\/blog\/touch-favicons-so-behalten-sie-den-ueberblick\/#primaryimage"},"image":{"@id":"https:\/\/www.clickstorm.de\/blog\/touch-favicons-so-behalten-sie-den-ueberblick\/#primaryimage"},"thumbnailUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2016\/08\/icon-suppe_teaser-01.jpg","datePublished":"2016-08-04T08:28:42+00:00","dateModified":"2017-11-03T13:28:40+00:00","description":"Auf dem Feld der Touch- und Favicons kocht aktuell jeder Hersteller sein eigenes S\u00fcppchen. Ziemlich chaotisch ... finden wir.","breadcrumb":{"@id":"https:\/\/www.clickstorm.de\/blog\/touch-favicons-so-behalten-sie-den-ueberblick\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.clickstorm.de\/blog\/touch-favicons-so-behalten-sie-den-ueberblick\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.clickstorm.de\/blog\/touch-favicons-so-behalten-sie-den-ueberblick\/#primaryimage","url":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2016\/08\/icon-suppe_teaser-01.jpg","contentUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2016\/08\/icon-suppe_teaser-01.jpg","width":1170,"height":577,"caption":"Kochtopf, Suppe mit Icons"},{"@type":"BreadcrumbList","@id":"https:\/\/www.clickstorm.de\/blog\/touch-favicons-so-behalten-sie-den-ueberblick\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.clickstorm.de\/blog\/"},{"@type":"ListItem","position":2,"name":"Touch- &#038; Favicons &#8211; so behalten Sie den \u00dcberblick"}]},{"@type":"WebSite","@id":"https:\/\/www.clickstorm.de\/blog\/#website","url":"https:\/\/www.clickstorm.de\/blog\/","name":"clickstorm Blog","description":"Neuigkeiten rund um Webentwicklung","publisher":{"@id":"https:\/\/www.clickstorm.de\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.clickstorm.de\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.clickstorm.de\/blog\/#organization","name":"clickstorm GmbH","url":"https:\/\/www.clickstorm.de\/blog\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/11\/logo.svg","contentUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/11\/logo.svg","caption":"clickstorm GmbH"},"image":{"@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/de-de.facebook.com\/clickstorm\/","https:\/\/x.com\/clickstorm_gmbh","https:\/\/www.youtube.com\/channel\/UCEaU1eUbug6OiI4uU6vA-cA"]},{"@type":"Person","@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/person\/ba487d63eccacea4839c77536f9dd569","name":"Angela","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/7a410dd158504ccaf4003dcfc3e8458caf513e73b06ddbfee2b0a7cdc0fa6456?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/7a410dd158504ccaf4003dcfc3e8458caf513e73b06ddbfee2b0a7cdc0fa6456?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7a410dd158504ccaf4003dcfc3e8458caf513e73b06ddbfee2b0a7cdc0fa6456?s=96&d=mm&r=g","caption":"Angela"},"url":"https:\/\/www.clickstorm.de\/blog\/author\/angela\/"}]}},"_links":{"self":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts\/1110","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/comments?post=1110"}],"version-history":[{"count":33,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts\/1110\/revisions"}],"predecessor-version":[{"id":1327,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts\/1110\/revisions\/1327"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/media\/1165"}],"wp:attachment":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/media?parent=1110"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/categories?post=1110"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/tags?post=1110"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}