App-Icon HTML?

...komplette Frage anzeigen

5 Antworten

Hallo! Für die Icons verwende ich auf meinen Websites im <head>-Bereich folgende Tags:

  • <link rel="shortcut icon" href="/favicon.ico">

    Größe: 16x16 Pixel - Name sollte favicon.ico sein
    Bild muss im ico-Format sein.
  • <link rel="icon" type="image/png" href="/favicon.png" sizes="32x32"> –––
    Größe: 32x32 px - Name egal, ich empfehle favicon.png.
    Bild muss soweit ich weiß im PNG-Format sein.
  • <link rel="icon" type="image/png" href="/favicon128.png" sizes="128x128"> –––

    Größe: 128x128 px - Ansonsten gleich wie beim 32x32, ich empfehle die Nennung der Größe im Dateinamen wie in meinem Beispiel.
  • <link rel="icon" type="image/png" href="/favicon192.png" sizes="192x192"> –––

    Größe: 192x192 px - Ansonsten gleich wie beim 32x32 & 128x128.
  • <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> –––

    Größe: 180x180 px - Dieses Bild muss auf jeden Fall apple-touch-icon.png heißen und auch im png-Format sein. Soweit ich weiß greift WhatsApp und Instagram etc. darauf zu. Auch einige andere Apps bevorzugen dieses Icon sowie der iOS-Launcher.
  • <meta name="msapplication-TileColor" content="#ffffff"> –––

    Kein Bild! Definiert die Hintergrundfarbe für die Kästchen beim Windows-Phone. Ich habe weiß (Siehe Farbcode oben) genommen, da mein Icon auf weiß am besten aussieht.
  • <meta name="msapplication-TileImage" content="/mstile-144x144.png"> –––

    Größe: 144x144 px - Dateiname sollte beibehalten werden, Bild muss meines Wissens nach im PNG-Format sein.
    Wird verwendet als Bild für Windows Phone-Kästchen beim Startmenü und gehört zum oberen Tag.
  • <meta name="msapplication-square150x150logo" content="/mstile-150x150.png"> –––

    Größe: 150x150 px - Gleich wie beim TileImage, wird auch für einige Windows-Sachen verwendet.

Man sieht, ganz schön viele Tags. Wenigstens klappt es dann auf vielen Plattformen. :)

Noch ein paar nützliche Tags die einbauen kannst, falls deine Seite optimiert für Mobilgeräte (Handys, etc.) ist:

  • <meta name="theme-color" content="#ffffff"> –––

    Definiert bei einigen Browsern am Handy die Farbe des Browsermenüs (z.B. Chrome) wobei im content der HTML-Farbcode steht, im Beispiel: Weiß.
  • <meta name="msapplication-navbutton-color" content="#ffffff"> –––

    Gleich wie oben, nur für den Internet Explorer auf Windows Phones.
  • <meta name="mobile-web-app-capable" content="yes"> –––

    Bestimmt, ob es Browsern (z.B. Chrome) am Handy erlaubt sein soll, die App als Webapp auf den Startscreen zu legen.

Viel Glück! :)

EDIT: GF hat wohl meine Formatierung ein wenig zu Nichte gemacht.

Klingt nach Spaß...

Vielen vielen Dank! Ich werde das alles mal ausprobieren! :D
Wirklich sehr ausführlich und definitiv hilfreich!

Eine Frage hätte ich aber noch: Was ist mit der Farbe des Browswermenüs genau gemeint? Könntest Du dies bitte nochmal genauer ausführen?
Oder anders gefragt: Welche Teile des Browserfensters betrifft das genau? Nur die Suchleiste oder z.B. auch die farbe der Tabs? Was wird damit genau alles gefärbt?

0

Des weiteren habe ich noch eine Frage zu den Speicherpfaden auf dem Server:

Was muss ich bei den einzelnen Dateien (Icons und PNGs) so beachten, was den Speicherort auf dem Server angeht?
Derzeit habe ich ein kleines 16px*16px-Icon in die Webseite integriert, welches in einem der ganzen Unterordner auf dem Server zu finden ist und alles funktioniert einwandfrei. Im Artikel von Selfhtml, den funky49 verlinkt hat, ist jedoch die Rede davon, dass manche der Dateien im Rootverzeichnis (also direkt in " / ") liegen müssen. Wie hast Du das bei Dir gelöst, dass alles funktioniert?

0

Ich habe alle im Rootverzeichnis des Webservers. Würde ich dir auch empfehlen.

0

Also alles direkt in " / ". OK, ich schaue mal, dass ich das bei meinem Server hinbekomme.

Bleibt noch die Frage mit dem Browserfenster (Farbeinstellungen) zu klären. ... Wobei ich glaube verstanden zu haben, worauf Du hinaus willst.


Nochmals veilen vielen Dank! Deine Antwort war wohl bisher die mit Abstand beste Antwort überhaupt! :D

0

Bei den Farbtags wird im Chrome am Handy die obere Leiste (wo die Adressleiste ist) gefärbt. Bis jetzt wird die Technik noch nicht von allen Browsern unterstützt.

0

Danke!

0

Noch einen kurzen Kommentar hinter her für alle, die dies hier lesen, da sie dieselbe Frage haben:

Das Rootverzeichnis muss nicht zwingend der Ordner sein, der z.B. in Filezilla als " / " angezeigt wird! Bei mir war es z.B. der erste Unterordner dessen, in dem auch die HTML-Dokumente liegen.
Wenn Ihr Euch nicht ganz sicher seid, wo Ihr nun also alle Dateien für die obigen Metadaten hinkopieren müsst, dann fügt doch zumindest erst einmal die Metadaten ein und ladet dann die Daten nach und nach an verschiedene Orte auf dem Server hoch. Sobald auf Eurer webseite dann ein Favicon erscheint, sollte alles am richtigen Ort sein.

Wo Ihr es auf jeden Fall versuchen solltet:

  • Ordner, der z.B. in Filezilla als " / " angezeight wird.
  • Ordner mit den HTML-Dokumenten (vor allem der, mit der Startseite, falls Ihr mehrere Ordner mit HTML-Dateien habt)

Bei mir hat auf jeden Fall alles funktioniert und ich möchte mich nochmals herzlichst bedanken!

Allen anderen, die das hier noch vor sich haben wünsche ich viel Spaß und Erfolg hiermit und ich hoffe für diese Leute, dass sie gute Grafikprogramme haben, mit denen sie die ganzen Dateien in guter Qualität erzeugen können!

1

Super! :) Schau dir am besten auch noch das Open Graph Format an und z.B. die Twitter Cards.

0

Interessanterweise ist meine Seite scheinbar so passend programmiert, dass sich die sozialen Netzwerke immer nur den Header als Bild holen. Sollte es mal nötig sein, werde ich das aber mal anwenden, danke.

Übrigens auch danke an regex9 für denselben Hinweis zu einem früheren Zeitpunkt. :D

0

Das lässt sich mit dem Open Graph Protocol realisieren. Dies sind Meta-Angaben, die über Meta-Tags im Header eines HTML-Dokuments aufgelistet werden.

Eine detaillierte Dokumentation dazu gibt es hier: http://ogp.me/

Weitere Artikel:

Twitter hingegen nutzt die Twitter Cards: https://dev.twitter.com/cards/getting-started

Wenn ich das so richtig verstehe, dann muss ich dafür auf der verlinkten Seite die Dateien runterladen, diese dann auf den Server hochladen und dann per Meta-Tags alles in die Webseite einbetten, richtig?

0
@HirnlosOo

Genau. Du musst dein Bild auf deinen Server laden und via Meta-Tag im HTML-Dokument darauf referenzieren.

0

Das Stichwort ist "Favicon", das sollte Dir weiterhelfen:

https://wiki.selfhtml.org/wiki/Grafik/Favicon

Beachte die unterschiedliche Größe der Grafik bei Desktop- und mobilen Geräten

Im head:

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

Ein Favicon habe ich bereits, das ist mir bekannt. Gesucht war mehr etwas, wie es funcky49 vor allem GutefrageNetFun beschrieben haben.

0

Meinst du das touch-icon? Das wird so im head-Bereich der Seite eingebunden:

<link rel="apple-touch-icon-precomposed" type="image/png" href="http://pfad-zu-dem-bild.png" sizes="114x114">

Ja, vermutlich schon. Wenn ich mir die Antworten hier so durchlese dürfte das ein Teil davon sein.

0

Was möchtest Du wissen?