HTML

So passt Du die Browserzeile an den Look Deiner Website an

Kommentare

  1. Avatar von KlausK

    Die Brow­ser­zei­le farb­lich anzu­pas­sen ist eine wirk­lich genia­le Idee! Ich Dan­ke dir für die­sen Tipp.
    Aber wie bekom­me ich mein eige­nes Icon auf die Start­bild­schir­me der Nutzer?
    Als Lese­zei­chen nimmt der Andro­ide ein­fach nur die Far­be und den 1 Buch­sta­ben der Domain 🙁
    Das sieht nicht sehr schön aus. Hast du da viel­leicht eine Idee?

  2. Avatar von Steffen Voß

    Wel­chen Brow­ser nutzt Du? Mit Safa­ri und den Chro­me- basier­ten geht es. Mit Fire­fox offen­bar nicht. Und es könn­te auch davon abhän­gen, wel­che Ober­flä­che Du für Android hast.…

  3. Avatar von Sebastian Müller

    Vor­ab sei gesagt, dass ich aktu­ell der Mei­nung bin, dass Fire­fox das “größ­te“ Favicon als Home­screen Icon nutzt.
    Für iOS und Chro­me habe ich hier eine klei­ne Zusammenfassung:

    <!-- Safari:
    // App Icon -->
    <link rel="apple-touch-icon" href="icon.png">
    <!-- Optional in verschiedenen Auflösungen -->
    <link rel="apple-touch-icon" sizes="152x152" href="icon.png">
    <link rel="apple-touch-icon" sizes="180x180" href="icon-retina.png">
    <link rel="apple-touch-icon" sizes="167x167" href="icon-ipad-retina.png">
    <!-- // Ohne Ecken und Effekte: -->
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="icon.png">
    <!-- Launch icon: -->
    <link rel="apple-touch-startup-image" href="/launch.png">
    <!-- Launch icon title: -->
    <meta name="apple-mobile-web-app-title" content="AppTitle">
    <!-- Browser UI ausblenden -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- Statusbar Farbe ändern: -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- Chrome -->
    <link rel="icon" sizes="152x152" href="icon.png">
    <link rel="icon" sizes="180x180" href="icon_180.png">

    Für Chro­me (außer ziem­lich alten Ver­sio­nen) kannst du das gan­ze über eine manifest.json defi­nie­ren. Dort kannst du auch den Titel usw. definieren.
    Die­se wird dann im Head verlinkt. :
    (https://developer.chrome.com/multidevice/android/installtohomescreen#supporting)

  4. Avatar von Sebastian Müller

    Hmm, das die Tags nicht ange­zeigt wer­den hät­te ich mir den­ken können:
    Ich habe sie hier ein­mal auf­ge­lis­tet: https://codepen.io/waschti87/pen/prpwEV

  5. Avatar von Steffen Voß

    Dan­ke! Ich hab da mal nachgearbeitet.
    (Ich muss mal wie­der den Hin­weis unter dem Kom­men­tar­feld ein­bau­en, wel­che Tags man benut­zen kann.)

  6. Avatar von Steffen Voß

    Word­Press erzeugt die gan­zen Icons inkl. Favicon übri­gens selbst und baut sie ins HTML ein, wenn man über den Cus­to­mi­zer ein Logo hoch­lädt. Das muss das jewei­li­ge The­me natür­lich unterstützen.

  7. Avatar von Marcel
    Marcel

    Goog­le mal nach manifest.json die bie­tet auch eini­ge coo­le Möglichkeiten 🙂

  8. Avatar von KlausK

    Auch wenn es jetzt schon 3 Wochen her ist, woll­te ich noch­mal Dan­ke sagen. Die Bei­trä­ge haben mir sehr gehol­fen alle Wün­sche für die wich­tigs­ten End­ge­rä­te umzusetzen.
    Dabei habe ich gleich noch einen Gene­ra­tor gefun­den, der alle Icons und den Quell­text in einem Rutsch erzeugt: http://web-stuebchen.de
    Und hier noch­mal das Chro­me-Mani­fest samt Bei­spiel­code und Icons auf Git­hub: https://github.com/GoogleChrome/samples/tree/gh-pages/web-application-manifest

  9. Avatar von Susann Franke
    Susann Franke

    Vie­len Dank für den Bei­trag. So konn­te ich mei­nen Feh­ler lösen! 🙂

  10. Avatar von Christopher Hüneke

    Der Bei­trag ist zwar schon etwas älter, fin­de die Infos aber heu­te rele­van­ter denn je. Aus­gie­bi­ge A/​B‑Tests haben gezeigt, dass die farb­li­che Anpas­sung der Tool­bar (unter Berück­sich­ti­gung der wer­be­psy­cho­lo­gi­schen Farb­leh­re) teil­wei­se sehr deut­li­che Aus­wir­kun­gen auf User-Signa­le wie Ver­weil­dau­er, Sei­ten pro Sit­zung und Absprungra­te haben kann. Sogar Kon­ver­sa­ti­ons­ra­ten kön­nen indi­rekt beein­flusst wer­den. Den meis­ten Nut­zern fällt es bewusst gar nicht auf, aber das ganz­heit­li­che­re Gesamt­bild ver­mit­telt auf einer sehr sub­ti­len Ebe­ne mehr Auto­ri­tät und Serio­si­tät. Das Gefühl, man nut­ze eine App, ver­lei­tet den Nut­zer unter­be­wusst, die Web­sei­te län­ger zu benut­zen. Es gibt dem Nut­zer das Gefühl, nach der Goog­ke-Suche „ange­kom­men“ zu sein und nicht wei­ter suchen zu müssen. 

    Somit für mich per­sön­lich einer der am meis­ten unter­be­wer­te­ten CRO- und SEO-Hacks. SEO-Hack, weil User-Signa­le in Zukunft mit hoher Wahr­schein­lich­keit ein immer wich­ti­ger Ran­king­fak­tir für Goog­le & Co sein werden.

    Ergän­zend zu @Sebasian Müller:
    Chro­me nutzt auch das größ­te Icon. Goog­le emp­fiehlt die Abmes­sun­gen 192x192px.

    Lie­be Grüße,
    Chris 

    Quel­le:
    https://developer.chrome.com/blog/support-for-theme-color-in-chrome-39-for-android?hl=de

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert