logo & favicon tool

zurück zur startseite

Rundes Logo & Favicons erstellen

Anleitung:

  1. Laden Sie ein Bild oder Logo hoch (per Drag & Drop oder Dateiauswahl)
  2. Ziehen Sie den Kreis, um den gewünschten Bereich auszuwählen
  3. Ändern Sie die Größe des Kreises mit dem blauen Griff
  4. Klicken Sie auf "Vorschau anzeigen", um das runde Logo zu sehen
  5. Klicken Sie auf "Favicons generieren", um alle Favicon-Formate zu erstellen
  6. Laden Sie das fertige Logo und/oder die Favicons herunter

Bild hierher ziehen oder

Generierte Favicon-Dateien

Installation

1. Laden Sie das Favicon-Paket herunter und entpacken Sie es.

2. Platzieren Sie alle generierten Dateien im Hauptverzeichnis (Root-Verzeichnis) Ihrer Webseite.

3. Fügen Sie folgenden Code in den <head> Bereich Ihrer HTML-Datei ein:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<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="manifest" href="/site.webmanifest">

Über dieses Tool

Dieses Kombinations-Tool ermöglicht Ihnen die Erstellung eines runden Logos und aller erforderlichen Favicon-Dateien in einem Schritt. Das Tool arbeitet vollständig im Browser - Ihre Bilder werden nicht an einen Server übertragen.

Was ist in dem Favicon-Paket enthalten?

  • favicon.ico - Das klassische Favicon für ältere Browser (enthält 16x16, 32x32 und 48x48 Pixel Versionen)
  • favicon-16x16.png & favicon-32x32.png - PNG-Versionen für moderne Browser
  • apple-touch-icon.png - 180x180 PNG für Apple iOS Geräte
  • android-chrome-192x192.png & android-chrome-512x512.png - Für Android Geräte
  • site.webmanifest - Manifestdatei für PWA-Unterstützung

Tipps für gute Logos und Favicons:

  • Verwenden Sie ein quadratisches Bild für beste Ergebnisse
  • Einfache Designs mit starkem Kontrast funktionieren am besten
  • Vermeiden Sie zu viele Details, da diese in kleinen Größen verloren gehen