ファビコン作成について
ファビコンとは、ブラウザのタブやブックマーク、スマートフォンのホーム画面にサイトを追加したときに表示される小さなアイコンです。ファビコン作成ツールでは、画像、1〜2文字のテキスト、または絵文字から、Webサイトに必要なファイル一式を作成できます。
favicon.ico、ブラウザ・iPhone・Android用のPNGアイコン、Webマニフェスト、ページに貼り付けるHTMLの行が手に入ります。アイコンはブラウザ内で描かれ、何もアップロードされません。
使い方
- アイコンの素材を「画像」「テキスト」「絵文字」から選びます。
- 画像の場合はファイルを選び、余白と背景を設定します。テキストの場合は1〜2文字を入力し、フォント、色、形を選びます。絵文字の場合は絵文字を1つ入力するか貼り付けます。
- 明るい背景と暗い背景で、16・32・180ピクセルのプレビューを確認します。
- 「favicon.zipをダウンロード」をクリックし、ファイルをWebサイトのルートフォルダにアップロードして、HTMLコードを各ページの<head>内に貼り付けます。
主な機能
- 3つの作り方: ロゴや写真（SVGを含む）、あらゆる言語の1〜2文字、または絵文字から作成できます。
- すべてのサイズを1つのZIPに: 16・32・48 pxのアイコンを含むfavicon.ico、16・32・180・192・512 pxのPNGアイコン、site.webmanifestがそろいます。
- 小さくてもくっきり: 大きな元のアイコンを段階的に縮小するため、16 pxでも輪郭がなめらかに保たれます。
- iPhoneにも対応: iOSは透明部分を黒で表示するため、Apple Touch Iconには単色の背景が付きます。
- プライバシーを保護: アイコンはお使いのデバイス上で描かれます。何もアップロードも保存もされません。
使用例
新しいサイトのアイコンを手早く作る
サイト名の頭文字を入力し、ブランドカラーと「角丸」の形を選んで、ZIPファイルをダウンロードします。
ロゴをファビコンにする
ロゴをSVGまたはPNGで選び、少し余白と背景色を加えると、ブラウザのダークモードのタブでも見やすくなります。
制限事項と注意点
- 絵文字の見た目はApple、Google、Windowsのデバイスで異なります。アイコンには、作成に使ったデバイスの絵文字が使われます。
- テキストには、お使いのデバイスにインストールされているフォント（システムのゴシック体、Georgia、システムの等幅フォント）が使われます。
- SVGのファビコンは作成されません。ファイルは、すべてのブラウザが対応しているPNGとICOです。
- ファイルは、Webサイトのルートフォルダ（トップページと同じ場所）にアップロードして初めて機能します。
よくある質問
画像はアップロードされますか？
いいえ。画像を開き、アイコンを描いてZIPファイルにまとめるまで、すべてブラウザ内のJavaScriptで行われます。
本当に必要なファイルはどれですか？
どのブラウザでも、タブのアイコンはfavicon.icoだけで足ります。PNGファイル、Apple Touch Icon、site.webmanifestを加えると、高解像度の画面、iPhoneのホーム画面、Android向けに、よりくっきりしたアイコンが使われます。
ファイルはどこに置けばよいですか？
Webサイトのルートフォルダに置き、/favicon.icoでアイコンにアクセスできるようにします。そのうえで、すべてのページの<head>にHTMLの行を追加してください。
新しいファビコンが表示されないのはなぜですか？
ブラウザはファビコンを長い間キャッシュします。キャッシュを消去してページを再読み込みするか、プライベートウィンドウで開くと、新しいアイコンが表示されます。