WebClip Icon, das neue Favicon

bueltge.de [by:ltge.de] wird von Frank Bültge geführt, administriert und gestaltet. Alle Inhalte sind persönlich von mir ausgewählt und erstellt, nach bestem Gewissen und Können, was die Möglichkeit von Fehlern nicht ausschließt.

Kommentare

  
  1. tboley sagt:

    Hehe, das Tutorial kommt für mich zu spät (wie man an wildbits.de feststellen kann)...

    Hauptsächlich verwende ich es wohl selber in Form eines Bookmarklets fürs Backend von WP, denn bekanntlich bloggen ich ja schon mal mobil 😉

  2. Lars sagt:

    Vielen Dank für den Beitrag. Aber was mache ich, wenn ich WordPress MU nutze und für die Unterseiten unterschiedliche Icons nutzen möchte? Die Frage gilt übrigens genauso für das Favicon. Geht da was?

    Viele Grüße
    Lars

  3. Ja, geht.
    Man kann das/die Icon/s auch an anderer Stelle ablegen, Hauptsache die link-Verknüpfung stimmt.
    In's root legt es man nur, für Browser, die mit dem link-Tag bzw. rel-Attribut nix anfangen können.

  4. palindrom sagt:

    Danke einmal mehr für eine klare und verständliche Anleitung! (Habe ich natürlich gleich einmal eingbaut) Aber gibt's denn da irgendwo oder wie im Netz eine Möglichkeit das ganze mal zu testen, so ohne Touch? Es soll da ja tatsächlich Menschen geben, die keinen haben 😉
    Beste Grüße
    p.

  5. Ich habe auch keinen, Vertauen ist gut und ausreichend. Aber wenn mal ein wenig wartet und sicht, dann findet man sicher einen Online-Tester.

  6. Matthias sagt:

    Übrigens kann man auch auf den link-tag verzichten. Wenn die Datei im Root-Verzeichnis liegt und den richtigen Namen trägt finden iPhone und iPod sie von allein. Den link im Head-Element benötigt man nur wenn man ein anderes Touch-Icon auf bestimmten Unterseiten haben möchte. Auch dann sollte die Icons im Root-Verzeichnis ablegen z.B. als custom-icon.png. Und natürlich den link entsprechend anpassen.

  7. Marc sagt:

    Finde ich sehr interessant. Ich frage mich nur, weshalb man 60 Pixel nehmen soll und eben nicht die 57. Bei den 3 Pixeln un der daraus resultierenden, ungeraden prozentualen Skalierung rechne ich hier mit unschärfe, usw.

  8. Weil das Bild verändert/beeinflusst wird. Es werden Rundungen und Glanzeffekt hinzugefügt und dabei aus den 57px interpoliert, mit 60px ist es wohl besser. Ich habe es aber nie geprüft, dazu verweise ich auf Suchen.

  9. Jens sagt:

    Das ist echt cool. Werd das gleich nächste Woche mal ausprobieren und dann mit meinem Touch prüfen 😉

    "Übrigens kann man auch auf den link-tag verzichten. Wenn die Datei im Root-Verzeichnis liegt und den richtigen Namen trägt finden iPhone und iPod sie von allein"
    -> Das wäre natürlich noch besser, noch weniger Quelltext usw. Werde ich erst ausprobieren ^^

    DANKE FÜR DEN BEITRAG =)

  10. Jens sagt:

    Sorry für Doppelpost, aber ich habs ausprobiert ^^
    Es geht auch, wenn man nur die Datei "apple-touch-icon.png" ins Root Verzeichnis legt, wie Matthias schon anmerkte!

    Übrigens: Dein Favicon würde glaub ich besser aussehen, wie auf dem oberen Bild (mit der Schrift in der Mitte des Bildes. So sieht das irgendwie ein bisschen komisch aus auf dem Ipod, weil da dann auch 3 mal untereinander bueltge steht. So, wie auf dem Bild mit dem Iphone schauts besser aus, find ich...ist aber Geschmackssache 🙂

  11. k. sagt:

    Was ist denn daran cool und toll?
    1. Gibts schon Favicons, die funktionieren gut und viele Seiten haben sie. Warum wird jetzt ein neuer Apple-Pseudo-Standard gemacht der eigentlich genau das gleiche ist?

    2. Warum pfuscht Apple in _meiner_ Grafik rum?
    "Man muss im übrigen sich nicht die Mühe machen, das ganze auch im „Glanzlook“ zu erstellen"

    kann mir ja mangels iPhone nichtmal ansehen wie das ausschaut. Nun soll ich es a) unterstützen und b) weiß nichtmal, was der Besucher sieht weil Apple irgendwelche Effekte auf mein Design anwendet. Was ist wenn ich selbst einen Glanzeffekt draufmache? Überstrahlt dann alles?
    Was ist wenn andere Hersteller das WebClip Icon nutzen? Machen die dann auch Effekte drüber? Sehen die genauso aus? Garantiert nicht. Wird dann überall was anderes.

    Back to 1995 - danke Apple.

  12. Mathias sagt:

    Nettes Tutorial. Gleich gebookmarkt und werde es mal, wenn ich etwas mehr Zeit habe probieren.

  13. datenkind sagt:

    So, leider etwas (sehr) spät, da die Kommentare ja gesperrt waren ... 😉

    Ich habe dein Webclip mal bei mir auf den Home-Screen meines iPhones gepackt, allerdings ist es abgeschnitten, weil halt die zwei Zeilen recht weit unten liegen.

    Hier mal ein Screenshot:
    http://www.datenkind.de/iphone/IMG_0003.jpg

    k.: Naja, man kann’s auch übertreiben. Apple versucht eine homogene Erscheinung der Apps zu erreichen und nimmt dem Entwickler einige Handgriffe ab. Ich seh da jetzt eigentlich keine großen Probleme drin. Und wenn man auf der Basis von 64x64 Pixeln für Favicons arbeitet, ist das auch kein Beinbruch.
    Und zwingen tut dich schon gar keiner.

  14. @datenkind: Danke für den Screenshot, werde mal abändern bei Gelegenheit.

  15. k. sagt:

    @datenkind:
    > Apple versucht eine homogene Erscheinung der Apps zu erreichen

    Haben wir doch längst? favicon nennt sich das und die gibts seit 1999.
    Dachte heutzutage interessiert man sich für Webstandards. :-/

  16. datenkind sagt:

    Ja sicher, geb ich dir vollkommen Recht. Jedoch nützt ein (oftmals) nur 16x16-Px-Bild nichts Viele wissen ja nicht mal, dass man Multi-Resolution-Favicons erstellen kann. Apples Favicon besteht z. B. aus vier Layern mit jeweils 8/24 Bit (uh, glaub ich) in 16/32er Auflösung. Selbst das wäre Pixelmatsch für’s iPhone/touch.
    Und ja, ich interessiere mich durchaus für Webstandards, schon allein von Berufswegen. 😉 Betrachten wir halt das Webclip als einen Prototyp des „so kann’s halt auch gehen“-Grundsatz. 😉

  17. Jürgen Siebert sagt:

    Die Umwandlung eines Icon-Artworks ist Apples Geheimnis: es wird abgeschnitten, gedehnt und Elemente verschwimmen. Wir haben umfangreiche Experimente mit Testbildern durchgeführt und eine Methode gefunden, wie man ein 100% sauberes Webclip-Icon erstellen kann:

    http://www.fontblog.de/how-to-make-a-proper-iphone-icon#comments

  18. Martin sagt:

    Was soll denn das type="image/x-icon" im Beispiel, obwohl es offensichtlich ein PNG ist? Da sollte es image/png sein. (Für das ICO-Format ist übrigens image/vnd.microsoft.icon richtig.)

Trackbacks

  1. [...] mit denen man Favoriten auf iPod Touch und iPhone visualisieren kann. Wie man dieser erstellt hat bueltge.de sehr schön [...]

  2. [...] bueltge.de [by:ltge.de] wrote an interesting post today on WebClip Icon, das neue FaviconHere’s a quick excerpt Das Web wird mobiler und Apple hat trägt mit der Einführung des iPhone und iPod touch sicher dazu bei. Allerdings führt Apple damit auch eine neue Möglichkeit der Iconablage ein, denn das Favicon ist nicht von Apple als Idetifizierungs-Icon genutzt worden. Die Favicons haben sich durchgesetzt und ist einfach und schön, wenn man im Browser etc. die Seite schon an dieser kleinen Spielerei erkennt. Nun soll aber auch auf Apples Produkten eine Wiedererkennung mittels Icon funktionieren und desh [...]

  3. [...] Besucher die mich auf ihrem iPhone bookmarken (schönes denglisch), habe ich mit Hilfe der Anleitung von Frank ein eigenes Icon spendiert. Noch ein Favicon das die Welt nicht [...]

© 2016, since 2005 bueltge.de [by:ltge.de] · Theme is built by ThemeShift