Wie können Sie das Logo an das Favicon des Browsers anpassen - 16x16px?

Wie bereits erwähnt, müssen Sie das Symbol in der richtigen Größe neu zeichnen.

Ich fand das in Photoshop etwas schwierig, also habe ich ein Bild in voller Größe exportiert und dann den favicon.cc- Generator verwendet, um die Pixel manuell anzupassen. Sie können dies in jedem Programm tun, aber ich finde dieses Tool sehr nützlich.

Wenn Sie sich eine gute Website ansehen, werden Sie feststellen, dass es sich faviconnicht um ihr Logo handelt, sondern um eine winzige Version, die ähnlich genug ist, um genau mit der Website zusammenzupassen.

Der einfachste Weg, den ich gefunden habe, um die Markenbotschaft konsistent im Favicon zu transportieren, ist die Verwendung der beiden auffälligsten Farben oder der Farbgebung des Logos und des Anfangsbuchstabens des Firmennamens. Mit einem einfarbigen einfachen Hintergrund könnten Sie auf einmal zwei Buchstaben haben, wie das SE GD-Favicon.

Als Antwort auf Ihren Kommentar:

Das Problem ist, dass es einen Zug auf dem Logo gibt, der Zug nicht mit [einem] Quadrat dargestellt werden kann, und der Versuch, ihn innerhalb von 16x16 darzustellen, macht [das] Hauptelement zu klein, um einen Sinn zu haben

Ohne weitere Informationen kann ich nur spekulieren; aber bedenke folgendes:

Schauen Sie sich den Zug an, identifizieren Sie die Hauptmerkmale, die seinen Charakter ausmachen. Besonders die Frontform und der Rauch, der herausquillt. Die Verwendung dieser Art von Form würde einen Zug sogar bei 16 x 16 Pixel darstellen .

Ich sage nicht, dass Sie damit einverstanden sind, aber ich bin sicher, dass es einige Eigenschaften gibt, die Sie aus dem Logo extrahieren können, um es in einer winzigen Größe darzustellen.

Nur um zu demonstrieren, dass es möglich ist, ein Favicon mit wenig Nacharbeit und einem automatischen Prozess zu erstellen, ist hier ein Abzeichen, das von einer Gruppe verwendet wird, der ich angehöre. Es ist ein Herz und eine Lilie.

Um das Favicon zu erstellen, habe ich die dünnen Linien in der Fleur-de-lys entfernt und die „Umriss“-Linie dort, wo sie durch die Spitze des Herzens ragt, verdickt. Es hätte etwas dicker sein können, aber ich habe einen weißen Umriss um das Bild herum beibehalten und es funktioniert auf einem farbigen Hintergrund in einer Browser-Tab-Leiste.

Dann habe ich Paint Shop Pro verwendet, um dieses 150 x 150-Bild auf 16 x 16 zu reduzieren, indem ich es in eine 16 x 16-Auswahl eingefügt habe (die vermutlich seinen "Smart Size" -Algorithmus verwendet, was auch immer das ist) und endete mit folgendem:

Diese Methode funktioniert gut für einfache Bilder, und meine ist einfarbig und ziemlich fett. Es funktioniert am besten mit komplexen Bildern und die Ergebnisse können brauchbar sein. Es ist nicht immer notwendig, jeden der 256 Pixel einzeln zu berechnen.

Damit es für ein komplexeres Bild funktioniert, müssen Sie dieses Bild vereinfachen. Das kann so einfach sein wie die Verwendung einer Silhouette in der Hauptfarbe des Hauses.

Generell kann man nichts "nachbearbeiten". Der beste Weg ist, das Lieblingssymbol neu zu erstellen, indem Sie jedes Pixel speziell zeichnen. Der Versuch, ein beliebiges Bild auf ein 16x16-Pixel-Bild zu reduzieren, führt im Wesentlichen zu einem nicht identifizierbaren Fleck.

Dieses Tool ist eine super Zeitersparnis. Versuch es! Es regelt alles für Sie.

Laden Sie Ihr Bild mit einer Größe von etwa 800 x 800 Pixel hoch, damit es schön und gestochen scharf ist.

http://realfavicongenerator.net/

Fügen Sie auch dieses Meta-Tag hinzu, damit Sie Ihr Symbol benennen können, wenn einige auf Ihrem iOS-Gerät gespeichert werden.

<meta name="apple-mobile-web-app-title" content="Website Name">

Ich hoffe, das hilft!