PNG in ICO umwandeln und Favicon erstellen
Legen Sie ein PNG oder Logo irgendwo auf dieser Seite ab. Sie erhalten eine .ico-Datei mit allen Größen von 16 bis 256 px oder ein komplettes Favicon-Paket mit App-Icons, Web-Manifest und den HTML-Tags.
Zum Ausprobieren
Sie haben die Datei schon?
- Kostenlos, ohne Anmeldung
- .ico und PNG von 16 bis 512 px
- Apple-Touch-Icon
- Web-App-Manifest
Logo zum Öffnen ablegen
Kostenlos weitere Logos finden
Weitere Bilder von der Website
Klicken Sie auf ein Logo, um das nächste von dieser Website auszuprobieren oder es zu entfernen.
Dieses Logo in 3D verwandeln
Animierte 3D-Logo-Videos für Reels, TikTok und YouTube, glänzende 3D-Bilder und 3D-Druckdateien, in Sekunden in Ihrem Browser erstellt.
So sieht es aus
So wandeln Sie ein PNG in ICO um
Datei ablegen, Icon prüfen, herunterladen. Ihr Bild wird in Ihrem Browser umgewandelt, kostenlos und ohne Konto.
PNG ablegen
Legen Sie ein PNG, JPG, WebP oder SVG irgendwo auf der Seite ab, oder klicken Sie unter dem Suchfeld auf Eigenes Logo ablegen. Sie erstellen ein Icon für ein Unternehmen, das schon eines hat? Geben Sie seine Website ein, und das Tool holt die Icons, die es bereits verwendet.
Als Icon prüfen
Ihr Bild öffnet sich zentriert auf einem Quadrat, der Form, die jeder Icon-Platz erwartet, und Sie sehen es in einem Browser-Tab in seiner Originalgröße von 16 px und als App-Icon auf dem Smartphone.
ICO herunterladen
Klicken Sie auf ICO für eine .ico-Datei mit 16, 24, 32, 48, 64, 128 und 256 px oder auf Favicons für das komplette Website-Paket in einer ZIP-Datei.
Einsetzen
Kopieren Sie das Paket auf Ihre Website und fügen Sie die fertigen HTML-Zeilen ein, oder weisen Sie einer Windows-Verknüpfung, einem Ordner oder einer App die .ico-Datei zu.
Jede Größe in der .ico-Datei und wo sie erscheint
Eine ICO-Datei ist eine Schachtel voller Icons: eine Datei mit demselben Bild in mehreren Größen, sodass jede Stelle, die es anzeigt, die perfekte Größe wählt.
| Größe | Wo sie erscheint |
|---|---|
| 16 × 16 px | Browser-Tabs und Lesezeichen; Titelleisten, Kontextmenüs und der Infobereich in Windows |
| 24 × 24 px | Die Taskleiste von Windows, Suchergebnisse und die App-Liste im Startmenü |
| 32 × 32 px | Tabs auf hochauflösenden Bildschirmen; angeheftete Apps im Startmenü von Windows |
| 48 × 48 px | Die Taskleiste auf hochauflösenden Bildschirmen; an Start angeheftete Apps bei 150 % Anzeigeskalierung |
| 64 × 64 px | An Start angeheftete Apps und Titelleisten auf hochauflösenden Bildschirmen |
| 128 × 128 px | Eine Ausgangsgröße nahe an den Zwischengrößen, die Windows auf großen Bildschirmen darstellt |
| 256 × 256 px | An Start angeheftete Apps bei der höchsten Anzeigeskalierung und die Vorlage, aus der Windows jede kleinere Größe herunterskaliert |
Der MDN-Leitfaden zu Bilddateitypen beschreibt, wie eine ICO-Datei „mehrere Symbole enthalten kann“, bis zu 256 × 256 px groß. Die Icon-Richtlinien von Microsoft zeigen, wo Windows jede Größe darstellt, und verlangen von Apps „mindestens 16 × 16, 24 × 24, 32 × 32, 48 × 48 und 256 × 256“. Der ICO-Download enthält sie alle, dazu 64 und 128 px für die Größen dazwischen.
Das Favicon-Paket, Datei für Datei
Alles, was eine Website für ihre Icons braucht, aus einem Bild erstellt, in einer ZIP-Datei.
| Datei | Beschreibung | Was es bewirkt |
|---|---|---|
| favicon.ico | Eine Icon-Datei mit 16, 32 und 48 px | Das Icon, nach dem Browser im Stammverzeichnis einer Website suchen |
| icon-256.ico | Alle Größen: 16, 24, 32, 48, 64, 128 und 256 px | Windows-Apps, Desktop-Verknüpfungen und Ordner-Icons |
| favicon-16x16.png, favicon-32x32.png und favicon-48x48.png | Kleine quadratische PNG-Dateien mit transparentem Hintergrund | Browser-Tabs, Lesezeichen und Verknüpfungen |
| favicon.svg | Das Icon als Vektorgrafik, wenn Ihr Logo als Vektor vorliegt | Scharfe Tab-Icons in jeder Größe in Browsern, die SVG-Icons lesen |
| apple-touch-icon.png | 180 × 180 px, auf Weiß mit etwas Freiraum | Home-Bildschirme von iPhone und iPad |
| android-chrome-192x192.png und android-chrome-512x512.png | Die Web-App-Icons | Android-Startbildschirme, installierte Web-Apps und ihre Splash-Screens |
| site.webmanifest | Eine kleine Textdatei, die die App-Icons auflistet | Ermöglicht Smartphones und Browsern, Ihre Website als App zu installieren |
| add-to-your-head.html | Die Zeilen für den Head-Bereich Ihrer Seiten | Kopieren und einfügen: alle Icons auf einmal verlinkt |
Das Apple-Touch-Icon mit 180 px ist die iPhone-Größe aus Apples Leitfaden für Safari-Webinhalte (archiviert), und Chromium-Browser suchen im Manifest nach den Icons mit 192 und 512 px, bevor sie eine Website als App installieren, wie web.dev erklärt.
Auf Ihrer Website einbinden: das HTML zum Einfügen
Kopieren Sie das Paket in das Stammverzeichnis Ihrer Website und fügen Sie dann vier Zeilen in den Head-Bereich jeder Seite ein.
Die Datei add-to-your-head.html im Paket enthält diese Zeilen, mit dem SVG-Icon, wenn Ihr Logo ein Vektor ist:
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Ist Ihr Logo ein Pixelbild, verweist die zweite Zeile stattdessen auf das PNG mit 32 px:
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">Die Google-Suche zeigt Ihr Favicon neben Ihren Seiten, wenn sie es finden kann. Die Richtlinien von Google verlangen ein quadratisches Icon mit mindestens 8 × 8 px, empfehlen eines größer als 48 × 48 px und setzen voraus, dass der Googlebot sowohl die Startseite als auch die Icon-Datei crawlen kann.
Vor dem Download in Originalgröße ansehen
Ein Favicon muss bei 16 Pixeln überzeugen. Die Vorschau zeigt Ihres genau in dieser Größe, so wählen Sie gleich beim ersten Mal das richtige Bild.
Neben der großen Vorschau zeigen Mockups Ihr Icon in einem Browser-Tab und als App-Icon auf dem Smartphone, dazu das ganze Logo in einem hellen und einem dunklen Website-Header. Ein Detail, das in Tab-Größe verschwimmt, fällt hier auf, lange bevor ein Besucher es sieht.
Einfache Formen eignen sich gut für kleine Icons. Ein Symbol oder ein einzelner Buchstabe ist bei 16 px lesbar, ein vollständiger Firmenname nicht. Schneiden Sie das Logo also auf die Bildmarke zu oder erstellen Sie mit dem Tool Logo weiß machen eine kräftige, klare Version. Das Tool liefert auch ein weißes Favicon für dunkle Tabs.
Icons für Windows-Apps, Ordner und Desktop
Dieselbe .ico-Datei gibt einer Windows-Verknüpfung, einem Ordner oder einer App ein scharfes Icon in jeder Größe, von der Titelleiste bis zum Startmenü.
Eine Verknüpfung. Klicken Sie mit der rechten Maustaste auf die Verknüpfung, wählen Sie Eigenschaften, dann Anderes Symbol, und navigieren Sie zu Ihrer .ico-Datei.
Ein Ordner. Klicken Sie mit der rechten Maustaste auf den Ordner, wählen Sie Eigenschaften, öffnen Sie die Registerkarte Anpassen und klicken Sie auf Anderes Symbol.
Eine App, die Sie entwickeln. Geben Sie die .ico-Datei Ihrem Entwickler oder tragen Sie sie in die Build-Einstellungen Ihrer App ein. Weil sie ein Icon mit 256 px enthält, skaliert Windows es für alle kleineren Darstellungsgrößen herunter, statt ein kleines Icon zu vergrößern. So bleibt es auf hochauflösenden Bildschirmen gestochen scharf.
Favicon aus Ihrem Logo erstellen
Noch keine Icon-Datei? Legen Sie das Logo selbst ab. Es wird mit dem richtigen Freiraum auf einem Quadrat zentriert, und jede Größe des Pakets entsteht daraus in einem Durchgang.
Sie arbeiten am Rebranding eines Kunden? Geben Sie seine Website in den Logo-Finder ein, um mit dem Logo zu starten, das er bereits nutzt, oder holen Sie sich zuerst seine aktuellen Icons mit dem Favicon-Grabber.
Weitere kostenlose Icon- und Logo-Tools
- PNG in SVG umwandelnDie Bildmarke als Vektor, scharf in jeder Größe
- 3D-Logo erstellenDasselbe Logo als 3D-Bild oder -Video
- Logo animierenAcht 3D-Animationen mit Musik
- Logo-Intro erstellenEin 3D-Logo-Reveal als Intro für Ihre Videos
- Drehendes Logo als GIF erstellenEine nahtlose 3D-Drehung als GIF in Endlosschleife
- Logo als STL und 3MFJedes Logo als 3D-Druckdatei
- SVG in STL umwandelnVektorgrafik als 3D-Druckdatei
- PNG in STL umwandelnEin Bild als 3D-Druckdatei
- 3D-Logo erstellen: So geht’sVier Wege, einem flachen Logo Tiefe zu geben
- Logo animieren: So geht’sBewegung, Ton und Formate für jede Plattform
- Logo 3D drucken: So geht’sGrößen, Farben, Slicer und Fehlerbehebung
- Logo vektorisierenLogo für Druck und Schnitt vektorisieren
PNG in ICO umwandeln: Fragen und Antworten
Kurze Antworten zu ICO-Dateien und Favicons: Größen, das HTML, Windows-Icons und wie Sie eines aus Ihrem Logo erstellen.
Fragen Sie unsWie wandle ich ein PNG in ICO um?
Legen Sie das PNG irgendwo auf dieser Seite ab oder klicken Sie auf „Eigenes Logo ablegen“. Es öffnet sich als quadratisches Icon. Klicken Sie auf „ICO“ für eine .ico-Datei mit 16, 24, 32, 48, 64, 128 und 256 px oder auf „Favicons“ für das komplette Website-Paket. Das ist kostenlos und passiert in Ihrem Browser.
Welche Größen sollte eine favicon.ico enthalten?
Für eine Website decken 16, 32 und 48 px Tabs, Lesezeichen und hochauflösende Bildschirme ab, und die favicon.ico im Paket enthält genau diese. Für eine Windows-App oder ein Desktop-Icon verlangt Microsoft mindestens 16, 24, 32, 48 und 256 px, und der ICO-Download enthält sie alle, dazu 64 und 128 px.
Wie erstelle ich ein Favicon aus meinem Logo?
Legen Sie Ihr Logo auf dieser Seite ab. Es wird auf einem Quadrat zentriert, der Form, die jeder Icon-Platz erwartet, und Sie sehen es in einem Browser-Tab und als App-Icon, bevor Sie das Favicon-Paket herunterladen. Ein Symbol oder ein Anfangsbuchstabe aus dem Logo ist bei 16 px am besten lesbar.
Brauchen Websites noch eine favicon.ico?
Es lohnt sich, sie zu behalten. Browser fragen eine Website weiterhin nach /favicon.ico, die Google-Suche akzeptiert ICO-Dateien, und eine ICO-Datei enthält mehrere Größen. Moderne Browser lesen auch die PNG- und SVG-Icons, die im Head-Bereich Ihrer Seite verlinkt sind, und das Paket liefert Ihnen beides.
Wie binde ich das Favicon in meine Website ein?
Kopieren Sie die Dateien des Pakets in das Stammverzeichnis Ihrer Website, wo auch die Startseite liegt, und fügen Sie die Zeilen aus add-to-your-head.html in den Head-Bereich jeder Seite ein. Bei einem Website-Baukasten oder einer Shop-Plattform laden Sie das PNG mit 512 px in der Einstellung für das Website-Icon hoch.
Kann ich aus einem PNG ein Windows-Icon mit 256 px erstellen?
Ja. Der ICO-Download enthält 16, 24, 32, 48, 64, 128 und 256 px. Microsoft weist darauf hin, dass Windows Ihr Icon mit einer Version in 256 px immer nur verkleinert und nie vergrößert. So bleibt es in jeder Größe scharf. Starten Sie mit einem PNG von mindestens 256 px Breite oder mit einem Vektorlogo.
Welche Favicon-Größe ist die beste?
Eher ein Set als eine einzelne Größe: 16, 32 und 48 px in der favicon.ico, ein Apple-Touch-Icon mit 180 px und Icons mit 192 und 512 px für das Web-App-Manifest. Google empfiehlt für die Suche ein quadratisches Favicon größer als 48 × 48 px. Das Paket erstellt jedes davon aus einer einzigen Datei.
Wie nützlich war dieses Tool?
Ihr Logo auf allem, was Sie drucken, in 3D
Proofscene verwandelt PDF-Proofs in interaktive 3D-Proofs unter Ihrem eigenen Link mit Ihrem Branding, so sehen Ihre Kunden ihre Karten, Verpackungen und Armbänder, bevor sie produziert werden. Starten Sie heute kostenlos.
Kostenloses Konto · Keine Kreditkarte · Von Druckprofis entwickelt