FaviconKit
Kostenlos · Keine Anmeldung · Läuft auf Ihrem Server

Perfekte Favicons aus jedem Bild erstellen

Verwandeln Sie Ihre Bilder in professionelle Favicons mit Unterstützung für SVG, PNG, JPG und alle gängigen Formate. Laden Sie ein komplettes Favicon-Paket mit allen Größen herunter, die Sie für eine einwandfreie Anzeige auf allen Geräten und Browsern benötigen.

Blitzschnell· SVG-Unterstützung· Viele Formate
Jetzt konvertieren

Bild hochladen

Ziehen Sie ein Bild per Drag & Drop hierher oder klicken Sie, um eine Datei auszuwählen. Wir erstellen alle benötigten Favicon-Größen für Sie.

Bild hier ablegen

oder klicken Sie, um Dateien zu durchsuchen

Datei auswählen
PNGJPGGIFWEBPBMPSVGICO≤10MB
Ihr Favicon-Paket wird erstellt…
Diese Datei konnte leider nicht verarbeitet werden. Bitte verwenden Sie ein quadratisches PNG, JPG, GIF, WebP, BMP oder SVG unter 10 MB.
favicon preview

Ihr Favicon-Paket ist bereit

ZIP mit ICO, PNG, Apple-Touch-Icon, Android-Icons und Web-Manifest.

Favicon-Paket herunterladen

Text-zu-Favicon-Generator

Verwandeln Sie Buchstaben oder kurzen Text in ein klares Favicon. Geben Sie Ihre Initialen ein, wählen Sie Farben und eine Form, sehen Sie die Live-Vorschau und laden Sie das komplette Icon-Paket herunter.

Emoji-zu-Favicon-Generator

Verwandeln Sie jedes Emoji in ein Favicon. Wählen Sie ein Emoji, dazu Hintergrundform und -farbe, sehen Sie die Live-Vorschau und laden Sie das komplette Icon-Paket herunter.

Pixel-Favicon-Editor

Zeichnen Sie Ihr eigenes Favicon Pixel für Pixel auf einem 16×16- bis 64×64-Raster. Stift, Radiergummi und Füllwerkzeug mit Rückgängig/Wiederherstellen – gleich ein komplettes Paket aus ICO, PNG sowie Apple-/Android-Icons exportieren.

Favicon-Downloader

Geben Sie die URL einer beliebigen Website ein, um deren Favicon in den Formaten PNG und ICO abzurufen und herunterzuladen.

Favicon-Prüfer

Geben Sie die URL einer beliebigen Website ein, um deren Favicon-Einrichtung sofort zu prüfen – favicon.ico, Apple-Touch-Icon, SVG-Favicon und Web-Manifest. Sie erhalten in Sekunden eine Gesundheitsbewertung.

Alles, was Sie für perfekte Favicons brauchen

Ein professioneller Favicon-Generator mit allen Werkzeugen und Formaten, die Sie benötigen, um gestochen scharfe Icons zu erstellen, die überall funktionieren.

Blitzschnell

Verarbeiten Sie Bilder in Sekunden mit einer optimierten Konvertierungsengine. Kein Warten, keine Verzögerungen.

SVG-Unterstützung

Volle Unterstützung für SVG-Dateien mit sauberer Optimierung und Skalierung für perfekte Ergebnisse.

Alle Geräte

Erstellen Sie Favicons für Desktop, Mobilgeräte, Tablets und PWAs in allen erforderlichen Größen.

Komplettes Paket

Laden Sie alles herunter: ICO, PNG-Dateien, Apple-Touch-Icons und ein Web-Manifest.

Viele Formate

Unterstützung für PNG, JPG, GIF, WebP, BMP und SVG – konvertieren Sie aus jedem gängigen Format.

Sofort einsatzbereit

Erhalten Sie HTML-Codeausschnitte und Installationsanleitungen für die sofortige Einbindung.

Browserübergreifend

Einwandfreie Kompatibilität mit Chrome, Firefox, Safari, Edge und allen modernen Browsern.

Hohe Qualität

Fortschrittliche Bildverarbeitung sorgt dafür, dass Favicons in jeder Größe gestochen scharf bleiben.

Professionell

Erstellen Sie das branchenübliche Favicon-Paket, das von den besten Websites weltweit verwendet wird.

8+
Unterstützte Formate
6
Favicon-Größen
100%
Browserkompatibel
0s
Verarbeitungszeit

Einfache Installationsanleitung

Folgen Sie diesen einfachen Schritten, um Ihre neuen Favicons in Ihre Website einzubinden.

1

Favicon-Paket herunterladen

Verwenden Sie den Generator oben, um Ihr komplettes Favicon-Paket als ZIP-Datei zu erstellen und herunterzuladen.

2

Dateien entpacken

Entpacken Sie den gesamten Inhalt der ZIP-Datei in das Stammverzeichnis Ihrer Website (denselben Ordner wie index.html).

3

HTML-Code einfügen

Kopieren Sie den HTML-Code unten und fügen Sie ihn in den <head>-Bereich Ihrer Seiten ein.

4

Favicons testen

Veröffentlichen Sie Ihre Website und bestätigen Sie, dass das Favicon in Browser-Tabs, Lesezeichen und auf Mobilgeräten angezeigt wird.

Integrationscode für Ihr Framework

Wählen Sie Ihren Stack und kopieren Sie den fertigen Code. Die Dateien liegen im Stammverzeichnis Ihrer Website (oder in app/ für den Next.js App Router).

index.html
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
// app/layout.tsx
// 1. Drop these files into app/ (Next.js auto-detects them):
//    - favicon.ico, icon.png, icon.svg, apple-icon.png
// 2. For extra PNG sizes + a manifest, declare them here:
import type { Metadata } from 'next'
import './globals.css'

export const metadata: Metadata = {
  icons: {
    icon: [
      { url: '/favicon.ico', sizes: 'any' },
      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
      { url: '/favicon.svg', type: 'image/svg+xml' },
    ],
    apple: ['/apple-touch-icon.png'],
  },
  manifest: '/site.webmanifest',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en"><body>{children}</body></html>
  )
}
// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head>
        <link rel="icon" href="/favicon.ico" sizes="any" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
        <link rel="manifest" href="/site.webmanifest" />
      </Head>
      <body><Main /><NextScript /></body>
    </Html>
  )
}
// Vue (public/index.html) — put files in public/
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

// Nuxt 3 (nuxt.config.ts)
export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'icon', href: '/favicon.ico', sizes: 'any' },
        { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
        { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
        { rel: 'manifest', href: '/site.webmanifest' },
      ],
    },
  },
})
// 1. npm i gatsby-plugin-manifest
// 2. gatsby-config.js — point icon at a 512x512 PNG
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-manifest',
      options: {
        name: 'Your App Name',
        short_name: 'App',
        start_url: '/',
        display: 'standalone',
        icon: 'src/images/android-chrome-512x512.png',
      },
    },
  ],
}

// Also copy favicon.ico to the static/ folder for the browser fallback.
// src/app.html — files live in static/
<!doctype html>
<html lang="en">
  <head>
    <link rel="icon" href="/favicon.ico" sizes="any" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="manifest" href="/site.webmanifest" />
    %sveltekit.head%
  </head>
  <body data-sveltekit-preload-data="hover">
    <div style="display:contents">%sveltekit.body%</div>
  </body>
</html>
Wo gehören die Dateien hin? Legen Sie favicon.ico, icon.png und apple-icon.png direkt im Ordner app/ ab. Next.js erkennt sie automatisch – es sind keine manuellen Link-Tags erforderlich.
site.webmanifest
{
  "name": "Your App Name",
  "short_name": "App",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Enthaltene Dateien

Ihr Favicon-Paket enthält die folgenden Dateien.

favicon.icofavicon-16x16.pngfavicon-32x32.pngapple-touch-icon.pngandroid-chrome-192x192.pngandroid-chrome-512x512.pngfavicon.svgsite.webmanifest

Profi-Tipps

  • Bewahren Sie alle Favicon-Dateien im Stammverzeichnis Ihrer Website auf, um die beste Kompatibilität zu gewährleisten.
  • Führen Sie nach dem Aktualisieren der Favicons einen Hard-Refresh durch (oder leeren Sie den Cache), um die Änderung sofort zu sehen.
  • Testen Sie Ihr Favicon auf verschiedenen Geräten und Browsern, um sicherzustellen, dass es korrekt dargestellt wird.

Häufig gestellte Fragen

Antworten auf häufige Fragen zur Favicon-Erstellung und -Einbindung.

Welche Bildformate werden unterstützt?
Sie können PNG-, JPG-, GIF-, WebP-, BMP- oder SVG-Dateien hochladen. Für das schärfste Ergebnis beginnen Sie mit einem quadratischen Bild von mindestens 512×512 Pixeln. Dateien bis zu 10 MB werden akzeptiert.
Wie groß sollte das Ausgangsbild sein?
Ein quadratisches Ausgangsbild von 512×512 Pixeln oder größer ist ideal. Der Generator skaliert es sauber herunter, daher liefert eine große, scharfe Vorlage die am besten aussehenden kleinen Icons.
Unterstützen Sie SVG-Favicons?
Ja. SVG-Dateien werden als vektorbasiertes favicon.svg für die gestochene Darstellung in modernen Browsern beibehalten und zusätzlich in jede PNG- und ICO-Größe für ältere Browser gerastert.
Welche Favicon-Größen werden erstellt?
Das Paket enthält PNG in 16×16 und 32×32, ein favicon.ico mit mehreren Auflösungen, ein 180×180 Apple-Touch-Icon sowie Android/PWA-Icons in 192×192 und 512×512, plus ein Web-Manifest.
Wie binde ich das Favicon in meine Website ein?
Entpacken Sie die ZIP-Datei im Stammverzeichnis Ihrer Website und fügen Sie den bereitgestellten HTML-Codeausschnitt in den <head>-Bereich Ihrer Seiten ein. Die vollständigen Anleitungen und Framework-Codes finden Sie oben.