Favinator: Animierte Favicons schnell erstellt

Favinator: Animierte Favicons schnell erstellt

Zuletzt aktualisiert am 4. Dezember 2014 um 0:14

FavinatorDie Erstellung eines Favicons – das sind die kleinen Bildchen, die jeder moderne Browser im Tab links neben dem Titel der Seite anzeigt – ist keine Hexerei. Man muss lediglich ein beliebiges quadratisches Bild auf die Größe von 16×16 Pixeln herunter rechnen, im *.ico-Format unter dem Namen favicon.ico speichern und ins Rootverzeichnis der Seite hochladen. Die meisten Browser zeigen das Bildchen dann standardmäßig und speichern die Ico-Datei auch mit der Bookmark, was die Seite leichter auffindbar macht.

Verzichten sollte auf ein Favicon niemand – die Kunst liegt darin, ein geeignetes Motiv zu finden, das auch bei der winzigen Größe von 16×16 Pixeln noch ausreichend wiedererkennbar ist. Photoshop unterstützt das Ico-Format übrigens nicht, behelfen kann man sich unter anderem mit dem kosten Bildbetrachter Irfan View, der eine entsprechende Exportfunktion besitzt. Wer sich diesen Aufwand nicht antun will, kann stattdessen auch den favinator benutzen: das kostenlose Online-Tool konvertiert jede beliebige Ausgangsgrafik (die natürlich quadratisch sein sollte) zu einem 16×16 Pixel Favicon, das anschließend heruntergeladen und in die eigene Page eingebaut werden kann.

Besonderheit dabei: optional kann ein Text eingetragen werden, der anschließend als animierte Laufschrift durchs Favicon scrollt, Schriftfarbe, -typ und -größe sind dabei allerdings fix eingestellt. Klingt kompliziert, sieht einfach so aus:

animiertes Favicon

Das sorgt für Staunen (oh, ico-Dateien können animiert sein?) und nervt unter Umständen, wenn in der Browser-Tableiste dauernd was blinkt, also sollte man sich den Einsatz der Laufschrift gut überlegen. Moderne Browser zeigen übrigens alle unterstützten Grafikformate (also auch png, jpg, gif) an, größtmögliche Kompatibilität erreicht man allerdings mit dem Ico-Format. Eingebunden wird das Icon mit einem Meta-Tag im Header, einige Browser zeigen es standardmäßig ohnehin an:

<link rel=“shortcut icon“ href=“http://www.meine-domain.de/favicon.png“ type=“image/ico“ />

Ein ausführliches Tutorial rund um das Thema gibt’s hier. Für Konsolenfreunde hab ich noch eine besondere Spezialität gefunden: png2ico konvertiert PNG-Dateien via Kommandozeile (!) ins ICO-Format – Nerd-Prestige-Bonus garantiert.

21 Antworten
  1. Michael@Smileys sagt:

    Sorry, muss das Testen:

    Dieses Blog erlaubt Keywords als Backlinks. Wenn Sie ins Namensfeld username@keyword eingeben, so wird Ihr Keyword anstatt des Usernamens verlinkt. [ia KeywordLuv]

    Antworten
      • ritchie
        ritchie sagt:

        Ja, deswegen hab ich’s noch nicht groß promoted – dieses Problem tritt auf, wenn dein altes Cookie noch gespeichert ist im Zusammehang mit Thread Comment, hab da noch keine befriedigende Lösung gefunden.

        Antworten
  2. Flo@Geschenke sagt:

    sehr praktisch für leute wie mich, dass es solche generatoren gibt :) für meinen blog werd ich das demnächst mal damit in angriff nehmen – allerdings ohne animation, das muss ja irre nerven

    Antworten
    • Anonymous sagt:

      Ja, die Animation find ich auch eher kontraproduktiv – bei mehreren offenen Tabs eine völlig sinnlose Ablenkung.

      Antworten
  3. Maria@Großhandel sagt:

    @Michael:

    Das ist ja ein geiles Plugin… Jetzt hab ich schon das „Nofollow Case by Case“-Plugin installiert – hat einer ’ne Ahnung, ob sich das miteinander verträgt? Oder muss ich es erst deaktivieren und dann KeywordLuv installieren/aktivieren?

    Liebe Grüße

    Maria

    Antworten
  4. Tony sagt:

    Danke sehr hilfreicher Eintrag,

    wenn man nach was sucht findet mans nicht,
    und wenn man spontan nen blog liest findest es einen…
    schon lustig ..

    Antworten
  5. Horst sagt:

    Der Generator ist gut, aber von animierten Favicons würde ich auch Abstand nehmen. Vermutlich stört es weniger andere als mich selbst. :wink:

    Antworten
  6. chris @ partnersuche sagt:

    Cooler Tipp… Aber ich finde ’ne Laufschrift auch ein wenig irritierend.

    Was ich suche, ist ne kostenlose Möglicheit, animierte Favicons zu erstellen. Hat jemand ’nen Tipp?

    Viele Grüße

    chris aus Mönchengladbach

    Antworten
  7. Michael sagt:

    Hi Richie,

    ich wusste gar nicht, dass der Einsatz von animierten Favicons browserabhängig ist. :-/ Ist ja eigentlich nicht so günstig, wenn’s nicht in allen Browsern funktioniert…

    …oder hast Du ’ne Ahnung, ob bei inkompatiblen Browsern alternativ ein nicht-animiertes Favicon dargestellt werden kann (also dann, wenn die animierte Anzeige nicht funzt)?

    mfg Michael

    Antworten
    • ritchie
      ritchie sagt:

      Soweit ich weiß, müsste normalerweise der erste Frame des gif dargestellt werden; würd ich aber sicherheitshalber ausprobieren. Ein zweites Ersatz-Favicon kann man nicht angeben.

      Antworten
  8. Kurt sagt:

    Danke für den Hinweis.
    Um den Nervigkeitsfaktor stark zu verringern, könnte man ja die Animation nur einmal ablaufen lassen – geht das technisch?

    Antworten

Hinterlassen Sie einen Kommentar

Schreiben Sie einen Kommentar

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

Möchten Sie neue Kommentare abonnieren?
Wann möchten Sie Ihre Benachrichtungen erhalten?