Page cover

🇺🇳Icons

Kurzgesagt: Icons sind kleine grafische Symbole, die Informationen und Funktionen visuell darstellen, die Benutzererfahrung verbessern und die Ästhetik von Websites und Apps bereichern.

#1 Logo Generatoren

Die beiden URLs geben gute Anhaltspunkte um eine Idee zu bekommen. Falls man zu geizig ist kann man anschließend das Logo in Canva nach bauen

#2 Favicon

Favicons erleichtern es Benutzern, Ihre Website zu identifizieren, wenn sie viele Registerkarten im Webbrowser geöffnet haben. Favicons werden normalerweise direkt vor der URL in einem Browser angezeigt. Sie können auch Favicons für Lesezeichen, Ergebnisse der automatischen Vervollständigung von Google und den Suchverlauf sehen. Hier sind die Orte, an denen Favicons in verschiedenen Browsern angezeigt werden können .

Vorgehensweise:

  1. Logo erstellen

  2. Ico Generator anschmeißen

  3. Ico Datei auf Webserver hochladen (Pfad merken)

  4. Code im Head Bereich angeben

Favicon Generator

Ico Converter

Icon Konverter

Lange Rede kurzer Sinn, diesen Code einfach im Head Bereich der Seite einfügen

Attribute

rel

Lege das Attribut rel auf einen der folgenden Strings fest:

  • icon

  • apple-touch-icon

  • apple-touch-icon-precomposed

  • shortcut icon

href

Die URL des Favicons. Die URL kann ein relativer Pfad (/smile.ico) oder absoluter Pfad (https://example.com/smile.ico) sein.

Google Dokumentation

Problembehebung

Artikel zur richtigen Einstellung

#3 Zusammenfassung

Last updated