faviconの作り方（ロゴ・画像・絵文字から）
ロゴ、写真、画像URL、絵文字から。そして16x16でも読みやすく保つ方法。
作業の全体像
- 1
ソースを選ぶ
ロゴや画像ファイル、絵文字や名前付きアイコン、あるいは画像URLから始めます。
- 2
小さいサイズに向けてデザインする
16x16ピクセルでも読みやすさを保てるよう、マークをシンプルかつ高コントラストに保ちます。
- 3
すべてのサイズと形式を書き出す
.ico、各PNGサイズ、apple-touch-icon、マニフェストのアイコンを一度に生成します。
方法A：ロゴや画像から
ロゴ、アイコン、あるいはスクリーンショットでさえもアップロードできます。ジェネレーターがトリミング、拡大縮小を行い、.icoとマニフェストを含むすべてのサイズを書き出します。透過背景のPNGやSVGのソースアートが、もっともきれいな結果になります。
方法B：絵文字や名前付きアイコンから
まだロゴがありませんか？絵文字や名前付きアイコンを選ぶと、ジェネレーターがお好みの四角や円の背景の上にレンダリングします。サイドプロジェクト、プロトタイプ、社内ツールに、認識しやすいfaviconをもっとも手早く用意する方法です。
方法C：画像URLから
URLを貼り付けると、既存のサイトやアセットから直接アートワークを取り込めます。すでにどこかで公開しているブランドを再構築するときに便利です。
小さいサイズに向けてデザインする
512x512のアートから始めて縮小しましょう。決して拡大してはいけません。
細部や細い線は落とします。16pxでは消えてしまいます。
明るいタブと暗いタブの両方でテストしましょう。それぞれに別々のマークが必要なら、テーマ対応のfaviconで対応できます。
書き出す前に、faviconサイズガイドですべての寸法を確認しましょう。
16x16を実寸で
適切な形式を選ぶ
| 形式 | 用途 |
|---|---|
| ICO | レガシーなデフォルト。今でも /favicon.ico で要求されます。複数のサイズを1つのファイルにまとめます。 |
| PNG | 最新のブラウザ、apple-touch-icon、Androidの主力。1サイズにつき1ファイルです。 |
| SVG | くっきりと拡大縮小でき、テーマの切り替えに対応します。古いブラウザ向けにPNGのフォールバックを用意します。 |
キャンペーンや季節限定アイコンをデザインする
祝祭日バージョンや製品ローンチ用のマークが欲しいですか？クリエイティブキャンバスを使えば、引き渡す前にテキスト、絵文字、アイコンでfaviconをモックし、微調整できます。
よくある質問
faviconのサイズはどれくらいがよいですか？
高解像度（512x512）でデザインし、16x16、32x32、48x48、180x180、192x192へ書き出しましょう。そうすれば、あらゆるブラウザとデバイスがくっきりしたアイコンを得られます。
絵文字からfaviconを作れますか？
はい。絵文字や名前付きアイコンを選ぶと、ジェネレーターが透過または着色した背景の上にレンダリングし、すべてのfaviconサイズを自動で書き出します。
faviconはどの形式にすべきですか？
レガシー対応のためにマルチ解像度の.ico、最新のブラウザやデバイス向けにPNG、そして任意でくっきり拡大縮小できるSVGを用意しましょう。優れたジェネレーターはこれらすべてを生成します。