favicon.ico、PNGのサイズ、Apple touch icon、Androidとマスカブルアイコン、Webマニフェスト、貼り付け用のHTMLが、1つの.zipにまとまって得られます。文字や画像から、Webサイト用の完全なアイコンセットを作成します。無料で、プライバシーも守られます。
ファビコンの作り方
- 「開始方法」で、「文字」または「画像」を選びます。画像の場合は、「画像を選択」を押します。
- 文字の場合は、「文字」を入力して、「太さ」「フォント」「文字色」「スタイル」「背景」を選びます。
- 「形」を選びます：正方形、丸角、円。「余白」を調整するか、背景を透明のままにします。
- 「あなたのサイト」で、「サイト名またはアプリ名」「短い名前」「アイコンのフォルダ」を追加します。
- 「プレビュー」を確認します。ブラウザのタブ、検索結果、スマートフォンでのアイコンが表示されます。
- ページに貼り付けるコードには「HTMLをコピー」を、ファイルには「すべてダウンロード（.zip）」を押します。
各ファイルの用途
favicon.icoは、16、32、48ピクセルのバージョンを1つのファイルにまとめ、古いものを含め、すべてのブラウザで動作します。PNGのファビコンは、最新のブラウザに、鮮明なタブのアイコンを提供します。apple-touch-icon.pngは、サイトがiPhoneやiPadのホーム画面に追加されるときに使われ、Androidのアイコンとsite.webmanifestは、サイトがAndroidにインストールされるときや、アプリとして使われるときに使われます。
マスカブルアイコンとは？
Androidは、機種によって、アプリのアイコンを、円、スクワークル、角丸の四角形にクロップします。マスカブルアイコンは、四角形全体を背景色で埋め、ロゴを中央の80%の内側に収めるため、機種がどんな形を使っても、重要なものが切れません。
わかりやすいファビコンのコツ
16ピクセルでは、ディテールが消えます。単語入りの完全なロゴよりも、太い文字、シンプルなマーク、またはロゴの最も認識しやすい部分のほうが、うまくいきます。マークと背景の強いコントラストは、ライトとダークのどちらのブラウザテーマでも、他のタブの中で目立たせるのに役立ちます。
サイトにアイコンを追加する
- ファイルを解凍して、「アイコンのフォルダ」に付けた名前のフォルダにアップロードします。通常は、サイトの最上位です。
- コピーしたHTMLを、すべてのページのheadセクションに貼り付けます。
- 古いアイコンが表示され続ける場合は、ページを再読み込みして、ブラウザのキャッシュをクリアしてください。ブラウザは、ファビコンを長期間保持します。
- すべてのサイズが鮮明になるよう、幅512ピクセル以上の正方形の画像から始めてください。
こんな方に
新しいWebサイトを持つ小さな会社のオーナー、クライアントのサイトを作るフリーランサー、ブロガー、プロジェクトをオンラインに公開する学生。先にロゴをリサイズしたり変換したりするには、画像変換をお試しください。
よくある質問
画像はアップロードされますか？
いいえ。アイコンはブラウザ上で作成されます。
どの画像形式を使えますか？
PNG、JPG、SVG、WebP。
古いファビコンがまだ表示されるのはなぜですか？
ブラウザはファビコンを長期間キャッシュします。キャッシュを消去するか、プライベートウィンドウでサイトを開いて確認してください。