Favicon und Web-Manifest

Ein Bild hinein, der ganze Satz heraus: eine echte ICO-Datei mit mehreren Größen, das Apple-Touch-Icon so abgeflacht, wie Apple es verlangt, die Manifest-PNGs, das Web-Manifest selbst und der HTML-Block zum Einfügen. Außerdem sehen Sie den maskable-Beschnitt von Android, bevor er zubeißt — dort verlieren die meisten Icons unbemerkt ihre Ränder.

Bild hier ablegen oder klicken zum Auswählen
Quadratisch funktioniert am besten, mindestens 512 Pixel. Ein transparentes PNG liefert das sauberste Ergebnis.
Was unter dem Symbol auf einem Startbildschirm Platz findet.
Füllt Transparenz, wo sie nicht erlaubt ist, und dient dem maskable-Symbol als Rand.
DateiGrößeWas es verwendet
 

    


    

    

      
Warum die .ico-Datei weiterhin zählt

      
Ein einzelnes PNG genügt den meisten Browsern, und wenn Sie nur ein Tab-Symbol bräuchten, könnten Sie hier aufhören. Die ICO-Datei verdient ihren Platz, weil sie mehrere Auflösungen in einer Datei hält und das Betriebssystem die passende auswählt: der Tab nimmt 16, eine angeheftete Verknüpfung oder ein Desktop-Link nimmt 32 oder 48 — und jede wird aus einer Bitmap gezeichnet, die für genau diese Größe gemacht wurde, statt im Betrieb aus einer großen heruntergequetscht zu werden. Die Datei, die hier entsteht, ist ein Behälter voller PNGs mit einem kleinen Kopf, und genau das liest jeder in diesem Jahrhundert erschienene Browser.

      
Die maskable-Schutzzone

      
Android verspricht nicht, Ihr Symbol als Quadrat zu zeigen. Je nach Launcher beschneidet es zu einem Kreis, einem Squircle oder einem abgerundeten Quadrat, und garantiert ist Ihnen nur der innere Kreis: achtzig Prozent der Breite, zentriert. Grafik, die bis an die Ränder läuft, ist genau die Grafik, die ihre Ränder verliert. Das Mittel dagegen ist, die Manifest-Symbole in diese Schutzzone hinein zu polstern, und die Vorschau hier zeichnet den Beschnitt, damit Sie ihn vor den Nutzern sehen.

      
Warum das Apple-Touch-Icon keine Transparenz hat

      
iOS setzt das Startbildschirm-Symbol auf seine eigene abgerundete Form und behandelt einen Alphakanal nicht so, wie man es sich wünschen würde: transparente Bereiche kommen schwarz heraus. Deshalb wird genau diese eine Datei vor dem Kodieren auf Ihre Hintergrundfarbe abgeflacht, während die Manifest-PNGs ihr Alpha behalten — dort wird es richtig behandelt.

      
Was mit den Dateien zu tun ist

      
Legen Sie sie in das Wurzelverzeichnis der Website, nicht in einen Assets-Ordner: Browser und Crawler raten den Favicon-Pfad, und manche holen ihn, ob Sie ihn verlinken oder nicht. Fügen Sie danach den HTML-Block in den Kopf Ihrer Seite ein. Der Manifest-Pfad ist die einzige Zeile, die dahin passen muss, wo Sie die Datei tatsächlich ablegen.


      
FAQ

      

        
Brauche ich noch eine favicon.ico, wenn ich PNGs habe?
Streng genommen nein. Praktisch ja: jede Menge Crawler, Feedreader und ältere Werkzeuge fordern das Favicon über den Pfad an und schauen sich Ihr Markup nie an. Es kostet ein paar Kilobyte.

        
Mein Symbol wirkt bei 16 Pixeln matschig. Was kann ich tun?
Hier lässt sich nichts machen, weil schlicht der Platz fehlt. Bei dieser Größe hat ein Zeichen etwa zehn lesbare Pixel in der Breite; eine Wortmarke wird immer zu Brei. Geben Sie eine vereinfachte Fassung als Quelle mit — eine Form, ein Buchstabe — und heben Sie die vollständige Sperrung für alles andere auf.

        
Sollte ich den maskable-Rand abschalten?
Nur wenn Ihre Grafik ohnehin schon in einem großzügigen eigenen Rand sitzt. Füllt sie den Rahmen aus, lassen Sie ihn an, sonst schneidet Android hinein.

        
Wird mein Bild irgendwohin hochgeladen?
Nein. Jede Größe wird auf einem Canvas in dieser Seite gezeichnet, und das Archiv entsteht im Arbeitsspeicher. Es wird nichts gesendet.

      

      
Entwickelt vom Team hinter GO AI. App-Icon-Generator · Stapel-Größenänderung · Alle kostenlosen Tools