Apple Touch Icon / Favicon / Windows 8 Tile (Kachel) Generator

Apple Touch Icon GeneratorDieser Generator erzeugt alle notwendigen Icons für Touch-Screens, Windows 8 Tiles (Webkacheln) sowie verschiedene Favicons und den dazu gehörigen HTML-Code, um diese einzubinden.

Bitte wähle Dein Logo aus, um daraus Touch Screen Icons für iPhone, iPad und Android-Geräte zu generieren.

Idealerweise hat die Upload-Grafik eine Mindestgröße von 310x310. Nicht quadratische Grafiken werden quadratisch gemacht.

Datei auswählen und Einstellungen vornehmen

Hinweis vom 19.12.2015:
Das generieren von Icons mit Transparenzen ist aktuell noch im Beta-Status.
Falls die Icons fehlerhaft generiert werden, einfach Checkbox deaktivieren, transparente Flächen werden dann durch weiß ersetzt.


Über diese Webseite

Apple Touch Icon GeneratorDas Einbinden eines Favoriten-Icons war früher schnell getan: Man benötigte lediglich eine Software, welche in der Lage ist, eine .ico-Grafik zu speichern (zum Beispiel das freie Tool www.hardcopy.de). Bereits das Ablegen der Grafik im root-Verzeichnis der Webseite reichte aus, damit das Icon vom Browser gefunden wurde. Wollte man das Icon nicht im root-Verzeichnis ablegen, sondern in einem Ordner, war dann noch die explizite Angabe des Pfads im Link-Tag notwendig, damit war es aber dann auch getan.

Heute werden Favicons auch in größeren Größen unterstützt, beispielsweise von Opera zur Darstellung in der Schnellauswahl. Aber durch diverse Smartphones und Tablets werden jetzt diverse Icon-Größen für Lesezeichen oder für den Homebildschirm benötigt, um das Icon auf dem entsprechenden Gerät gut aussehen zu lassen.

Leider wirkt das alles ziemlich konzeptlos. Mit neuen IOS-Versionen werden neue Formate zulässig, aber auch Windows 8 benötigt für jede Kachelgröße eine Datei mit einer bestimmten Größe, sodass es derweil ziemlich aufwendig ist, alle relevanten Icons abzuspeichern und auch den korrekten HTML-Code zu schreiben, damit jedes Gerät in irgendeiner Weise bedient werden kann.

Meta-Tag Generator war gestern - heute schreit (mir) es danach, einen Generator für all diese Dateien haben zu wollen. Dabei ist dies nicht der erste Generator. Andere Anbieter bieten vergleichbare Tools an, zum Teil sind sie veraltet, dass neue Formate noch nicht berücksichtigt werden. Zum Teil muss man drei verschiedene Generatoren besuchen, einen für Apple Touch Icons, einen zweiten für Windows 8 Tiles, ein dritter für die Favicons...

Das muss doch einfacher gehen. Ein Wochenende, keine Pläne und etwas Geduld haben diesen Generator entstehen lassen. Wichtig, dass möglichst vieles damit erschlagen wird. Es muss einen Upload geben, einen Download mit allen generierten Dateien und ein fertiger Quelltext, den ich nur noch kopieren muss...

Fertig. Und Feedback herzlich willkommen: feedback@web-stuebchen.de.

Vorschau HTML-Code

So sieht der HTML-Code aus, der für die Einbindung der Icons und Favicons notwendig ist. Dieser wird mit dem Download der Grafiken geliefert. Es werden nur die Zeilen generiert, die über die Checkboxen im Upload-Formular ausgewählt werden.

<link rel="shortcut icon" type="image/x-icon" href="/_icons/favicon.ico">
<link rel="icon" type="image/x-icon" href="/_icons/favicon.ico">
<link rel="icon" type="image/gif" href="/_icons/favicon.gif">
<link rel="icon" type="image/png" href="/_icons/favicon.png">
<link rel="apple-touch-icon" href="/_icons/apple-touch-icon.png">
<link rel="apple-touch-icon" href="/_icons/apple-touch-icon-57x57.png" sizes="57x57">
<link rel="apple-touch-icon" href="/_icons/apple-touch-icon-60x60.png" sizes="60x60">
<link rel="apple-touch-icon" href="/_icons/apple-touch-icon-72x72.png" sizes="72x72">
<link rel="apple-touch-icon" href="/_icons/apple-touch-icon-76x76.png" sizes="76x76">
<link rel="apple-touch-icon" href="/_icons/apple-touch-icon-114x114.png" sizes="114x114">
<link rel="apple-touch-icon" href="/_icons/apple-touch-icon-120x120.png" sizes="120x120">
<link rel="apple-touch-icon" href="/_icons/apple-touch-icon-128x128.png" sizes="128x128">
<link rel="apple-touch-icon" href="/_icons/apple-touch-icon-144x144.png" sizes="144x144">
<link rel="apple-touch-icon" href="/_icons/apple-touch-icon-152x152.png" sizes="152x152">
<link rel="apple-touch-icon" href="/_icons/apple-touch-icon-180x180.png" sizes="180x180">
<link rel="apple-touch-icon" href="/_icons/apple-touch-icon-precomposed.png">
<link rel="icon" type="image/png" href="/_icons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/_icons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/_icons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/_icons/favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="/_icons/favicon-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/_icons/favicon-196x196.png" sizes="196x196">
<meta name="msapplication-TileImage" content="/_icons/win8-tile-144x144.png"> 
<meta name="msapplication-TileColor" content="#ffffff"> 
<meta name="msapplication-navbutton-color" content="#ffffff"> 
<meta name="application-name" content="Name der Applikation/Webseite"/> 
<meta name="msapplication-tooltip" content="Name der Applikation/Webseite"/> 
<meta name="apple-mobile-web-app-title" content="Name der Applikation/Webseite"/> 
<meta name="msapplication-starturl" content="http://web-stuebchen.de/"/> 
<meta name="msapplication-square70x70logo" content="/_icons/win8-tile-70x70.png"> 
<meta name="msapplication-square144x144logo" content="/_icons/win8-tile-144x144.png"> 
<meta name="msapplication-square150x150logo" content="/_icons/win8-tile-150x150.png"> 
<meta name="msapplication-wide310x150logo" content="/_icons/win8-tile-310x150.png"> 
<meta name="msapplication-square310x310logo" content="/_icons/win8-tile-310x310.png">