ファビコン作成
ロゴからサイト用のファビコン一式を作成。
ブラウザ内で動作します。ファイルが端末から出ることはありません。
- ICOと全PNGサイズ
- 貼り付け用HTMLも生成
- 余白を調整可能
ファビコンを作成する方法
- 正方形のロゴや画像をここにドロップします。
- 必要に応じて余白と背景を調整します。
- ZIPをダウンロードし、HTMLを貼り付けます。
ZIPの中身
| ファイル | サイズ | 使われる場所 |
|---|---|---|
| favicon.ico | 16・32・48pxを1ファイルに | 古いブラウザ、ブックマーク |
| favicon-16x16.png | 16×16 | ブラウザのタブ |
| favicon-32x32.png | 32×32 | ブラウザのタブ、タスクバー |
| apple-touch-icon.png | 180×180 | iPhoneとiPadのホーム画面 |
| android-chrome-192x192.png | 192×192 | Androidのホーム画面 |
| android-chrome-512x512.png | 512×512 | Androidのスプラッシュ・アプリアイコン |
| site.webmanifest | テキストファイル | Androidに使うアイコンを伝える |
ファイルの置き場所
ZIP内のすべてのファイルを、サイトのルートフォルダ（index.htmlと同じ場所で、サブフォルダではない）にアップロードします。次に、提供されたHTMLをすべてのページのheadの中、または共有のヘッダーテンプレートがあればそこに貼り付けてください。
余白と背景のコツ
- ロゴが正方形の端に触れている場合は10〜15%の余白を追加し、16ピクセルサイズで切れて見えないようにしましょう。
- ロゴに透明部分があり、ブラウザ自体のタブの色と合わずに見た目がおかしくなる場合は、背景の塗りつぶしをオンにしてください。
- 細かい模様や細い文字があるロゴより、シンプルでコントラストのはっきりしたロゴの方が16×16でも見やすくなります。
ファビコン作成のFAQ
ZIPの中身は何ですか？
16、32、48ピクセルを含むfavicon.ico、favicon-16x16.png、favicon-32x32.png、apple-touch-icon.png、2種類のandroid-chrome用PNG、site.webmanifestファイルです。
これらのファイルはどこに置けばいいですか？
サイトのルートフォルダにアップロードし、すべてのページのheadにHTMLを貼り付けてください。
画像はあらかじめ正方形にしておくべきですか？
正方形のロゴが最もきれいに仕上がります。正方形でない画像は余白付きで正方形の中に収められるため、引き伸ばされることはありません。
余白は何のためにありますか？
正方形の中でロゴの周りに余白を作り、小さいアイコンサイズでデザインが端に触れてしまうのを防ぎます。
画像はアップロードされますか？
いいえ。すべてのアイコンサイズはブラウザ内で生成されるため、画像が端末から出ることはありません。
6つのファイルすべてが必要ですか、favicon.icoだけでいいですか？
最近のブラウザは主にPNGファイルとsite.webmanifestを使います。favicon.icoは古いブラウザや一部のブックマークバー用に残されているため、幅広く対応させたいならすべてアップロードしましょう。
元にする画像はどのくらいのサイズが必要ですか？
最低でも512×512ピクセルです。マスターアイコンはそのサイズで生成されるため、それより小さい元画像は引き伸ばされてぼやけて見えることがあります。
マニフェストファイルは編集が必要ですか？
生成されたsite.webmanifestはサイト名にプレースホルダーのテキストを使っています。後でテキストエディタで開き、nameとshort_nameの欄をサイトに合わせて更新してください。