HTML Favicon
Ein Favicon ist ein kleines Symbol, das in der Browser-Registerkarte neben dem Titel der Website erscheint. Es ist eine einfache, aber effektive Möglichkeit, das Erscheinungsbild und die Benutzerfreundlichkeit deiner Website zu verbessern. Wenn du dich nicht sicher bist, wie du ein Favicon auf deiner Website einfügen kannst, keine Sorge – es ist ganz einfach mit HTML zu machen. Folge diesen einfachen Schritten, um ein Favicon in HTML einzubinden.
Wähle oder erstelle dein Favicon-Bild. Der erste Schritt beim Hinzufügen eines Favicons zu deiner Website mit HTML ist die Auswahl oder Erstellung eines Favicon-Bildes. Dieses Bild sollte ein kleines, quadratisches Symbol sein, das deine Website oder Marke repräsentiert. Du kannst dein eigenes Favicon mit einer Grafiksoftware erstellen oder einen Designer damit beauftragen, eines für dich zu entwerfen. Alternativ kannst du auch aus einer Reihe von kostenlosen oder kostenpflichtigen Favicon-Generatoren wählen, die online verfügbar sind (mehr dazu unten im Artikel). Sobald du dein Favicon-Bild fertig hast, kannst du mit dem nächsten Schritt fortfahren.
HTML Favicon-Code:
<link rel="shortcut icon" href="http://html-einfach.de/favicon.png" />Zum Einfügen zwischen <head> und </head> in deiner HTML-Datei.
Inhalt
Empfohlene Größen und Formate für Favicon:
Lade das Bild in das Stammverzeichnis deiner Website hoch. Der erste Schritt beim Hinzufügen eines Favicons zu deiner Website mithilfe von HTML besteht darin, das Bild in das Stammverzeichnis deiner Website hochzuladen. Dies ist der Hauptordner, in dem alle Dateien deiner Website gespeichert sind. Du kannst dies mit einem FTP-Client oder über das Hosting-Kontrollpanel deiner Website tun. Sobald das Bild hochgeladen ist, notiere dir den Dateipfad zum Bild, da du diese Information für den nächsten Schritt benötigst.
Empfohlene Größen:
- 16×16 Pixel: Dies ist die Standardgröße für Favicons, die in Browser-Tabs und Lesezeichen-Leisten angezeigt wird. Speicher als .ico oder .png-Datei.
- 32×32 Pixel: Diese Größe ist für Browser, die hochauflösende Favicons anzeigen, sowie für einige Betriebssysteme geeignet. Speicher als .ico oder .png-Datei.
- 48×48 Pixel: Speicher die Größe für die Verwendung in Windows-Desktop-Verknüpfungen als .ico-Datei.
- 64×64 Pixel: Diese Größe ist für MacOS-Desktop-Verknüpfungen geeignet und sollte als .png-Datei gespeichert werden.
- 96×96 Pixel: Diese Größe ist für Google TV und andere hochauflösende Anwendungen geeignet. Speicher als .png-Datei.
- 180×180 Pixel: Für Apple-Geräte wie iPhone und iPad speicher ein Apple Touch Icon in dieser Größe als .png-Datei.
- 192×192 Pixel: Dies ist die empfohlene Größe für Android-Geräte und Chrome-Browser. Speicher diese Größe als .png-Datei.
Ein Favicon sollte für die Anzeige im Browser, sowie auf iOS und Android 192x192px groß sein.
Füge den Favicon HTML-Code in den Head-Bereich deiner Website ein.
<link rel="shortcut icon" href="http://html-einfach.de/favicon.ico" />
Nachdem du das Favicon-Bild in das Stammverzeichnis deiner Website hochgeladen hast, fügst du im nächsten Schritt den HTML-Code in den Head-Bereich deiner Website ein. Dies ist der Abschnitt des Codes deiner Website, der Informationen über die Website enthält, z. B. den Titel und die Metatags. Um den HTML-Code für dein Favicon einzufügen, füge einfach den folgenden Code zwischen den öffnenden und schließenden head-Tags ein:
Ersetze „http://html-einfach.de/favicon.ico“ durch den tatsächlichen Dateipfad zu deinem Favicon-Bild. Sobald du diesen Code eingefügt hast, speichere deine Änderungen und aktualisiere deine Website, um das neue Favicon in Aktion zu sehen.
Teste, ob das Favicon korrekt funktioniert. Nachdem du den HTML-Code für dein Favicon hinzugefügt hast, musst du testen und überprüfen, ob es korrekt funktioniert. Eine Möglichkeit, dies zu tun, besteht darin, deine Website zu besuchen und nach dem Favicon im Browser-Tab oder in der Lesezeichenleiste zu suchen. Wenn es nicht angezeigt wird, versuche, den Browser-Cache zu löschen und die Seite zu aktualisieren. Du kannst auch Online-Tools wie den Favicon Checker verwenden, um zu überprüfen, ob dein Favicon richtig funktioniert. Gib einfach die URL deiner Website ein, und das Tool prüft, ob ein Favicon vorhanden ist, und zeigt es an, damit du es bestätigen kannst. Durch das Testen und Überprüfen deines Favicons, kannst du sicherstellen, dass es richtig funktioniert und das Erscheinungsbild und die Benutzerfreundlichkeit deiner Website verbessert.
HTML Favicon für Apple und Android optimieren
Um sicherzustellen, dass Ihre Favicons auf verschiedenen Plattformen korrekt funktionieren, ist es wichtig, alle oben genannten Größen und Formate zu erstellen und in den Header-Bereich deiner Website einzubetten. Verwenden Sie dazu entsprechende HTML-Metatags. Hier ist ein Beispiel für einige Metatags, die Sie verwenden können:
<!-- Standard Favicon --> <link rel="icon" type="image/png" sizes="16x16" href="/path/to/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/path/to/favicon-32x32.png"> <!-- For Apple devices --> <link rel="apple-touch-icon" sizes="180x180" href="/path/to/apple-touch-icon.png"> <!-- For Android devices --> <link rel="icon" type="image/png" sizes="192x192" href="/path/to/android-chrome-192x192.png">
Woher bekomme ich ein Favicon?
Wenn du mit Bildbearbeitungsprogrammen wie Adobe Photoshop oder Gimp umgehen kannst, selber machen. Ansonsten gibt es einige Online-Tools, mit denen du Favicons für deine Website generieren kannst. Hier sind einige beliebte Favicon-Generatoren, die dir dabei helfen, Favicons in verschiedenen Größen und Formaten zu erstellen:
Favicon.io (https://favicon.io/)
Favicon.io ist ein einfaches und benutzerfreundliches Tool, mit dem du Favicons aus Text, einer Bilddatei oder einer Farbe erstellen kannst. Es generiert Favicons in verschiedenen Größen und bietet dir die passenden HTML-Metatags zum Einbetten auf deiner Website.
RealFaviconGenerator (https://realfavicongenerator.net/)
RealFaviconGenerator ist ein leistungsfähiges Tool, das Favicons für verschiedene Plattformen und Browser erstellt. Lade einfach eine Bilddatei hoch, passe das Aussehen an und das Tool generiert Favicons in verschiedenen Größen und Formaten, zusammen mit HTML-Metatags und Anweisungen zum Einbetten.
Favicon-Generator.org (https://www.favicon-generator.org/)
Mit diesem Tool kannst du Favicons aus einer Bilddatei erstellen. Es generiert Favicons in verschiedenen Größen und Formaten, einschließlich solcher für Apple- und Android-Geräte, sowie HTML-Metatags zum Einbetten auf deiner Website.
Favigen (https://favigen.com/)
Favigen ist ein weiteres benutzerfreundliches Favicon-Generator-Tool. Lade einfach deine Bilddatei hoch, und es erstellt Favicons in den empfohlenen Größen und Formaten, zusammen mit HTML-Metatags zum Hinzufügen zu deiner Website.
X-Icon Editor (http://www.xiconeditor.com/)
Der X-Icon Editor ist ein Online-Tool, mit dem du Favicons direkt in deinem Browser erstellen und bearbeiten kannst. Du kannst ein Bild importieren oder ein Favicon von Grund auf neu erstellen. Es generiert eine .ico-Datei, die du auf deiner Website verwenden kannst.
