ロゴから、サイトのファビコン一式を作成できます。ブラウザのタブのアイコン、iPhoneとAndroidのホーム画面のアイコン、マニフェスト、それらを読み込むHTMLコードです。PNG、JPG、WebP、SVGの画像をアップロードすると、すべてを入れたZIPをダウンロードできます。登録不要で、透かしも入りません。
ファビコンを作成する方法
- ロゴやアイコンをPNG、JPG、WebP、SVGで選びます。正方形で、512ピクセル以上が理想です。
- 画像全体を表示するか正方形を埋めるかと、Appleのアイコンの背景色を選びます。
- 「ファビコンを作成」を押して、ZIPをダウンロードします。
- ファイルをサイトのルートにアップロードし、head.htmlのコードを各ページのheadタグに貼り付けます。
パッケージの中身
| ファイル | 用途 |
|---|---|
favicon.ico |
昔からあるタブのアイコン。16・32・48ピクセルのサイズを1つのファイルに収めています。リンクしなくても、ブラウザはこのファイルを探します。 |
favicon-16x16.png と favicon-32x32.png |
最近のブラウザのタブやブックマークのアイコン。 |
apple-touch-icon.png |
サイトをホーム画面に追加したときにiPhoneやiPadが使う、180ピクセルのアイコン。 |
android-chrome-192x192.png と android-chrome-512x512.png |
Androidやインストールできるウェブアプリ用のアイコン。 |
site.webmanifest |
Androidのアイコンとサイトのテーマカラーを指定するマニフェスト。 |
head.html |
各ページからアイコンを読み込むためのタグ。 |
サイトへの設置方法
- ZIPを展開し、
head.html以外のすべてのファイルをサイトのルート（トップページがある場所）にアップロードします。 - 次のタグ（
head.htmlにも入っています）を、各ページのheadタグの中にコピーします。
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
- 必要なら、
site.webmanifestのnameとshort_nameにサイト名を入れてください。
ブラウザはファビコンをキャッシュします。新しいファビコンがすぐに表示されない場合は、ページを強制的に再読み込みするか、しばらく待ってください。
全体を表示するか、枠を埋めるか
アイコンはすべて正方形です。画像が正方形でない場合は、全体を表示して透明な余白を入れるか、枠を埋めてはみ出した左右を切り取るかを選べます。文字の入った横長のロゴなら、ロゴのマークだけを正方形に切り抜いて使うほうが、たいていきれいに仕上がります。
Appleのアイコンは透明にできません。iOSが背景を黒で塗りつぶしてしまうためです。そのため、選んだ背景色でAppleのアイコンを作ります。この色はAndroidでのサイトのテーマカラーにも使われます。ほかのアイコンは透過を保ちます。
きれいに仕上げるコツ
- 大きな画像から始めましょう。512 × 512ピクセル以上、できればSVGがおすすめです。小さなアイコンはこの画像から作られます。
- シンプルにしましょう。16ピクセルでは文字や細かい部分は読めません。マークや頭文字を、はっきりした色の組み合わせで使うほうがずっと効果的です。
.ico ファイルだけが必要なら、PNGをICOに変換することもできます。
制限事項
- 一度に1枚、最大20 MB、100メガピクセルまで。
- サイト自体には手を加えません。ファイルのアップロードとタグの追加は、ご自身かサイトの管理者が行ってください。
よくある質問
ファビコンを作るには、画像はどのくらいの大きさが必要ですか？
大きいほど良く、512 × 512ピクセル以上か、SVGがおすすめです。512から16ピクセルまでのすべてのアイコンを、この画像から作ります。
ファビコンのファイルはどこにアップロードしますか？
サイトのルート、つまりトップページと同じフォルダです。そのあとで、head.htmlのタグを各ページのheadタグに貼り付けてください。
新しいファビコンがブラウザに表示されないのはなぜですか？
ブラウザがファビコンをキャッシュしているためです。ページを強制的に再読み込みするか、シークレットウィンドウで開くか、更新されるまでしばらく待ってください。
Appleのアイコンに背景色が付いているのはなぜですか？
iOSはホーム画面のアイコンの透過に対応しておらず、背景を黒で塗りつぶしてしまうためです。きれいに見えるよう、選んだ背景色で作っています。
WordPressのサイトのファビコンも作れますか？
WordPressには「サイトアイコン」という専用の設定があります（外観 › カスタマイズ › サイト基本情報。バージョンやテーマによっては一般設定）。正方形の画像をアップロードすれば、必要なサイズを自動で作ります。このツールのパッケージは、ファイルのアップロードやコードの編集ができるサイト向けです。