faviconピクセルエディタ

16×16のfaviconをきれいに描くコツ

faviconは通常16ピクセルか32ピクセルほどの小さなサイズで表示されるため、1ピクセルが大切です。ピクセルグリッド上で手描きすれば、エッジがくっきりして細部まで思い通りに仕上げられます。自動で縮小したロゴではなかなかこうはいきません。

まずは16×16のキャンバスで、シンプルなデザインを心がけましょう。太い文字1つ、シンプルなシンボル、またはロゴのいちばん特徴的な部分がおすすめです。明るいブラウザタブでも暗いタブでも読みやすいよう、コントラストを強めにして、描きながらライブプレビューで確認してください。

仕上がりに満足したら、「これでfaviconを生成」をクリックします。ジェネレーターはピクセルのシャープさを保ったまま、描いた絵から favicon.ico、PNGアイコン、Apple touch icon、Androidアイコンを作成します。

くっきりしたピクセルアートfaviconのコツ

• 使う色は2〜4色に。色数が多すぎると、小さいサイズではノイズになってしまいます。
• 1ピクセルの余白を残すか、正方形全体を塗りつぶしましょう。一部の辺にだけ触れる図形は避けてください。
• 水平線と垂直線を優先しましょう。斜め線は45度がいちばんきれいに見えます。
• 左右対称のアイコンにはミラーモード、透けさせたい部分には透明色を使いましょう。
• アイコンが細かい場合は32×32や48×48で描きましょう。高解像度画面ではより大きなサイズが使われます。