0Pricing
HTML Academy · Lektion

Favicon und Apple Touch Icon

Fügen Sie Symbole für Browser-Tabs und Startbildschirme hinzu

Favicon und Apple Touch Icon ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist ein Favicon?

Ein Favicon ist das kleine Symbol, das angezeigt wird in:

  • Browser-Tabs
  • Lesezeichenlisten
  • Der Browserchronik
  • Suchergebnissen (manchmal)

Es hilft Nutzenden, Ihre Website zwischen mehreren geöffneten Tabs auf einen Blick zu erkennen.

Einfacher Favicon-Link

Fügen Sie ein Favicon mit einem link-Element in head hinzu:

<head>
  <!-- SVG favicon (modern, scales at any size) -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">

  <!-- PNG fallback -->
  <link rel="icon" type="image/png" href="/favicon.png">

  <!-- Legacy ICO for Internet Explorer -->
  <link rel="shortcut icon" href="/favicon.ico">
</head>

Favicon-Formate

Empfohlene Strategie für Favicon-Formate:

  • SVG — Vektorformat, perfekt skalierbar, kleine Dateigröße (zuerst verwenden)
  • PNG 32x32 — Fallback für Browser, die SVG nicht unterstützen
  • ICO — Legacy-Format mit den Größen 16x16 und 32x32

Ablage der ICO-Datei

Die Datei favicon.ico im Stammverzeichnis der Domain wird automatisch abgerufen:

<!-- Browsers request /favicon.ico automatically -->
<!-- Placing it at the domain root means no link tag is needed:
/favicon.ico  -- served without any HTML link tag
-->
<!-- But: specifying it explicitly is better: -->
<link rel="icon" href="/favicon.ico" sizes="32x32">

Das sizes-Attribut

Das sizes-Attribut gibt die Abmessungen des Symbols an:

<link rel="icon" href="/icon-16.png" sizes="16x16">
<link rel="icon" href="/icon-32.png" sizes="32x32">
<link rel="icon" href="/icon-64.png" sizes="64x64">

Apple Touch Icon

Das Apple Touch Icon wird angezeigt, wenn Nutzende Ihre Website zum iOS-Home-Bildschirm hinzufügen:

<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Recommended size: 180x180 px -->
<!-- Used by: iOS Safari, some Android browsers -->
<!-- Apple applies rounded corners and gloss effect automatically -->
<!-- Pre-composited icon (no transparency) looks best -->

Maskierbare Symbole für Android

Android-PWAs verwenden maskierbare Symbole, die die Symbolform vollständig ausfüllen:

<link rel="manifest" href="/manifest.json">

<!-- In manifest.json: -->
<!--
{
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}
-->

Favicon für den Dark Mode

Stellen Sie ein SVG-Favicon bereit, das den Dark Mode berücksichtigt:

<!-- SVG favicon with dark mode support: -->
<!-- In /favicon.svg: -->
<!--
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    @media (prefers-color-scheme: dark) {
      .icon-bg { fill: white; }
      .icon-mark { fill: black; }
    }
    .icon-bg { fill: #0070f3; }
    .icon-mark { fill: white; }
  </style>
  <circle class="icon-bg" cx="16" cy="16" r="16"/>
  <text class="icon-mark" x="50%" y="60%">C</text>
</svg>
-->

Web-App-Manifest für PWA-Symbole

Vollständige Symboleinrichtung für Progressive Web Apps:

<link rel="manifest" href="/manifest.json">

<!-- manifest.json icons array: -->
<!--
"icons": [
  { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
  { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
-->

Vollständige Favicon-Einrichtung

Eine vollständige moderne Favicon-Konfiguration:

<head>
  <!-- SVG: scales to any size, supports dark mode -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  <!-- PNG fallback -->
  <link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32">
  <!-- Apple home screen -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <!-- PWA manifest (for Android home screen) -->
  <link rel="manifest" href="/manifest.json">
</head>

Favicons testen

So überprüfen Sie die Favicon-Einrichtung:

  • Führen Sie einen vollständigen Reload durch (Ctrl+Shift+R / Cmd+Shift+R), um das zwischengespeicherte Favicon zu löschen
  • Verwenden Sie das Favicon Checker-Tool (realfavicongenerator.net)
  • Testen Sie das Apple Touch Icon auf einem tatsächlichen iOS-Gerät
  • Prüfen Sie das PWA-Manifest mit Lighthouse → PWA-Prüfung

Schnelltest

Welche Größe wird für Bilder des Apple Touch Icons empfohlen?

Zusammenfassung: Favicons

Die wichtigsten Grundlagen von Favicons:

  • SVG-Favicon — modern, skalierbar und für den Dark Mode geeignet
  • PNG 32x32 — Fallback für Browser ohne SVG-Unterstützung
  • ICO im Stammverzeichnis — Legacy-Fallback für den Internet Explorer
  • apple-touch-icon 180×180 — iOS-Home-Bildschirm
  • Web-App-Manifest — Android-PWA-Symbole (192px und 512px)

Häufig gestellte Fragen

Ist die Lektion „Favicon und Apple Touch Icon“ kostenlos?

Ja — der vollständige Text von „Favicon und Apple Touch Icon“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Favicon und Apple Touch Icon“?

Fügen Sie Symbole für Browser-Tabs und Startbildschirme hinzu Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um HTML Academy zu starten?

Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Favicon und Apple Touch Icon“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?

Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. title und seine Bedeutung für SEO
  2. meta charset viewport author und description
  3. Kanonische URLs und robots-Metaangaben
  4. Favicon und Apple Touch Icon
← Zurück zu HTML Academy