Screenshots zeigen die englische App. Voreingestellte Namen und Steuerelemente sind auch in Ihrer App-Sprache verfügbar.

Ihr Ausgangspunkt

Verwenden Sie Favicon-Set in PixRinse und vergleichen Sie diese Einstellungen dann mit Ihrem tatsächlichen Ziel.

Einstellungen für diesen Workflow
Favicon-PNGs16 / 32 / 48 px
Apple Berühren Sie PNG180 px
Web-App-PNGs192 / 512 px
FarbesRGB
PixRinse Favicon-Set voreingestellt mit sechs PNG Website-Symbolgrößen
Für diese exemplarische Vorgehensweise verwendete Einstellungen. Wählen Sie den Screenshot aus, um ihn in voller Größe zu betrachten.
Das Format PNG und In sRGB konvertieren werden in den Codierungssteuerelementen angezeigt.
Das Format PNG und In sRGB konvertieren werden in den Codierungssteuerelementen angezeigt.

Wie es geht

  1. Bereiten Sie eine quadratische Quellenmarkierung vor

    Verwenden Sie eine Quelle, die mindestens so groß ist wie das größte benötigte Symbol. Vereinfachen Sie feine Details, die bei 16 px möglicherweise verschwinden.

  2. Wählen Sie Favicon-Set

    Sehen Sie sich die sechs Größen an. Die Vorlage verwendet eine zentrierte Abdeckungsregel, sodass eine nicht quadratische Quelle möglicherweise beschnitten wird.

  3. Überprüfen Sie die kleinsten Ausgänge

    Überprüfen Sie die Dateien 16 und 32 px in ihrer tatsächlichen Größe. Automatische Größenanpassungen können bewusste optische Anpassungen einer komplexen Markenmarke nicht ersetzen.

  4. Exportieren Sie Bilder und fügen Sie deren Referenzen zu Ihrem Website-Code hinzu

    Fügen Sie die PNG-Dateien zu Ihrer Website hinzu und verweisen Sie auf die relevanten Größen im HTML-Head- und Web-App-Manifest.

DIE DATEIEN AUS DIESER KOMPLETTSTRUKTUR

Was dieses Beispiel hervorgebracht hat

Eine 1024 × 1024-Quadratmarkierung erzeugt sechs PNGs ohne die Warnung wegen nicht quadratischer Quelle. Jede exportierte Datei enthält ein sRGB-Profil.

Quadratische Quelle
1024 × 1024
PNG Exporte
6
Farbprofil
sRGB bei jeder Ausgabe
Tatsächlich exportierte Dateien
DateiFormatPixelBytes
android-chrome-192x192.pngPNG192 × 19226.980
android-chrome-512x512.pngPNG512 × 512174.868
apple-touch-icon.pngPNG180 × 18023.839
favicon-16x16.pngPNG16 × 16692
favicon-32x32.pngPNG32 × 321.751
favicon-48x48.pngPNG48 × 483.093
Erstellen Sie eine Reihe von Website-Symbolen: tatsächlich exportierte Ergebnisse
Tatsächliche Exportergebnisse für die in dieser exemplarischen Vorgehensweise gezeigten Beispieldateien.

Gemessen anhand der gezeigten Beispieldateien. Ihre Ergebnisse hängen von Ihren Originalen und Einstellungen ab. In dieser exemplarischen Vorgehensweise werden eigene PixRinse-Kunstwerke auf quadratischen oder transparenten Beispielleinwänden verwendet.

Ein paar häufig gestellte Fragen

Erstellt es favicon.ico?

Nein. Das integrierte Set exportiert sechs PNG-Dateien mit bestimmten Dateinamen.

Funktioniert ein breites Logo?

Eine quadratische Quelle ist vorzuziehen. Die Cover-Regel kann dazu führen, dass eine große Quelle zugeschnitten wird. Sehen Sie sich daher die Vorschau sorgfältig an.

Setzen Sie den Workflow in Gang.

Öffnen Sie PixRinse, fügen Sie ein paar Bilder hinzu und beginnen Sie mit den oben genannten Einstellungen.

Für Mac ladenKostenlos: bis zu 10 Bilder pro Stapel und eine Ausgabe pro Quelle. Für die mehreren Ausgaben dieses Workflows ist Pro erforderlich. Kostenlos und Pro vergleichen.