Bilder · Favicon-Generator

Favicons für eine Website auf dem Mac erzeugen

Jedes Favicon, das eine Website braucht, dazu das Web-Manifest und das HTML zum Einfügen in deine Seite.

Läuft auf deinem Mac

KI fragenChatGPTClaudePerplexityKI-ModusGrokMarkdown

OneMacTools laden Weitere Werkzeuge: Bilder

Favicon-Generator auf einem Mac

Favicon-Generator mit Beispieldateien und seinen Optionen

Was Favicon-Generator aus den Beispieldateien erstellt hat

Bildschirmfotos aus der App, mit Beispieldateien.

So verwendest du Favicon-Generator

1
Logo ablegen
Nimm ein Bild, möglichst quadratisch und mindestens 512 px groß. Nicht quadratische Bilder werden auf ein zentriertes Quadrat zugeschnitten.
2
Website-Details eingeben
Gib den Website-Namen und die Designfarbe für das Web-Manifest ein und wähle den Hintergrund für das Apple-Touch-Symbol.
3
Auf „Favicons erstellen“ klicken
Jede Favicon-Datei wird erstellt, zusammen mit dem Manifest und dem HTML-Snippet.
4
Auf deine Website hochladen
Kopiere die Dateien aus dem Ordner „favicons“ (in einem Ordner mit Datum in Downloads › OneMacTools) ins Stammverzeichnis deiner Website und füge das HTML in den <head> deiner Seite ein. Das Snippet wird auch in der App angezeigt.

Was Favicon-Generator macht

Aus einem Logo erhältst du favicon.ico mit 16, 32 und 48 px, PNGs in 16 und 32 px, ein Apple Touch Icon mit 180 px auf festem Hintergrund, damit es auf iPhones nicht schwarz wird, sowie Symbole mit 192 und 512 px für Android und installierbare Web-Apps – dazu eine site.webmanifest mit dem Namen und der Designfarbe deiner Website und das HTML-Snippet für deinen <head>.

Ideal für

Einer neuen Website ein Favicon geben
Eine Website auf Smartphones installierbar machen
Ein unscharfes Favicon ersetzen

Optionen erklärt

Name der Website: Der Name in site.webmanifest, der angezeigt wird, wenn jemand deine Website auf einem Handy installiert. Bleibt das Feld leer, wird der Dateiname des Bildes verwendet. Der Kurzname sind die ersten 12 Zeichen.
Designfarbe: Eine Hex-Farbe wie #1E90FF, verwendet als Designfarbe des Browsers und Hintergrundfarbe des Manifests. Weiß, wenn leer.
Hintergrund für Apple-Touch-Symbol: Weiß, Designfarbe oder Schwarz. iPhones zeigen transparente Home-Bildschirm-Symbole auf Schwarz, deshalb bekommt das 180 px große Apple-Touch-Symbol einen festen Hintergrund.
Ecken abrunden: Standardmäßig aus. Rundet die Ecken deines Logos in jeder Favicon-Größe ab.

Bewährte Vorgehensweisen

Nimm ein einfaches Zeichen, nicht dein ganzes Logo mit Schrift. Bei 16 px bleiben nur kräftige Formen erkennbar.
Beginne mit einem transparenten PNG, damit das Favicon auf hellen und dunklen Browsertabs gut aussieht.
Gib die Designfarbe als Hex-Wert ein. Sie färbt auf manchen Handys die Browseroberfläche, nimm also deine wichtigste Markenfarbe.
Öffne deine Website nach dem Hochladen in einem privaten Fenster, um das neue Symbol zu prüfen, da Browser Favicons lange zwischenspeichern.

Funktioniert mit

In: Ein Bild, am besten ein quadratisches PNG ab 512 px.
Ende: Ein Ordner „favicons“ mit favicon.ico (enthält 16, 32 und 48 px), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180 px), android-chrome-192x192.png und android-chrome-512x512.png sowie site.webmanifest und add-to-head.html.

Nicht quadratische Bilder werden auf ein zentriertes Quadrat beschnitten.

Fragen zu Favicon-Generator

Welche Favicon-Dateien braucht eine Website?

favicon.ico für ältere Browser, PNGs in 16 und 32 px für Tabs, ein 180 px großes Apple-Touch-Symbol für iPhone-Home-Bildschirme sowie Symbole in 192 und 512 px mit Web-Manifest für Android. OneMacTools erstellt alle davon und das HTML zum Einfügen in den <head> deiner Seite.

Wohin kommen die Dateien?

Im Stammordner deiner Website, neben index.html. Das HTML-Snippet und das Manifest erwarten sie beide dort.

Wie erstelle ich auf dem Mac eine favicon.ico?

Zieh dein Logo auf „Favicon-Generator“ und klicke auf „Favicons erstellen“. Die Datei favicon.ico enthält Versionen in 16, 32 und 48 px, dazu kommen die PNG-Größen.

Warum sieht mein Symbol auf dem Home-Bildschirm eines iPhone schwarz aus?

iOS zeigt transparente Bereiche eines Home-Bildschirm-Symbols schwarz an. Deshalb wird das Apple-Touch-Symbol auf einen festen weißen, schwarzen oder Designfarben-Hintergrund gesetzt.

Wofür ist site.webmanifest?

Es teilt Smartphones Namen, Symbole und Farben deiner Website mit, wenn jemand sie zum Home-Bildschirm hinzufügt oder als Web-App installiert.

Mein neues Favicon wird nicht angezeigt. Was ist los?

Browser speichern Favicons hartnäckig zwischen. Prüfe, ob die Dateien im Stammverzeichnis deiner Website liegen und das Snippet im <head> steht, und lade dann in einem privaten Fenster neu.

Lädt Favicon-Generator meine Dateien hoch?

Nein. Favicon-Generator läuft komplett auf deinem Mac – deine Dateien verlassen ihn nie, und es funktioniert offline.

Verändert Favicon-Generator meine Originaldateien?

Nein. Ergebnisse werden als neue Dateien in einem datierten Ordner in Downloads › OneMacTools gesichert, und deine Originale bleiben genau, wie sie waren – außer du aktivierst eine Option, die etwas anderes sagt.

Was braucht Favicon-Generator?

Nur ein Mac mit macOS 26 oder neuer. Sonst musst du nichts installieren.