1つのアイコンを、さまざまなサイズで
ブラウザはタブやブックマークで16pxと32px、iPhoneはホーム画面で180pxのAppleタッチアイコン、AndroidやインストールされたWebアプリは192pxと512pxを使い、Googleは検索結果の横にファビコンを表示します。パッケージにはそのすべてが入っていて、favicon.ico、PNG、Webマニフェスト、ページのheadに貼り付けるHTMLタグがそろっています。
デザインツール
ファビコンを作成・編集する
ロゴ、1文字、絵文字からファビコンをデザインし、ブラウザやスマホに必要な全サイズを、貼り付けるHTMLとあわせてダウンロードできます。
文字（1〜3文字）
形
ブラウザのタブ
マイサイト
Google検索
yourwebsite.com
あなたのサイト — ようこそ、私たちのWebサイトへ
製品とサービスをご紹介します。お客様のニーズにぴったりのソリューションをご用意しています。
ブックマークバー
ブックマーク
マイサイト
スマホのホーム画面
📷
App🎵
App📧
AppYou
全サイズ
16
32
48
64
128
貼り付けるHTMLコード
<link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="manifest" href="/site.webmanifest">
くわしく知る
ファビコン：サイトに必要なもの
16pxでも読み取れるアイコンにするには
タブのサイズでは、細かい部分は消えてしまいます。ロゴ全体より、1〜2文字、シンプルな記号、くっきりした絵文字のほうが読み取りやすくなります。コントラストを付け（透過ロゴの後ろに単色の背景を置くなど）、端に触れないよう余白をとり、ダウンロードする前に各サイズのライブプレビューで確認しましょう。元の画像は20MBまで対応しています。
使い方
ファビコン作成は3ステップ
素材を選ぶ
ロゴの画像をアップロードするか、1文字や短い文字を入力するか、絵文字を選びます。モードによって、ファビコンの出発点が変わります。
デザインをカスタマイズする
形を四角から円まで調整し、背景色やグラデーションを付け、余白を微調整して、必要なら枠線や影を加えます。
ダウンロードして設置する
ファビコンのパッケージ（ZIP）をダウンロードします。ファイルをWebサイトのルートに展開し、HTMLをページの<head>タグに貼り付けます。
活用ガイド
ファビコン作成を使いこなすコツ
しくみ
画像を選ぶか、数文字を入力するか、絵文字を選ぶと、設定した形・背景・枠線・影で、必要なサイズごとにキャンバスにアイコンが描かれます。
ダウンロードされるZIPには、favicon.ico（16・32・48pxを内包）、各サイズのPNG、Appleタッチアイコン、site.webmanifest、そのまま貼り付けられるHTMLが入っています。
かんたん・すばやいプライバシーと安全性
ファイルやデータが端末の外に出ることはありません。処理はすべてブラウザ内で行われます。
ロゴはお使いの端末で描かれてパッケージ化されます。何もアップロードされず、何も保存されません。
ブラウザ内で完結よくある質問
ファビコン作成のよくある質問
ファビコン作成ツールについて知っておきたいこと