HTML: Favicon in die Website einbinden

Kategorie(n):

#html #css

Tutorial: Wie ihr ein Favicon in die Webseite einbinden könnt.

Das “favourite icon”, das so genannte Favicon, ist ein kleines 16×16 oder 32×32 Pixel großes Bild, das in der Adressleiste des Browsers oder in den Lesezeichen angezeigt wird. Dieses Icon wird eingesetzt, um für die eigene Webseite einen Wiedererkennungswert zu schaffen.

Davon abgesehen, dass ein Favicon zum optischen Escheinungsbild einer Webseite gehört, ist es auch für die Suchmaschinenoptimierung ein Rankingfaktor. Es sollte also keinesfalls vernachlässigt werden.

Das Einbinden:

• Mittels eines Tags im -Bereich der Webseite
• Über die favicon.ico im root-Verzeichnis der Webseite (z.B. bei CMS wie WordPress usw.)

Dabei kannst du auch andere Dateiformate als .ico verwenden. .gif-, .png- und .svg-Dateien sind ebenso möglich.

Beispiel:


<link rel="icon" type="image/vnd.microsoft.icon" href="pfad/dateiname.ico">
<link rel="icon" type="image/gif" href="pfad/dateiname.gif">
<link rel="icon" type="image/png" href="pfad/dateiname.png">

Erklärung:

Sowohl die Attribute rel=”shortcut icon” als auch rel=”icon” sollten gemäß HTML-Standard angegeben werden. Den meisten Browsern reicht jedoch auch die Angabe über rel=”icon”. Nicht jeder Browser durchsucht automatisch das root-Verzeichnis einer Webseite nach einer favicon.ico. Verwende daher am besten immer beide HTML-Tags. So arbeitest du standardkonform und vermeidest Fehler bei der Anzeige des Symbols. Bitte beachte die geänderten “type”-Werte je nachdem welches Dateiformat du wählst:

ICO: type=”image/x-icon”
PNG: type=”image/png”
GIF: type=”image/gif”

Darüber hinaus musst du auch auf Größen- und Farbangaben achten (nicht bei svg), da sonst das Icon unter Umständen nicht angezeigt werden kann:

ICO: 16×16 oder 32×32 – 16 bis 16 Millionen Farben
PNG: 16×16 – 256 Farben
GIF: 16×16 – 256 Farben

Solltest du ein bereits vorhandenes Icon mit einem neuen Symbol ersetzen, bitte unbedingt den Browser-Cache leeren. Sonst kann es vorkommen, dass der Browser das neue Icon nicht automatisch aktualisiert.

Favicon–Generatoren:

https://www.favicon.cc
https://www.favicon-generator.de
https://www.websiteplanet.com/de/webtools/favicon-generator/

Aktuelle Beiträge

Nachhaltigkeit & Klimaneutralität im Web

#goodtoknow / #html #css / #wordpress #woocommerceCa. 10-15% des weltweit verbrauchten Stroms wird für Internetnutzung verbraucht. Wachsende Datenvolumina und dadurch größere Speicherkapazitäten sind ein Riesenthema. Ein Videoaufruf bei YouTube erzeugt knapp 3g CO2, eine Google-Suchanfrage fällt mit ca. 0,2g noch relativ klein aus. Und wie oft am Tag macht man das? Da kommt massig was zusammen. Was kann man tun?Die optimale Nutzererfahrung (User Experience) zielt darauf ab, eine übersichtliche Website zu gestalten, auf der mit wenigen Klicks gefunden wird, wonach gesucht wird. Hierfür können Icons & Bilder mit Verlinkungen eingesetzt werden, die selbsterklärend schnell zielführend sind. Außerdem sind Filteroptionen ein Weg zum schnelleren Surfen im Web. Und schneller heißt in diesem Falle auch nachhaltiger. Bilder und Grafiken verbrauchen Unmengen an Speicherplatz und Ladekapazitäten. Darauf verzichten kann man nicht immer, weshalb in der Webentwicklung mit Kompressionen, möglichst sauberem und schlankem Code und durchdachten Konzeptionen energieschonend und nachhaltig gearbeitet werden sollte. Aber konzeptionell sollte auch vom Websitebetreiber immer geschaut werden, ob es wirklich eine Bildlösung sein muss, oder ob nicht ähnliche Effekte mit Vektorgrafien (SVG) oder modernem CSS Layout erreicht werden können. Performance / Ladezeit reduzieren Die Performance ist auch der entscheidende Faktor in Sachen Energieverbrauch (lesen Sie gerne nochmal meinen letzten Newsletter WeigelNOTES#1 / 3 ) – Schauen Sie auf die Qualität des Servers bei Ihrem Hostinganbieter. Manchmal kann man ein schnelleres Paket buchen und schon geht die Post ab. – Berücksichtigen Sie, dass mobile Geräte oftmals schlechtere Internetverbindung unterwegs sind. – Beachten Sie, dass sich mit dem Wachsen z.B. eines Onlineshops auch die Ladezeiten verlängern. Optimierung ist also eine regelmäßige und disziplinierte Angelegenheit. – Performance betrifft immer die Technik UND das Design. Achten Sie schon im Entwurf darauf, dass es nicht zu “wild” wird mit den Animationen und Gimmicks. Es ist oft schick, aber wenn es dadurch zu langsam wird, verpufft der gewünschte Effekt sehr schnell. Online-Shops – klimafreundlicher Versand Sie betreiben einen Shop und versenden regelmäßig Ihre Produkte? Sie könnten die Paketgröße dem verkauften Artikel passen, das spart Material und der Kunde hat weniger Müll zu entsorgen. Wer ist Ihr Paketdienstleister? Schauen Sie doch mal, ob nicht ggf. DHL GoGreen u.ä. in Frage kommen. Zertifizierte “grüne” Webhoster Sie können nach nachhaltigen Providern Ausschau halten, die klimaneutral arbeiten. Achten Sie auf ein eventuelles Ökosiegel, um sicher zu sein, dass Ihr Anbieter auch wirklich zu 100% Strom aus erneuerbaren Energien liefert. –> Hier finden Sie eine Liste von zertifizieren Stromanbietern <–>Ihr Provider wird Ihnen versichern, dass klimaneutral gewirtschaftet wird (schließlich ist das inzwischen auch ein gutes Marketinginstrument ;-)) Ein wirklich gutes Beispiel bietet hier der Hostinganbieter “webgo“: Mehr Infos: https://utopia.de/ratgeber/gruenes-webhosting-oekostrom/Der Klimawandel und seine miesen Folgen für uns alle wird immer deutlicher. Immer mehr Menschen suchen nach nachhaltigen Lösungen bei Energie, Lebensmitteln und im Verkehr. Und auch mit nachhaltiger Webentwicklung kann der CO2-Ausstoß reduziert werden. Websites verbrauchen Energie, aber der Verbrauch kann durch nachhaltige Webkonzeption deutlich reduziert werden. In Kombination mit klimaneutralen Hostinganbietern und ggf. Paketdienstleistern können wir alle einen Beitrag zur Klimaneutralität leisten. Und wer es wirklich ernst meint, kann gerne ein eigenes Siegel für sein Webprojekt erwerben. z.B. die Firma ClimatePartner vergibt entsprechende Zertifikate, basierend auf Ihren Unternehmensdaten. [...]Mehr lesen

Google und der Mobile-First-Index

#seo #social mediaGoogle setzt seiner Indexierung von Websites vollständig auf “Mobile First”. Fehler bei der Indexierung beeinflussen Google-Rankings! Die Google Search Console benachrichtigt Nutzer ggf., dass es Probleme damit gibt, die mobile Version seiner Website zu indexieren. Hier ist sofortige Nacharbeit fällig, da ansonsten damit gedroht wird, bei Nichtbehebung die Website und deren Bilder nicht mehr in den Suchergebnissen auftauchen zu lassen. Wer seine Website also noch nicht komplett für mobile Endgeräte optimiert hat und sein Ranking behalten will, muss eventuell aktiv werden. Für meine Kunden gilt… alle von mir erstellten Websites sind “mobile first ready” und sollten den Google Test anstandslos bestehen. Sollten Sie Probleme feststellen, melden Sie sich einfach bei mir. Google ist zu 100 % mobil. Was das bedeutet? Laut statistischen Umfragen finden bereits ca. 52% aller Suchanfragen von mobilen Endgeräten wie Smartphone oder Tablet aus statt. Grund genug, die Suchmaschinenoptimierung – falls noch nicht geschehen – auf die mobilen Versionen zu testen und ggf. umzustellen. Es gibt grundsätzlich nur einen Index bei Google – keine Unterscheidung bei Desktop und Mobile. Der Mobile-First-Index bezieht sich auf den Googlebot, der die Website ausliest und indiziert. Bei Fragen gilt wie immer – bitte kontaktieren Sie mich. Machen Sie gerne mit Ihrer Website-URL den Test: https://search.google.com/test/mobile-friendly [...]Mehr lesen

DSGVO & Google Webfonts

#goodtoknowLaut Urteil des Landgerichts München vom 20.01.2022 ist die Benutzung der beliebten Google Webfonts über die so genannte Fonts API nicht datenschutzkonform. Es bedarf einer vorherigen, expliziten Zustimmung des Website-Nutzers (also z.B. im Cookie-Banner). Der Grund ist simpel: beim Einbinden über die Google-Server wird die IP-Adresse der Nutzer in die USA gesendet. Bekanntlich sind die Datenschutzgesetze in Deutschland deutlich strenger als in vielen anderen Ländern. Daraus ergibt sich, dass die meisten Google-Dienste (wenn nicht alle) nach deutschem Recht nicht datenschutzkonform sind. Die Webfonts fehlten wohl nur noch in der Sammlung.Wie kann man Google Webfonts datenschutzkonform nutzen? 1. Die Google Webfonts lokal über den eigenen Server einbinden Die Webfonts lassen sich herunterladen, konvertieren und auf dem eigenen Server abspeichern. Das bedeutet, dass die Google Webfonts direkt vom eigenen Server und nicht mehr über die externe Schnittstelle geladen werden. So werden keine Nutzerdaten an Anbieter außerhalb der EU gesendet – vorausgesetzt, dass sich der Server des Webhostinganbieters auch in der EU befindet. Das wäre dann aber ein anderer Passus. 2. Die Google Webfonts datenschutzkonform per Zustimmung laden Solltet ihr diesen Weg nicht gehen wollen, müsst ihr ab sofort für für die Nutzung die Zustimmung der Besucher einholen. Dies kann z.B. über Anpassungen des Cookie-Banner passieren. Was ist jetzt zu tun? Passt eine der beiden genannten Varianten kurzfristig auf der Website an. Alternativ nehmt Kontakt mit mir auf und wir suchen gemeinsam nach der passenden Lösung. Bitte beachtet, dass ich keine Rechtsberatung vornehmen kann. Solltet ihr da Bedarf haben, wendet euch bitte an einen Anwalt eures Vertrauens. Eine gute Hilfe für Interessierte ist auch die Website von e-recht24.(Das Urteil: LG München 3 O 17493/20 vom 20.01.2022) [...]Mehr lesen