Favicons ersetzen das Globussymbol in der Adressleiste.
Bildnachweis: r0mu/iStock/Getty Images
Ein Favicon ist eine kreative und praktische Möglichkeit, der Präsenz Ihrer Website ein subtiles visuelles Flair zu verleihen. Favicons sind kleine Bilder, die Webbrowser auf Seitenregisterkarten und Adressleisten verwenden. Sie zeigen ein Logo oder Bild an, das mit der Website verbunden ist und als visuelle Markenkennung neben dem Titel oder der URL dient. Favicons sind besonders nützliche Site-Identifier beim Tabbed Browsing, da der verfügbare Textraum, der für Seitentitel verwendet wird, fast auf Null abnimmt, wenn der Benutzer mehr Tabs öffnet.
Schritt 1
Entwerfen Sie das Symbol, das Sie in einem Foto- oder Grafikbearbeitungsprogramm verwenden möchten. Sie können ein vorhandenes Logo oder Bild, das mit Ihrer Website oder Marke verknüpft ist, verwenden und es so anpassen, dass es den Favicon-Standards entspricht. Favicons verwenden immer quadratische Abmessungen und haben eine maximal unterstützte Größe von 256 x 256 Pixel. Schneiden Sie das Bild zu und passen Sie es so an, dass es in ein 256 x 256 Pixel großes Quadrat passt, wenn Sie einen Symbolpacker verwenden, um mehrere Größen zu unterstützen. Wenn Sie nur eine Version erstellen möchten, wählen Sie eine Größe von 16 x 16 Pixeln.
Video des Tages
Schritt 2
Exportieren Sie die Symbolgrafik als PNG-Bilddatei aus dem Grafikdesignprogramm. PNG ist das W3C-Standardbildformat für Favicons. Einige Browser können JPG-Dateien als Favicons anzeigen, aber der Standard wird nicht offiziell unterstützt. Darüber hinaus funktionieren Icon Packer-Programme möglicherweise nicht mit Bildern in anderen Formaten. Favicons unterstützen auch GIF- und ICO-Dateien.
Schritt 3
Packen Sie Ihre exportierte PNG-Datei mit einem ICO-Konverterprogramm in eine ICO-Datei. Ein Icon-Konverter-Programm verarbeitet ein PNG-Favicon, formatiert es für verschiedene, weit verbreitete Favicon-Größen und bettet sie in eine einzige Datei ein. ICO-Dateien bieten Favicons mit höherer Auflösung als 16 x 16 Pixel für Geräte, die sie unterstützen.
Schritt 4
Melden Sie sich bei Ihrem Website-Hosting-Dienst an und laden Sie die PNG- oder ICO-Datei auf den Medienserver Ihrer Website hoch. Kopieren Sie die URL der hochgeladenen Datei; Sie benötigen es, um das Favicon an die Site anzuhängen.
Schritt 5
Öffnen Sie Ihr Site-Bearbeitungsprogramm und fügen Sie den folgenden Code, der wie angegeben mit der URL der Favicon-Datei modifiziert wurde, in den Abschnitt Ihrer Website ein.
Für PNG-Dateien:
Für ICO-Dateien:
Sofern Sie keine CMS-gesteuerte Site verwenden oder einen dateibasierten Abschnitt einschließen, müssen Sie den Code zu jeder Seite hinzufügen, auf der das Symbol angezeigt werden soll. Das Favicon wird angezeigt, nachdem Sie die Site-Seiten gespeichert und aktualisiert haben.
Spitze
Fotobearbeitungsprogramme wie Photoshop und Corel Draw eignen sich gut zum Gestalten und Formatieren des Symbols. Alternativ können Sie kostenlose Programme wie Paint.net und Pixlr verwenden.
Warnung
Einige Browser ordnen eine Bilddatei, die sich im Verzeichnis /favicon befindet, automatisch als Favicon zu; Die W3C-Organisation rät jedoch von dieser Vorgehensweise ab, da sie kein universell unterstützter Standard ist und den Prinzipien der Webarchitektur widerspricht. Darüber hinaus erlauben viele Webhosting-Dienste und CMS-Systeme dem Benutzer nicht, Medieninhalte außerhalb von Mediendateiverzeichnissen zu platzieren, was diese Praxis unmöglich macht.
