ファビコンジェネレーター
ロゴ、文字、絵文字からサイトのアイコンを作り、一式をダウンロード：favicon.ico、iPhoneとAndroid用アイコン、マニフェスト、貼り付け用コード。
ブラウザのタブ
すべてのサイズ
ファイル
<head>用のコード
ファイルをサイトのルート（トップページと同じ場所）に置き、各ページのheadタグ内にこのコードを貼り付けてください。
数分でファビコン
- 1素材を選ぶ文字、絵文字、または自分の画像
- 2デザインを調整色、フォント、角丸、サイズ
- 3一式をダウンロードアイコン、マニフェスト、コード入りのZIP
テキスト、絵文字、画像
色付きの背景に文字を置くのが最も一般的です。サイト名の頭文字なら16 pxでも読めます。絵文字はデザイナーなしで目を引くアイコンを作る手軽な方法です。ロゴは正方形で細かい部分が少ないものを選んでください。16 pxでは細部がつぶれます。
小さいサイズを確認
ライトテーマとダークテーマのタブでプレビューを確認してください。暗いタブでマークが見えにくい場合は、背景を付けるか明るい色を選びます。ロゴが端に詰まっているときは、画像の周りの余白が役立ちます。
ファイルの使い方
アーカイブ内のすべてのファイルをサイトのルート（トップページと同じ場所）に置き、コードをheadセクションに貼り付けます。WordPressやTildaなどのサイトビルダーでは、通常サイト設定でfavicon.icoか512 pxのPNGをアップロードするだけで済みます。
よくある質問
答えが見つからない場合は、お気軽にお問い合わせください。
ここでは自分のアイコンをゼロから作ります。"サイトのファビコン"はその逆で、URLから他のサイトで使われているアイコンを見つけてダウンロードします。
最低限必要なのは、サイトのルートに置くfavicon.icoです。すべてのブラウザがこれを探します。32 pxのPNGはタブで鮮明なアイコンに、180 pxのapple-touch-icon.pngはiPhoneのホーム画面のアイコンになり、192 pxと512 pxのアイコンを含むsite.webmanifestはAndroidとPWAに必要です。
PNG形式の16、32、48 pxの3つの画像です。ブラウザとWindowsが適切なサイズを自動で選びます。
iOSは"ホーム画面"のアイコンの角を自動で丸め、透明な部分を黒で塗りつぶします。そのためapple-touch-iconは正方形で背景付きで保存します。透明を選んだ場合は白い背景になります。
はい。絵文字はシステムのフォントで描画されます。iPhoneではApple、WindowsではMicrosoft、AndroidではGoogleのスタイルです。ファイルにはプレビューで見えているデザインが入ります。
アーカイブをサイトのルートに展開し、"<head>用のコード"ブロックのコードをheadタグ内に貼り付けます。アイコンが変わらない場合は、キャッシュなしでページを再読み込みしてください。ブラウザは古いファビコンを長く覚えています。
こちらもお試しください
こちらも無料、登録不要