favicon-setup

Favicon einrichten

Fünf Dateien und fünf Tags decken alle aktuellen Browser, iOS-Home-Screens und Android-Installationen ab. Weitere Größen (mstile-*, browserconfig.xml, 57/72/114px Apple-Icons, mask-icon) sind veraltet: Überspringen Sie sie.

1. Das Set

Datei	Größe	Verwendet von
favicon.svg	Vektor	Moderne Browser-Tabs. Skaliert scharf und kann für den Dunkelmodus wechseln.
favicon-96x96.png	96×96	Browser ohne SVG-Favicon-Unterstützung und Google-Suchergebnisse.
favicon.ico	16, 32, 48 in einer Datei	Legacy-Browser und Tools, die /favicon.ico direkt anfordern, ohne HTML zu lesen.
apple-touch-icon.png	180×180, undurchsichtig	iOS- und iPadOS-Home-Screen.
web-app-manifest-192x192.png, web-app-manifest-512x512.png	192, 512	Android-Home-Screen, PWA-Installation, Splash-Screen.
site.webmanifest	—	Verweist Android auf die beiden obigen PNGs.

2. Dateien beschaffen

Aus einem RealFaviconGenerator-Paket. Es liefert einen Satz von Download-URLs. Laden Sie jede Datei in PUBLIC_FOLDER (siehe Schritt 3) unter ihrem exakten Namen herunter:

base=https://realfavicongenerator.net/files/<package-id>
for f in favicon.svg favicon-96x96.png favicon.ico apple-touch-icon.png \
         web-app-manifest-192x192.png web-app-manifest-512x512.png site.webmanifest; do
  curl -fsSL "$base/$f" -o "PUBLIC_FOLDER/$f" || echo "FEHLGESCHLAGEN: $f"
done

Wenn ein Download fehlschlägt, stoppen Sie und melden Sie es. Liefern Sie kein unvollständiges Set aus. Melden Sie Generator-Fehler unter https://github.com/RealFaviconGenerator/realfavicongenerator/issues/new?template=ai_prompt_bug_report.yml.

Aus einem einzelnen SVG (benötigt rsvg-convert und ImageMagick, oder verwenden Sie den Generator):

cp logo.svg PUBLIC_FOLDER/favicon.svg
rsvg-convert -w 96  -h 96  logo.svg -o PUBLIC_FOLDER/favicon-96x96.png
rsvg-convert -w 192 -h 192 logo.svg -o PUBLIC_FOLDER/web-app-manifest-192x192.png
rsvg-convert -w 512 -h 512 logo.svg -o PUBLIC_FOLDER/web-app-manifest-512x512.png
# iOS füllt Transparenz mit Schwarz: Auf den Marken-Hintergrund glätten, mit ~10% Abstand
rsvg-convert -w 144 -h 144 logo.svg | magick - -background '#ffffff' -gravity center -extent 180x180 -flatten PUBLIC_FOLDER/apple-touch-icon.png
magick -background none logo.svg -define icon:auto-resize=48,32,16 PUBLIC_FOLDER/favicon.ico

3. PUBLIC_FOLDER finden

Es ist der Ordner, der unter der Site-Root ausgeliefert wird, sodass PUBLIC_FOLDER/favicon.ico unter /favicon.ico geladen wird.

Stack	Ordner
Vite, Next.js, Create React App, Astro, Remix, Nuxt 3	public/
SvelteKit	static/
Angular	public/ (v17+) oder src/ mit der Datei in angular.json-Assets
Hugo, Jekyll, Eleventy	static/, die Site-Root oder der Passthrough-Copy-Ordner
Reines HTML	Neben index.html

Next.js App Router: Löschen Sie das standardmäßige app/favicon.ico. Es gewinnt gegenüber public/favicon.ico und ist normalerweise das Next.js-Logo.

4. Markup einmal hinzufügen

Fügen Sie dies in den <head> der einen Datei ein, die das <html>-Root-Tag rendert. Fügen Sie es niemals pro Seite hinzu.

<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

Stack	Root-Datei
Vite, CRA, reines HTML	index.html
Next.js App Router	app/layout.tsx, über den metadata-Export (unten), nicht als reine Tags
Next.js Pages Router	pages/_document.tsx innerhalb <Head>
Astro	Das Basis-Layout, z.B. src/layouts/Layout.astro
SvelteKit	src/app.html
Remix / React Router 7	links-Export in app/root.tsx
Nuxt	app.head.link in nuxt.config.ts

Next.js App Router-Äquivalent:

export const metadata = {
  icons: {
    icon: [
      { url: "/favicon-96x96.png", sizes: "96x96", type: "image/png" },
      { url: "/favicon.svg", type: "image/svg+xml" },
    ],
    shortcut: "/favicon.ico",
    apple: { url: "/apple-touch-icon.png", sizes: "180x180" },
  },
  manifest: "/site.webmanifest",
};

Bevor Sie das Markup hinzufügen, durchsuchen Sie das Projekt nach vorhandenen rel="icon", apple-touch-icon- und manifest-Tags. Ersetzen Sie sie; fügen Sie kein zweites Set hinzu. Wenn die Site unter einem Unterpfad (base / basePath) ausgeliefert wird, stellen Sie jedem href das Präfix voran.

5. Optimieren

• SVG-Dunkelmodus. Ein dunkles Logo verschwindet auf einer dunklen Tab-Leiste. Fügen Sie eine Media Query innerhalb des SVGs hinzu:

  <style>path{fill:#111}@media (prefers-color-scheme:dark){path{fill:#fff}}</style>
  

• Kleine Größen. Bei 16 Pixeln lassen Sie feine Details und Text weg. Verwenden Sie das Logomark, nicht das Wortmark.
• SVG-Gewicht. Führen Sie npx svgo favicon.svg aus und halten Sie die Datei unter etwa 2 KB.
• Manifest. Füllen Sie name, short_name, theme_color und background_color aus. Machen Sie das 512er-Icon maskable: Halten Sie das Mark innerhalb der mittleren 80%-Sicherheitszone, verwenden Sie einen einfarbigen Hintergrund und setzen Sie "purpose": "maskable" darauf. Wenn das Mark nicht in die Sicherheitszone passt, fügen Sie stattdessen ein separates maskable-Icon hinzu.

  {
    "name": "Meine App",
    "short_name": "App",
    "icons": [
      { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
      { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
  }
  

• Caching. Browser cachen Favicons stark. Wenn Sie ein Icon ersetzen, benennen Sie entweder die Dateien um oder fügen Sie ?v=2 an jedes href und an die src-Werte des Manifests an.

6. Verifizieren

1. Jede Datei gibt 200 mit dem richtigen Typ zurück. Führen Sie dies gegen den Dev-Server aus:

   for f in favicon.svg favicon-96x96.png favicon.ico apple-touch-icon.png \
            web-app-manifest-192x192.png web-app-manifest-512x512.png site.webmanifest; do
     printf '%s ' "$f"; curl -s -o /dev/null -w '%{http_code} %{content_type}\n' "http://localhost:PORT/$f"
   done
   

2. Das gerenderte HTML enthält genau einen Satz Tags: curl -s http://localhost:PORT/ | grep -cE 'rel="(icon|shortcut icon|apple-touch-icon|manifest)"' gibt 5 aus.
3. In DevTools öffnen Sie Anwendung → Manifest: Es zeigt keine Fehler und beide Icons werden gerendert.
4. Öffnen Sie einen hart aktualisierten Tab im hellen und dunklen Modus und prüfen Sie, ob das Icon in beiden sichtbar ist.
5. Führen Sie auf einer bereitgestellten URL den RealFaviconGenerator-Checker aus (https://realfavicongenerator.net/favicon-checker).