Erstelle ein Favicon-Paket aus einem einzigen Bild
Lege ein Logo ab. Lade ein ICO, die PNG-Größen und ein apple-touch-icon herunter, plus einen Schnipsel zum Einfügen in dein HTML. Die Datei verlässt dieses Gerät nie.
- Schnell
- 100% privat
- Immer kostenlos
- Jeder Browser
Drop images anywhere on this page
Ein PNG, JPG, SVG oder WebP. Es bleibt auf diesem Gerät.
Wann du ein Favicon-Paket erstellst
Nutze das, wenn eine Website noch ein klassisches favicon.ico braucht, neben den PNG-Symbolen, die Telefone und Browser wirklich anzeigen. Ein Ausgangsbild reicht: ein quadratisches Logo als PNG oder SVG funktioniert am besten. Das Bild wird in ein Quadrat eingepasst (einpassen), also bekommt eine breite Marke einen Rand, statt sich zu verziehen.
Die heruntergeladenen PNGs kommen standardmäßig mit transparenter Fläche. Das ICO legt ein deckendes Weiß (oder die Farbe, die du wählst) hinter die Marke, weil ein Großteil der alten Tab-Oberfläche noch ein deckendes Symbol erwartet. Das ist kein Werkzeug mit Ebenen. Wenn du vorher zuschneiden oder Text setzen musst, mach das in Photasium und lege das Ergebnis hier ab.
Das Zip enthält favicon.ico (16 und 32), PNG in 16, 32, 180, 192 und 512 sowie apple-touch-icon mit 180. Füge den Schnipsel in den head deines Dokuments ein. Die optionalen Einträge mit 192 und 512 sind das, was ein Manifest für eine Web-App normalerweise will. Die Dateinamen kannst du selbst in die manifest.json kopieren.
Nach dem Herunterladen komprimiere nur, wenn ein PNG noch schwer ist. Favicons sollten klein bleiben. Für ein Bild in sozialen Netzwerken nutze OG-Bild 1200×630 statt dieses Pakets.
Die Arbeit passiert in diesem Browser. Kein Konto, und nichts wird hochgeladen. Schließe den Tab, und das Logo ist aus dem Werkzeug verschwunden.
So geht's
- Lege ein PNG, JPG, SVG oder WebP ab. Es verlässt dieses Gerät nicht.
- Lass das PNG transparent, oder wähle eine deckende Farbe. Das ICO nutzt Weiß oder diese Farbe.
- Erstelle das Paket, kopiere den HTML-Schnipsel und lade das Zip herunter.
Tipps
- Ein quadratisches Logo wirkt schärfer. Breite Schriftlogos bekommen seitlich einen Rand.
- Nutze kein Foto mit 4000 px als Favicon. Starte mit einer einfachen Marke.
- Im ICO stecken PNG-Bilder in 16 und 32, zusammengepackt. Moderne Browser nutzen auch die Links zu den PNGs.