Favicon - Größe? Dateityp?

Dieses Thema im Forum "Frontend: HTML, CSS, Grafik, JavaScript, AJAX usw." wurde erstellt von Trap, 28 September 2010.

  1. Trap

    Trap New Member

    Hallöchen zusammen,
    ich hätte da mal eine Frage bezüglich den kleinen süßen Icons, die uns Internetbenutzern täglich in der Favoritenliste das Surfen erleichtern - die Favicons. Man kann ja in der Theorie jede Art von Grafik über den head-Bereich als Favicon einbinden, korrekt? Also auch *.png-Dateien und nicht nur *.ico. Welcher Dateityp hat sich denn da als empfehlenswert bewiesen? Was für Vor- bzw. Nachteile gibt es?
    Weiterhin würde es mich auch interessieren, welche Größe eurer Meinung nach geeigneter für ein Favicon ist. Häufig liest man ja, dass 32 x 32 px am besten sei, an anderer Stelle wird einem aber ein Favicon in den Maßen 16 x 16 px empfohlen, gerade so wie WeWoTas Favicon. Eine wirklich einheitliche Lösung scheint es da nicht zu geben. ?(
    Mein Favicon (Siehe Anhang :p) liegt zurzeit als *.png-Datei in der Größe 200 x 200 vor. Die Transparenz würde ich gerne beibehalten, da es ohne bzw. mit weißem Hintergrund einfach schei ... bescheiden aussieht. Kurz und knackig: Wie kann ich die Grafik am besten als Favicon optimieren?

    Freue mich auf eure Antworten. :)
    Grüße aus Hannover!
    Trap
     

    Anhänge:

  2. rellek

    rellek relativ sensationell Mitarbeiter

    Ein Favicon oben im Browser ist zunächst einmal 16x16px gross.

    Um es einzubinden, gibt es grundsätzlich 2 Möglichkeiten:
    - Man nehme die Datei, konvertiere sie ins .ico-Format und lege sie als "favicon.ico" in den root-Ordner deiner Web-Präsens.
    - Man nehme die Datei, gebe ihr nach Möglichkeit auch 16x16px, aber ein beliebiges Dateiformat und schreibe dieses in den <head>-Bereich deiner Webseite (und zwar jede Seite):
    Code:
    <link rel="shortcut icon" href="<url zum Bild hier>" type="<mime-type>" />
    URL zum Bild kann relativ oder komplett inkl http sein. Der MIME-Typ ist vom Dateiformat abhängig und kann hier nachgeschlagen werden.
    http://de.wikipedia.org/wiki/Liste_von_Dateiendungen

    Wobei das angehängte Bild aus GTA: San Andreas stammt, weshalb ich mit dessen Verwendung vorsichtig wäre. Ja, auch wenns nur 16x16px sind, vgl.

    Edit:
    @Calaelen bei Twitter merkte an, dass viele Browser inzwischen auch 32x32 können und das korrekt skalieren.
    Das Problem dabei ist aber, dass man im Web aufgrund der vielen unterschiedlichen Browser und deren Alter den kleinsten Nenner verwenden sollte, auch wenns unangenehm ist. Wobei man beim Favicon auch ganz gut damit leben kann, wenn nix angezeigt wird.
     
  3. Trap

    Trap New Member

    Hi rellek,
    zunächst erst einmal danke für die rasche Antwort. Wie man ein Favicon einbindet, war mir schon bekannt, es geht mir vielmehr darum, wie ich aus meiner obigen Grafik am besten ein Favicon mache, welches man auch einigermaßen im Browser erkennen kann. Kennt *.ico denn überhaupt Transparenz?
    Nunja, ich verweise im Abschnitt Markenrecht in meinem Impressum auf die Internetpräsenz von Rockstar Games und gebe sie ausdrücklich als Urheber der Grafik an, das Favicon liegt auch auf meinem Webspace. Ich bin zwar weißgott kein Jurist, aber so problematisch sehe ich das nicht.

    P.S.: Das Bild stammt aus GTA IV und nicht aus GTA: SA. :p

    Edit: Danke fürs Nachfragen und für den Link, das klärt schon einmal die Frage nach der Größe so einigermaßen. :D
     
  4. rellek

    rellek relativ sensationell Mitarbeiter

    Jo. Schliesslich ist ja der Papierkorb auf deinem Desktop sogar halbtransparent :) Ist wie bei .gif, du musst eine Farbe als "transparent" festlegen.
    Das ist ziemlich egal, wo das Bild gespeichert wird, der Urheber darf bestimmen, was mit dem Bild gemacht wird und was nicht.
    Mein ich doch. :D
     

Diese Seite empfehlen

  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deinem Erleben anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden