Füge dein Logo und ein paar Angaben hinzu und erhalte alle Icons, ein Vorschaubild und die Head-Tags in einer .zip. Du bekommst favicon.ico, die PNG- und Apple-Icons, ein Web-Manifest, ein Vorschaubild mit 1200 × 630 und die Head-Tags zum Einfügen. Dein Bild verlässt nie dieses Gerät. Kostenlos.
So erstellst du deine Icons und Tags, Schritt für Schritt
- Wähle ein Logo oder Bild aus oder zieh es auf die Seite. Am besten eignet sich ein quadratisches Logo ab 512 px.
- Wähle den Stil des Vorschaubilds: Logo auf Farbe oder Ganzes Foto.
- Fülle Website-Name, Seitentitel, Beschreibung, Seitenadresse und X-Handle aus.
- Wähle die Hintergrundfarbe und die Designfarbe, die die Browserleiste auf dem Handy einfärbt.
- Prüfe die Vorschau der Teilen-Karte und der Icons.
- Tippe auf „.zip herunterladen“ und „HTML kopieren“.
- Lade die Dateien in den Dateiordner deiner Website hoch und füge die Tags dann in den head deiner Seiten ein.
Was im Paket steckt
favicon.ico enthält Icons mit 16, 32 und 48 Pixeln für jeden Browser. favicon-16.png und favicon-32.png sind die scharfen Versionen für moderne Browser. apple-touch-icon.png ist für Homescreens auf iPhone und iPad, und die Android-Icons sowie site.webmanifest werden genutzt, wenn jemand deine Website installiert. og-image.png ist das Bild, das beim Teilen deines Links erscheint, und head.html enthält alle Tags zum Einfügen.
So gelingt ein gutes Vorschaubild
Chat-Apps und soziale Netzwerke zeigen das Bild mit etwa 1200 × 630 an und schneiden es für kleinere Karten zu oder verkleinern es. Halte den Titel also kurz und das Logo klar. Der Stil Logo setzt dein Logo neben den Titel auf die Hintergrundfarbe. Der Stil Foto füllt die Karte mit deinem Bild und legt den Titel über einen weichen Schatten, das passt am besten zu breiten Fotos. Vorschaubilder brauchen eine vollständige https://-Adresse, also gib die Seitenadresse an.
Prüfen, ob es funktioniert
Öffne nach dem Hochladen der Dateien deine Seite und sieh dir den Quelltext an, um die Tags zu prüfen. Viele Websites speichern Vorschaukarten zwischen. Wenn noch ein altes Bild erscheint, ergänze die Bildadresse um eine Version, etwa og-image.png?v=2, oder lass die Seite mit dem Linkvorschau-Tool der Plattform neu abrufen.
Tipps
- Verwende ein schlichtes Logo, das auch bei 16 Pixeln klar bleibt.
- Wähle eine Hintergrundfarbe, die zu deiner Marke passt.
- Schreib eine kurze Beschreibung, die Lust aufs Klicken macht.
- Prüfe deine Seite danach mit dem Pre-Launch-Scan.
Für mehr Tags, etwa für Robots und Artikeldetails, nutze den Meta-Tag-Generator, und nur für ein Icon den Favicon-Generator.
Für wen
Für alle, die eine private Website, ein Portfolio, einen Shop oder eine Seite für ein kleines Unternehmen starten, und für Entwickler, die alle Icons und Share-Dateien in einem Rutsch erstellen wollen.
Fragen
Wohin kommen die Dateien?
Lade alles aus der .zip in den Dateiordner deiner Website hoch und füg die Tags dann in den head deiner Seiten ein.
Brauche ich alle Icons?
Mit dem vollständigen Set sieht dein Icon in Browsern, auf Smartphone-Startbildschirmen und bei installierter Website richtig aus.
Wird mein Logo hochgeladen?
Nein. Alles wird in deinem Browser erstellt.