ファビコン作成

ファビコン作成とは？

ファビコン（favicon）は、ブラウザのタブ、ブックマーク、検索結果、スマホのホーム画面に表示されるWebサイトの小さなアイコンです。ファビコンがないとタブに空のアイコンが表示されてサイトが未完成に見え、Googleの検索結果でも標準の地球儀アイコンが表示されます。

このツールは、ロゴ画像や文字・絵文字1つからあらゆる端末に必要なサイズのファビコン一式を作ります。16pxのようなごく小さいサイズは、大きな画像を縮小せずにそのサイズで直接描くので、よりくっきり表示されます。作業はすべてブラウザの中で行われます。

使い方

1. 文字・絵文字か画像を選びます。文字は1〜2文字、画像は正方形のロゴが最も合います。
2. 背景色（または透明）、角の丸み、内側の余白を調整します。右側（スマホでは下）のプレビューで、実際のタブのサイズで確認できます。
3. まとめてダウンロード（ZIP）を押してファイル一式を受け取り、解凍してWebサイトのルートフォルダにアップロードします。
4. 下のHTMLコードをコピーして、すべてのページの<head>内に貼り付けます。

ZIPに含まれるファイル

iPhoneのホーム画面アイコンは透過背景に対応しておらず黒く表示されるため、「透明」を選んでもapple-touch-icon.pngだけは白背景で保存します。

小さいサイズでも見やすいファビコンを作るには

• 16pxのタブアイコンでは、細い線や小さな文字はつぶれてしまいます。ロゴ全体よりもシンボルや頭文字1文字のほうがよく見えます。
• 背景と文字の明るさの差を大きくしましょう。ダークモードのタブでも見えるよう、透明背景より色付きの背景のほうが安心です。
• ファビコンを変えたのに古いまま表示されるのは、ブラウザのキャッシュのせいです。スーパーリロード（Ctrl+Shift+R）をするか、ファイル名の後ろに?v=2を付けてください。