Das FAV-Icon - Mal drüber sprechen

  • Hallo Zetanier,


    ich habe mir eigentlich nie viel Gedanken um das Fav-Icon gemacht. Einfach im Zeta-Layoutfenster eingesetzt und gut war es.


    Jetzt habe ich aber mit einem Kollegen eine kleine Diskussion darüber gehabt, was den die optimale Größe für die Bilddatei sei.


    Also ein png mit 32 x 32Px oder mit 256 x 256Px oder oder oder.


    Und reicht es das Icon nur im Layoutfenster von Zeta einzubinden, oder sollte man es wie nachfolgend händisch im Quelltext einbinden?

    Hierzu natürlich alle 18 Bilddateien mit den unterschiedlichsten Größen ins root- Verzeichnis kopieren.


    Insert the following HTML code between the <head> </head> tags:

    <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">

    <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">

    <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">

    <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">

    <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">

    <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">

    <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">

    <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">

    <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">

    <link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">

    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

    <link rel="manifest" href="/manifest.json">

    <meta name="msapplication-TileColor" content="#ffffff">

    <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">

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



    Wie macht man es nun korrekt? Wie macht Ihr das?


    VG Thomas

  • Moin,


    bin auch gerade da dran. Als Apple-User kenne ich diese großen Symbole schon länger - vom iPad zb im Browser-Lesezeichen/Favoriten-Menü.

    Dort finde ich es schon wichtig das ein vernünftiges Symbol erreichbar ist.


    Laut Anleitung unter Favicon-generator.org muss dein Code in den Head und alle generierten Dateien in das "Wurzelverzeichnis" deiner Webseite - also ganz nach vorne :D


    Ich bin mir grade nicht ganz im klaren wo ich das einbauen kann, finde das aber noch und poste das dann hier


    lg

    Ich nutze ZP Version 15.4.1 - Windoof 10 & OSX
    iMac 27" 32GB | Acer Predator 17" 16GB | RTX2060

  • ### GELÖST ###


    Läuft.


    Bevor ihr irgendetwas ausprobiert: BITTE BACKUP ERSTELLEN!!


    Setzen wir voraus ihr nutzt den Favinvon-Generator unter

    http://favicon-generator.org


    Folgt dort den Anweisungen, ladet das erhaltene ZIP herunter und dieses dann in die erste Ebene eurer Webseite (Root-Verzeichnis).

    Dort entpacken (nicht in ein Verzeichnis entpacken!)


    Den auf Favicon-generator.org erhaltenen Code bindet ihr als globales Attribut ein (additional_meta, ist vordefiniert, bei mir ohne Wert)
    Danke an Stefan, siehe nächsten Kommentar


    Fertig.


    Ich hoffe das ich dem einen oder anderen damit helfen konnte. Wer Probleme hat kann hier gerne fragen


    Ob das alles HTML-Konform ist weiß ich nicht, es läuft :thumbup:


    Danke! Muss mal n fettes Lob hier lassen für den großartigen Support vom ZP-Team!



    Folgt bitte Stefans Anweisung im nächsten Kommentar!!!

    Ich nutze ZP Version 15.4.1 - Windoof 10 & OSX
    iMac 27" 32GB | Acer Predator 17" 16GB | RTX2060