Ein Favicon ist das coole kleine Bild neben Ihrer Adressleiste in Ihrem Browser. Dies ist es, was Ihre Website im Lesezeichen-Tab auszeichnet und zur Steigerung der Markenbekanntheit verwendet werden kann. Wenn Sie eine Website haben, aber noch nie daran gedacht haben, ein Favicon zu erstellen, sollten Sie Ihre Entscheidung überdenken. Softwareentwickler verwenden zunehmend Favicons für verschiedene Aspekte ihrer Anwendungen, wie z. B. Startbildschirmsymbole auf Tablets. Glücklicherweise kann fast jeder ein Favicon entwerfen, erstellen und implementieren, wenn er die richtigen Schritte befolgt.
Schritte
Methode 1 von 3: Entwerfen Sie Ihr Favicon
Schritt 1. Erstellen Sie ein Favicon, das Ihre Website repräsentiert
Die Art der Website, die Sie haben, sollte das Aussehen Ihres Favicon bestimmen. Versuchen Sie, etwas zu entwerfen, das Ihrem Markenimage entspricht und für die Menschen erkennbar und einprägsam ist. Ihr Favicon ist das Erste, was die Leute sehen, wenn sie die Registerkarten in ihrem Browser betrachten, und erscheint auch in den Lesezeichen der Leute.
- Wenn Sie beispielsweise eine Lebensmittel-Website haben, kann die Auswahl eines Favicons, das ein Obst oder Gemüse als Design hat, es einprägsamer machen.
- Wenn Ihre Website für eine Anwaltskanzlei oder eine Investmentgesellschaft bestimmt ist, ist ein traditionelles und elegantes Favicon am besten geeignet.
- Wenn sich Ihre Website an jüngere Leute richtet, versuchen Sie, ein verspieltes und farbenfrohes Favicon zu erstellen.
Schritt 2. Entscheiden Sie, ob Sie einen transparenten Hintergrund wünschen
Wenn Sie keinen Hintergrund angeben, wird er weiß ausgefüllt, was möglicherweise nicht zu Ihrer Marke passt. Ein transparenter Hintergrund nimmt die Farbe des Browsers der Person an und sieht in einigen Fällen schlanker aus. In anderen Fällen lässt eine Farbe für den Hintergrund die Buchstaben oder Grafiken im Vordergrund hervortreten. Entscheiden Sie, was für Ihr Design am besten geeignet ist, und behalten Sie es bei der Erstellung im Hinterkopf.
Das einfachste Favicon ist ein 16x16-Quadrat und hat eine Hintergrundfarbe
Schritt 3. Erstellen Sie ein leicht lesbares Favicon
Da das von Ihnen verwendete Favicon-Image klein ist, ist es wichtig, dass Sie Ihre Marke vermitteln können, ohne Ihre Besucher zu verwirren. Ein schwer lesbares Favicon hinterlässt einen negativen Eindruck und kann beim Besucher Fragen zur Qualität der von Ihnen erbrachten Arbeit aufwerfen. Zu komplexe Bilder und Logos sehen nicht gut aus, wenn sie auf 16x16 oder 32x32 Pixel verkleinert werden.
- Wenn Ihr bestehendes Logo zu kompliziert ist, können Sie es mit Taktiken vereinfachen, damit es in Favicon-Größe erkennbar ist. Verwenden Sie Initialen, anstatt den gesamten Firmennamen anzuzeigen, oder entwerfen Sie ein einfaches Symbol, anstatt ein Bild zu verwenden.
- Wenn Sie bereits ein einfaches Logo haben, können Sie das Bild verkleinern und als Ihr Favicon festlegen. Möglicherweise müssen Sie es ändern, bevor Sie es in eine Symboldatei konvertieren.
- Sie können auch ein Bild eines Objekts verwenden, das das allgemeine Thema Ihrer Site beschreibt.
Schritt 4. Erstellen Sie ein ästhetisch ansprechendes Favicon
Die Struktur Ihres Favicons wird als Form bezeichnet. Favicons nehmen in der Regel Formen wie einen Kreis oder ein Quadrat an. Wenn Sie Ihr Favicon entwerfen, ist es im Allgemeinen besser, wenn es in eine dieser Grundformen passt, da Freiformformen bei 16 x 16 Pixeln oft verwirren oder verwirren können. Ein weiterer wichtiger Aspekt Ihres Designs ist die ästhetische Einheit. Ästhetische Einheit umfasst die Details und Größen verschiedener Komponenten in Ihrem Favicon und wie Ihr Favicon ausbalanciert ist. Je einheitlicher die Details, desto zusammenhängender wird Ihr Favicon aussehen. Beispielsweise ist die Verwendung verschiedener Schriftarten oder -größen in Ihrem Favicon nicht angenehm für das Auge und kann dazu führen, dass Ihr Favicon verwirrt oder unordentlich aussieht.
- Ein weiteres Beispiel für ästhetische Einheit ist die Beibehaltung abgerundeter Ecken in den Formen in Ihrem Favicon.
- Ein gutes Beispiel für ein Icon, das seine Form geändert hat, ist das Favicon von Google. Es hat sich von einem Quadrat zu einem Kreis geändert.
Schritt 5. Verwenden Sie Farben, die zu Ihrer Marke passen
Wenn Sie Ihr Favicon erstellen, sollten Sie es in 8 Bit (256 Farben) oder 24 Bit (16,7 Millionen Farben) Farbtiefe erstellen, da dies in modernen Browsern funktioniert. Stellen Sie sicher, dass die von Ihnen ausgewählten Farben an anderer Stelle auf Ihrer Website zu finden sind oder in irgendeiner Weise mit Ihrer Marke verbunden sind. Ein Favicon mit Farben, die nicht auf Ihrer Website, Ihrem Logo oder Ihren Anwendungen zu finden sind, wird nicht in Erinnerung bleiben und die Leute können das Symbol nicht mit Ihrer Marke in Verbindung bringen.
- Einige kreative Anwendungen der Favicon-Farbe umfassen GitHub, das die Farben je nach Systemstatus ändert, und Trello, das sich je nach Hintergrundfarbe ändert.
- Die am häufigsten verwendeten Farben in Favicons sind Rot und Blau.
Schritt 6. Berücksichtigen Sie Ihr Publikum, wenn Sie ein Favicon entwerfen
Abgesehen von der Identifizierung Ihrer Marke muss Ihr Favicon für Ihre Besucher ansprechend aussehen. Menschen mit unterschiedlichen Geschmäckern, Interessen und gesellschaftlichen Normen werden unterschiedliche Ikonologien aus unterschiedlichen Perspektiven betrachten. In unserer Gesellschaft gibt es kulturelle Unterschiede, die das Publikum, das Sie anziehen möchten, verwirren oder abstoßen können.
Mac Os X verwendet beispielsweise einen Stempel, der ein universelles Symbol für Post ist. Die Verwendung eines Postfachs wäre nicht so effektiv, da Postfächer in verschiedenen Teilen der Welt variieren
Schritt 7. Holen Sie die Meinung von Freunden und Kollegen ein
Obwohl es nicht unglaublich grafisch intensiv ist, ist ein Favicon ein wichtiger Bestandteil Ihrer Marke. Denken Sie beispielsweise an Ihre Lieblingswebsites wie Twitter, Gmail, Facebook oder wikiHow und wie sehr Sie das Favicon mit der Marke verbinden. Wenn Sie kein gutes Auge für Design haben oder nicht wissen, welche Art von Design Sie für Ihre Website haben sollten, wenden Sie sich an Freunde, die ein Auge für Design haben oder im Grafikdesign arbeiten.
- Fragen Sie in Ihrem Freundesnetzwerk nach, ob jemand kostenlos Design-Beratung geben kann.
- Größere Unternehmen haben eigene Grafikdesigner, die das Favicon-Image erstellen können.
Methode 2 von 3: Erstellen Sie Ihr Favicon
Schritt 1. Verwenden Sie eine Fotobearbeitungssoftware, um Ihr Favicon zu erstellen
Sie können Bildbearbeitungsprogramme wie Adobe Photoshop oder Illustrator verwenden, um das Bild für Ihr Favicon zu erstellen. Mit diesen Softwareanwendungen können Sie auch die Größe ändern und das Bild im richtigen Format exportieren. Einige Software ermöglicht es Ihnen, Ihr Favicon von Hand zu erstellen.
- Es gibt auch Favicon-spezifische Bearbeitungsprogramme, die Sie online finden können.
- Verwenden Sie eine Suchmaschine und geben Sie "Favicon-Editoren" ein.
- Stellen Sie die Leinwandgröße 512 x 512 Pixel ein, da diese Zahl auf die meisten anwendbaren Favicon-Größen aufgeteilt wird und immer noch groß genug ist, damit Sie sie effektiv bearbeiten können.
- Andere beliebte Fotobearbeitungsprogramme sind GIMP, PhotoScape und Paint. NET.
- Wenn Sie diese Software verwenden, können Sie die.ico-Dateien nicht direkt bearbeiten, aber Sie können.png-,.jpg- oder.gif-Dateien verwenden und diese später konvertieren.
Schritt 2. Ändern Sie die Größe und speichern Sie Ihr Favicon
32 x 32 px ist die Größe von Windows-Desktop-Elementen, während 16 x 16 px die Größe der Favicons auf der Registerkarte Ihres Browsers ist. Nachdem Sie Ihr Favicon in einem größeren Format erstellt haben, ist es wichtig, seine Größe zu reduzieren, damit Sie sehen können, wie es in den Browsern der Benutzer aussehen wird. Wenn es unlesbar oder ästhetisch nicht ansprechend ist, beginnen Sie mit Ihrem ursprünglichen Design von vorne. Denken Sie über die Plattformen nach, auf denen Ihre Website oder Anwendung am wahrscheinlichsten verwendet wird, und erstellen Sie dann ein Favicon, das alle Ihre Grundlagen abdeckt.
- Es ist wichtig zu beachten, dass unterschiedliche Hardware und Software unterschiedliche Favicon-Größen verwenden.
- Einige andere Favicon-Größen umfassen 57 x 57 Pixel für den standardmäßigen iOS-Startbildschirm, 72 x 72 Pixel für das iPad, 96 x 96 Pixel für Google TV, 128 x 128 Pixel für den Chrome Web Store und 195 x 195 Pixel für die Opera-Kurzwahl.
- Wenn Sie alle Ihre Grundlagen abdecken möchten, können Sie Versionen Ihres Favicons in jeder dieser Größen erstellen.
- Speichern Sie separate Versionen Ihres Favicons, damit Sie Ihre geleistete Arbeit nicht verlieren.
Schritt 3. Kombinieren Sie Ihre Dateien mit einem Konverter
Das Tolle an.ico-Dateien ist, dass Sie mehr als eine Datei kombinieren können, um sie zu erstellen. Dies ist nützlich, da verschiedene Browser und Software ein unterschiedlich großes Favicon benötigen. Um sicherzustellen, dass Ihr Favicon auf allen verschiedenen Plattformen gut aussieht, konvertieren Sie Ihre Dateien mit einem Online-Konverter. Geben Sie "Icon Converter" in Ihre bevorzugte Suchmaschine ein, um kostenlose Online-Anwendungen dafür zu finden. Speichern Sie die zusammengeführte Datei als "favicon.ico".
- Sie können auch ein Programm wie GIMP mit einer integrierten Funktion verwenden oder ein Plugin namens ICO FORMAT in Adobe Photoshop herunterladen.
- Erstellen Sie einen neuen Ordner, damit Sie neue Favicons oder laufende Arbeiten speichern können.
- Geben Sie ".ico-Konverter" oder "Favicon-Generator" in eine Suchmaschine ein, um verschiedene Tools zu finden, die Sie verwenden können.
Methode 3 von 3: Implementieren Ihres Favicon
Schritt 1. Laden Sie Ihr Favicon hoch, wenn Sie einen Website-Editor verwenden
Viele Website-Editoren verfügen über ein integriertes Formular, mit dem Sie Ihr Favicon automatisch auf Ihre Website hochladen können. Wenn Sie einen Website-Editor verwenden, der dies integriert hat, suchen Sie im Einstellungsmenü Ihrer Website nach Optionen, die "Favicon hochladen" oder "Favicon hinzufügen" sagen. Wählen Sie Ihre favicon.ico-Datei aus und laden Sie sie auf Ihre Site hoch.
Wenn Sie in Ihrem Website-Editor keinen Ort zum Hochladen Ihres Favicons finden, müssen Sie dies manuell tun
Schritt 2. Laden Sie die Datei in das Stammverzeichnis Ihrer Site hoch
Wenn Ihre Website File Transfer Protocol oder FTP unterstützt, können Sie Ihren FTP-Client verwenden, um Ihre neue favicon.icon-Datei in Ihr Stammverzeichnis (index) hochzuladen. Wenn nicht, müssen Sie auf die Seite Ihres Webhosts gehen und das Bild manuell hochladen. Denken Sie daran, die vorhandene Datei favicon.ico durch Ihre neue Datei zu ersetzen.
Schritt 3. Fügen Sie die Datei zu Ihrem Header hinzu
Suchen Sie nach dem Ort, an dem Sie auf die PHP- und CSS-Dateien für Ihre Site zugreifen können. Gehen Sie zur Datei header.php Ihrer Site und bearbeiten Sie sie. Unter dem Tag-Typ"
-
. Dies sollte Ihre Site mit Ihrem Favicon verbinden.
Da Sie PHP verwenden, bedeutet dies, dass alle Sites, die Ihre Header-Datei verwenden, jetzt dasselbe Favicon haben
Erstellen Sie Ihr eigenes Favicon-Symbol Schritt 14 Schritt 4. Aktualisieren Sie Ihren Browser
Nachdem Sie das Favicon hochgeladen haben, können Sie Ihren Browser aktualisieren, um Ihr neues Bild neben der Adressleiste zu sehen. Um direkt zu einem Bild Ihres aktualisierten Favicons zu gelangen, geben Sie "https://www.ihredomain.com/favicon.ico" ein.
- Wenn Ihr Favicon zunächst nicht angezeigt wird, müssen Sie möglicherweise den Cache Ihres Browsers zurücksetzen.
- Um Ihren Cache zu leeren, gehen Sie zu den Einstellungen Ihres Browsers und löschen Sie Ihre temporären Internetdateien, Cookies und den Verlauf.
