So erstellen Sie ein Favicon für die Site: Nützliche Tipps und Services

  1. Wie erstelle ich ein Favicon?
  2. Wie erstelle ich ein Favicon in Photoshop?
  3. So speichern Sie ein Favicon
  4. So fügen Sie eine Favicon-Site ein
  5. So ersetzen Sie Favicon
  6. So erstellen Sie komplexere Favoriten

Es ist schwer zu erraten, was ein Favicon ist, wenn Sie dieses Wort zum ersten Mal hören. Dies ist ein Miniatursymbol , das auf den Registerkarten von Browsern, in Adresszeilen und in anderen Bereichen angezeigt wird, abhängig vom verwendeten Betriebssystem und dem Internetbrowser. Es kann sicher als eines der komplexesten und launischsten Elemente im Website-Design bezeichnet werden.

Das Erstellen eines guten Favicons ist ziemlich schwierig, da das Symbol klein ist, es klar sein und etwas anzeigen sollte, das mit Ihrer Site zusammenhängt
Das Erstellen eines guten Favicons ist ziemlich schwierig, da das Symbol klein ist, es klar sein und etwas anzeigen sollte, das mit Ihrer Site zusammenhängt. Das Erstellen eines Favicons, das mit allen gängigen Browsern kompatibel ist, kann ebenfalls eine entmutigende Aufgabe sein. In diesem Artikel werden wir uns mit allen komplexen Aspekten seiner Entstehung befassen. Wenn Sie auch ein Logo benötigen, dann haben wir ein Artikel wie es geht.

Wie erstelle ich ein Favicon?

Beginnen wir mit dem Design des Favicons. Gutes Design sollte trotz seiner Kompaktheit die Essenz Ihrer Website widerspiegeln und ein organischer Bestandteil der Corporate Identity sein. In der Regel ist das Symbol ein grafisches Zeichen (Symbol) eines Unternehmens und kein ganzes Logo (Symbol, Text und Slogan).

Als Favicon verwenden diese Websites ihre Symbole (oder Bilder in ihrer Nähe) Als Favicon verwenden diese Websites ihre Symbole (oder Bilder in ihrer Nähe).

Der Text im Favicon sollte nicht verwendet werden, da dieser Text aufgrund der geringen Bildgröße nicht lesbar ist. Die einzigen Ausnahmen von dieser Regel sind weltbekannte Textzeichen, die automatisch einer bestimmten Marke zugeordnet werden. Beispielsweise hinterließ die Online-Ressource Wikipedia auf dem Favicon den Großbuchstaben "W" und auf Facebook den Buchstaben "F".

Auf diesen Favoriten befinden sich Buchstaben, die stark mit einer bestimmten Marke verbunden sind
Auf diesen Favoriten befinden sich Buchstaben, die stark mit einer bestimmten Marke verbunden sind. Zum Beispiel verwendet Facebook sein grafisches Zeichen. Beachten Sie auch, dass auf dem Disney-Bild Pixel sichtbar sind. Dies liegt daran, dass der Screenshot auf einem Retina-Display aufgenommen wurde, das mit 16 × 16-Symbolen kompatibel ist, während Websites 32 × 32-Symbole verwenden.

Da Favicons kleine Bilder sind, spielt jedes Pixel eine wichtige Rolle. Manchmal werden nach dem Verkleinern des Logos einzelne Pixel sichtbar, wodurch das Bild „unscharf“ wird. Um Klarheit zu erreichen, müssen Sie das Symbol auf Pixelebene bearbeiten.

Um dies zu vermeiden, müssen Sie die Größe des Logos mithilfe spezieller Editoren wie Photoshop oder GIMP ändern
Um dies zu vermeiden, müssen Sie die Größe des Logos mithilfe spezieller Editoren wie Photoshop oder GIMP ändern. Zuerst müssen Sie die Größe des Bildes auf 64x64 Pixel reduzieren (dies ist das Favicon mit der größten Größe). Dann müssen Sie jedes Pixel mit dem Bleistift-Werkzeug bearbeiten, bis das Bild klar ist. Dies ist ein mühsamer Prozess, aber das Ergebnis ist es wert. Wenn das Favicon 64x64 bereit ist, müssen Sie den gleichen Job mit dem Bild von 16 × 16, 24 × 24 und 32 × 32 Pixel ausführen. So viele Größen, die Sie benötigen, um ein Bild korrekt in allen Browsern und Gadgets anzuzeigen:

  • 64x64 - Lesezeichen für Safari-Browser;
  • 32x32 - hochauflösende Displays (Retina);
  • 24x24 - Lesezeichen für Internet Explorer und MicroSoft Edge;
  • 16x16 - Google Chrome und andere Browser.

Wie erstelle ich ein Favicon in Photoshop?

Zuerst müssen Sie einige Leinwände mit den oben angegebenen Abmessungen erstellen.

Dann müssen Sie der Leinwand ein Symbol, einen Buchstaben oder ein anderes Bild hinzufügen
Dann müssen Sie der Leinwand ein Symbol, einen Buchstaben oder ein anderes Bild hinzufügen.

Dann müssen Sie der Leinwand ein Symbol, einen Buchstaben oder ein anderes Bild hinzufügen

So speichern Sie ein Favicon

Nachdem Sie Symbole unterschiedlicher Größe erstellt haben, speichern Sie sie als transparente PNG-Datei (24 Bit). In Photoshop können Sie die Funktion "Für Web speichern" verwenden, die im Menü "Datei" verfügbar ist. Dann müssen Sie alle PNG-Dateien in einer ICO-Datei zusammenführen. Sie können sowohl PNG-Dateien als auch ICO-Dateien gleichzeitig verwenden, aber häufig bevorzugen auch Safari und Chrome nur das ICO-Format. Meiner Meinung nach ist es einfacher, eine ICO-Datei zu erstellen. Das ICO-Format ist nicht sehr verbreitet, aber zum Glück gibt es eine Reihe von Tools, mit denen Sie Ihre Dateien in dieses Format konvertieren können. Zu diesem Zweck bevorzuge ich zu verwenden X-Icon Editor . Dies ist ein kostenloser Onlinedienst, der heruntergeladene Bilder sofort in eine ICO-Datei konvertiert. Anschließend können Sie sie herunterladen. Dies ist nicht kompliziert, folgen Sie einfach den Anweisungen auf der Website. Wenn Sie sich als verzweifelte Person betrachten, können Sie mit dem Pixeleditor dieses Dienstes experimentieren und selbst ein Favicon zeichnen. (Obwohl ich Favicons lieber in einem professionelleren Editor bearbeite, zum Beispiel in Photoshop).

Wenn Sie Ihre PNG-Bilder in den X-Icon Editor hochladen, erhalten Sie am Ausgang eine ICO-Datei
Wenn Sie Ihre PNG-Bilder in den X-Icon Editor hochladen, erhalten Sie am Ausgang eine ICO-Datei.

So fügen Sie eine Favicon-Site ein

Sie haben also bereits eine ICO-Datei. Jetzt müssen Sie es der Website hinzufügen. Benennen Sie die Datei in favicon.ico um und platzieren Sie sie im Stammverzeichnis Ihrer Website (in dem die Datei index.html und andere Standarddateien gespeichert sind). Nach dem erfolgreichen Hinzufügen können Sie es auf Ihrer Website .com / favicon.ico anzeigen. Fast alle Browser suchen nach der Datei favicon.ico im Stammverzeichnis. Daher ist es wichtig, dass Sie das Favicon in diesem Ordner herunterladen. Aus Gründen der Kompatibilität mit verschiedenen Browsern sollten keine HTML-Elemente oder Links hinzugefügt werden, die den Speicherort angeben. Dieser Trick funktioniert für alle Browser bis IE6. Wenn Sie eine WordPress-Site haben, können Sie in vielen Themes ein Favicon in den Theme-Einstellungen hinzufügen. Diese Methode kann auch verwendet werden.

So ersetzen Sie Favicon

Aus irgendeinem unerklärlichen Grund fügen Browser es dem Cache hinzu. Wenn Sie eine neue ICO-Datei hochladen, zeigt der Browser möglicherweise weiterhin Ihr altes Favicon an. Was ist in diesem Fall zu tun? Sie können eine temporäre HTML-Datei hinzufügen, die den Speicherort Ihres neuen Favicons angibt. Außerdem müssen Sie am Ende der URL eine kurze Abfragezeichenfolge hinzufügen:

<link rel = "shortcut icon" href = "Ihre Website .com / favicon.ico? v = 2 ″ />

Der Browser glaubt also, dass dies eine eindeutige URL ist, und ist daher gezwungen, ein neues Symbol anzuzeigen. Nach dem Aktualisieren des Favicons kann dieser HTML-Code vollständig entfernt werden. Wenn Sie Änderungen am Favicon vornehmen müssen, verwenden Sie dieselbe Technik, indem Sie die Zahl nach dem "v" in der Abfragezeichenfolge jedes Mal erhöhen. Auf diese Weise erkennt der Browser diese URL jedes Mal als eindeutig und zeigt ihre neue Version an. Vergessen Sie nicht, den HTML-Code nach einem erfolgreichen Update zu löschen.

So erstellen Sie komplexere Favoriten

In diesem Artikel wollte ich einen universellen und einfachen Weg beschreiben, um Favoriten zu erstellen, die auf praktisch jeder Plattform funktionieren. Bei Webdesign und -entwicklung sind der Perfektion jedoch keine Grenzen gesetzt. Wenn Sie lernen möchten, wie Sie komplexere Symbole erstellen, können Sie versuchen, den Dienst zu verwenden favico.js . Hiermit können Sie dynamische Bilder mit unterschiedlicher Anzahl erstellen. Dank dieses Symbols können Sie die Anzahl der ungelesenen Nachrichten sehen, auch wenn die entsprechende Registerkarte nicht aktiv ist. Wenn Sie animierte Favicons online erstellen möchten, können Sie versuchen, einen Favicon-Generator zu verwenden favicon.cc .

Weitere Online-Generatoren finden Sie hier .

Wenn Sie Ihre Tipps zum Erstellen von Favoriten teilen oder eine Frage stellen möchten, warte ich in den Kommentaren auf Sie!

Wie erstelle ich ein Favicon?
Wie erstelle ich ein Favicon in Photoshop?
Wie erstelle ich ein Favicon?
Wie erstelle ich ein Favicon in Photoshop?
Was ist in diesem Fall zu tun?
Ico?

Добро пожаловать , Гость !

Мы настоятельно рекомендуем Вам зарегистрироваться, если вы ещё этого не сделали. регистрация откроет Вам новые функции.

Войти или Зарегистрироваться

www.silvio-berluskoni.ru © Все права защищены © 2016.