PixRinseスクリーンショットは英語のアプリを示しています。プリセット名とコントロールは、アプリの言語でも使用できます。
あなたの出発点
PixRinse で Faviconセット を使用し、実際の目的地に照らしてこれらの設定を確認してください。
| ファビコン PNG | 16 / 32 / 48 px |
|---|---|
| Apple PNG をタッチ | 180 px |
| ウェブアプリの PNG | 192 / 512 px |
| 色 | sRGB |
やり方
四角いソースマークを用意する
少なくとも必要な最大のアイコンと同じ大きさのソースを使用してください。 16 px では消えてしまう可能性がある細かい部分を簡略化します。
Faviconセット を選択してください
6つのサイズを確認してください。テンプレートでは中央揃えのカバー ルールが使用されているため、非正方形のソースがトリミングされる可能性があります。
最小の出力を検査する
16 ファイルと 32 px ファイルを実際のサイズで確認します。自動サイズ変更は、複雑なブランド マークに対する意図的な光学調整に代わるものではありません。
画像をエクスポートし、その参照を Web サイトのコードに追加します
PNG ファイルを Web サイトに追加し、HTML ヘッドと Web アプリのマニフェストで関連するサイズを参照します。
このウォークスルーのファイル
この例で得られたもの
1024 × 1024 正方形マークは、非正方形ソース警告なしで 6 つの PNG を生成します。エクスポートされたすべてのファイルには sRGB プロファイルが含まれています。
- 正方形のソース
- 1024 × 1024
- PNG エクスポート
- 6
- カラープロファイル
- すべての出力で sRGB
| ファイル | 形式 | ピクセル | バイト |
|---|---|---|---|
| android-chrome-192x192.png | PNG | 192 × 192 | 26,980 |
| android-chrome-512x512.png | PNG | 512 × 512 | 174,868 |
| apple-touch-icon.png | PNG | 180 × 180 | 23,839 |
| favicon-16x16.png | PNG | 16 × 16 | 692 |
| favicon-32x32.png | PNG | 32 × 32 | 1,751 |
| favicon-48x48.png | PNG | 48 × 48 | 3,093 |
示されているサンプル ファイルで測定されています。結果はオリジナルと設定によって異なります。このチュートリアルでは、正方形または透明なサンプル キャンバス上で所有されている PixRinse アートワークを使用します。
よくある質問のいくつか
favicon.ico が作成されますか?
いいえ。組み込みセットは、特定のファイル名を持つ 6 つの PNG ファイルをエクスポートします。
幅広のロゴは機能しますか?
正方形のソースが好ましい。カバー ルールではソースの幅が広く切り取られる可能性があるため、プレビューを注意深く確認してください。
ワークフローを機能させましょう。
PixRinse を開き、いくつかの画像を追加し、上記の設定から始めます。
Mac版をダウンロード無料: バッチごとに最大 10 イメージ、ソースごとに 1 つの出力。このワークフローの複数の出力には Pro が必要です。 無料とプロを比較します。