ファビコン作成ツール:favicon.icoとアプリアイコンを作成

ファビコンの作り方

ファビコンを作るには、上にロゴを追加するか文字や絵文字を入力し、見た目を調整してZIPをダウンロードします。プレビューでは、実際の各サイズとブラウザのタブでの見え方を、ライトモードとダークモードで確認できます。

1. 元になるものを選びます。PNGまたはSVGのロゴが最適です。それ以外の画像は正方形の中に収まるように配置されます。ロゴがない場合は、色付きの背景に文字や絵文字を使いましょう。
2. 見た目を設定します。背景色または透明、形(角丸の四角・四角・円)、画像の周りの余白を調整します。
3. ダウンロードします。すべてのアイコンをダウンロードで一式が、favicon.icoのみで1つのファイルだけが手に入ります。

ファビコンパッケージの内容

Appleのアイコンには、常に単色の背景と角の丸くない四角形が使われます。iPhoneが自動で角を丸くし、透明な部分は黒で表示されるためです。

ファビコンをWebサイトに設定する

1. パッケージを解凍し、ファイルをWebサイトのルートフォルダ(トップページと同じ場所)にアップロードします。yoursite.com/favicon.icoでアイコンが開けば成功です。
2. HTMLタグ(上に表示されたものとfavicon-html.txtの内容)を、各ページの<head>に貼り付けます。
3. キャッシュをクリアして再読み込みします。ブラウザは古いファビコンを保持するため、プライベートウィンドウで確認するのが最も手早い方法です。

WordPressの場合は、カスタマイザーで512 pxのアイコンをサイトアイコンに設定すれば、他のサイズは自動で作成されます。

見やすいファビコンのコツ

• シンプルにします。16ピクセルでは、細かいロゴはぼやけてしまいます。文字入りのロゴ全体ではなく、ロゴのシンボルや頭文字を使いましょう。
• コントラストを意識します。タブの色はブラウザのテーマによってライトにもダークにもなるので、両方のプレビューを確認してください。
• 余白に気をつけます。余白を少なくするとタブでアイコンが大きく見え、少し多めにするとスマホのホーム画面で見栄えがよくなります。

別のサイズの.icoファイルが1つだけ必要な場合は、画像変換ツールで任意の画像をICOとして保存できます。

よくある質問