ファビコン作成

文字や絵文字、ロゴの画像から、favicon.ico と各サイズのPNG、iPhone・Android用のアイコンをまとめて作ります。

1. 文字か画像を入れる

アイコンにする文字（絵文字も）を入れるか、ロゴなどの画像を選びます。

作り方

3文字まで。小さく表示されるので、1〜2文字がおすすめです。

フォント

2. 形と色を選ぶ

背景の形と色、中身の大きさを選びます。見本ですぐに確かめられます。

形

背景の色

#f97316

iPhoneのホーム画面用（apple-touch-icon）だけは、透明にすると黒くなるので、上で選んだ背景の色で塗ります。

文字の色

#ffffff
100%

暗い画面（ダークモード）の色

favicon.svg の色だけが変わります。自動では、暗い画面で見えにくい色のときだけ明るさを反転します。

3. 見え方を確かめて保存

ブラウザのタブとホーム画面での見え方を確かめて、ZIPでまとめて保存します。

文字を入れると、ここに見本が出ます

明るい画面
暗い画面
マイサイト

ブラウザのタブ（明るい画面・暗い画面）

マイサイト
マイサイト

ホーム画面に追加したときの名前として、site.webmanifest に入ります。

64・128・256px を足します。Windows のデスクトップのショートカットなどで、大きく表示されるときに使われます。ファイルは大きくなります。

サイトに貼るHTML

ZIPの中のファイルをサイトのいちばん上（/）に置き、このHTMLを <head> の中に貼ります。

HTMLを見る
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="48x48">
<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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
ZIPに入るファイル
  • favicon.ico (16 / 32 / 48)
  • favicon.svg
  • favicon-16x16.png
  • favicon-32x32.png
  • apple-touch-icon.png
  • android-chrome-192x192.png
  • android-chrome-512x512.png
  • site.webmanifest
  • favicon-html.txt

処理はこの端末の中で行われ、画像はアップロードされません。

役に立ったら、シェアしてもらえるとうれしいです

うまく動かないときや、「こうだったらいいのに」があれば

不具合の報告改善のアイデア

使い方

  1. 1. 文字を入れる

    「文字」が選ばれた状態で、「アイコンの文字」の欄をタップして1〜3文字を入れます。絵文字も使えます。字の形は、その下の「フォント」で選べます。

  2. 2. 形と色を選ぶ

    「全画面で形と色を選ぶ」をタップすると、全画面の編集画面が開きます。下の帯の「形」のタブで「丸」をタップし、「色」のタブで背景の色の丸をタップします。まんなかの見本で、明るい画面と暗い画面での見え方をすぐに確かめられます。

  3. 3. 画像から作るとき

    ロゴなどの画像から作るときは、上の「画像」をタップし、「ファイルを選ぶ」から画像を選びます。全画面の編集画面が開き、画像の全体がアイコンに入ります。端まで広げたいときは、下の帯の「合わせ方」で「切り抜いていっぱいに」をタップします。

  4. 4. まとめて保存する

    「見え方を確かめて保存」の欄の「ZIPでまとめてダウンロード」をタップすると、ファイル一式を1つのZIPで保存します。サイトに貼るHTMLは、その下の「HTMLをコピー」でコピーできます。

こんなときにおすすめ

  • 作ったサイトに、すぐアイコンを

    ブログや個人サイト、作ったWebアプリのタブに出るアイコンを、1文字や絵文字から数秒で作れます。デザインのソフトは要りません。

    個人でサイトを作る人

  • 必要なサイズを、まとめて

    favicon.ico・16/32pxのPNG・iPhoneとAndroid用のアイコンを一度に作り、ZIPにまとめて保存します。サイズを1つずつ書き出す手間がありません。

    Web制作・エンジニアの人

  • お店や会社のロゴから

    ロゴの画像を選ぶだけで、タブやホーム画面に合う大きさにします。透明な背景も、そのまま残せます。

    お店・小さな会社の担当者

  • HTMLの練習用のページに

    貼るHTMLが付いているので、どのファイルをどこに置けばよいかが分かります。授業や練習で作るページにも使えます。

    プログラミングを学ぶ人・先生

使う前に知っておきたいこと

  • 細かい文字や写真をそのまま使うと、16pxでは潰れて見えません。形のはっきりしたマークや、1〜2文字にするのがおすすめです。
  • Windowsのタイル用の画像は作りません。いまのブラウザとスマホは、このツールで作るファイルで表示できます。
  • ロゴのまわりの余白を先に切り落としたいときは「画像を切り抜き」が便利です。

ファビコンに要るファイルと大きさ

ファビコンは、ブラウザのタブやブックマーク、検索結果、スマホのホーム画面に出るサイトのアイコンです。出る場所ごとに使われる大きさが違うため、ふつうは1つの絵から何種類かのファイルを用意します。このツールは、いまのブラウザとスマホで要るものをまとめて作り、サイトに貼るHTMLも用意します。

favicon.ico は、1つのファイルに16・32・48pxの3つの大きさが入った形式で、古いブラウザやWindowsのショートカットでも表示されます。iPhoneのホーム画面用（apple-touch-icon）は透明にできず、角はiPhoneが自分で丸めるので、このツールでは四角いまま背景を塗って作ります。favicon.svg は、暗い画面（ダークモード）に合わせて色を変えられる形式で、Chrome・Firefox・Edge のタブで使われます。

作るファイルと、使われる場所
大きさ使われる場所
favicon.ico16・32・48px（64・128・256pxも足せます）ブラウザのタブ・ブックマーク・Windows
favicon.svg—ブラウザのタブ（暗い画面で色が変わる）
favicon-16x16.png / favicon-32x32.png16・32pxブラウザのタブ
apple-touch-icon.png180pxiPhone・iPadのホーム画面
android-chrome-192x192.png / 512x512.png192・512pxAndroidのホーム画面・アプリとして追加したとき
site.webmanifest—Androidに、アイコン・名前・色を伝える

よくある質問

ファビコンの作り方と置き方で、気になりやすいことをまとめました。

画像はどこかに送られますか？

いいえ。画像の読み込みから、アイコンを描いてZIPにまとめるまで、すべてこの端末のブラウザの中で行います。選んだ画像や入れた文字が、どこかに送られることはありません。

どんな画像が向いていますか？

正方形で、形のはっきりした画像です。16pxではとても小さくなるので、細かい文字や写真は潰れてしまいます。ロゴのマークの部分だけにするか、「文字」で1〜2文字のアイコンにするのがおすすめです。横長の画像は、「合わせ方」で「全体を入れる」か「切り抜いていっぱいに」を選べます。

絵文字でファビコンを作れますか？

はい。「アイコンの文字」に絵文字を入れると、絵文字のアイコンになります。絵文字の絵柄は、使っている端末（iPhone・Android・Windows など）のものになります。

作ったファイルはどこに置けばよいですか？

ZIPを開いて、中のファイルをすべてサイトのいちばん上の場所（https://example.com/favicon.ico で開ける場所）に置きます。そのあと「サイトに貼るHTML」をコピーして、各ページの <head> の中に貼ります。

favicon.ico だけでも大丈夫ですか？

ブラウザのタブに出すだけなら、favicon.ico 1つでも表示されます。スマホのホーム画面に追加されたときのアイコンもきれいに出したいときは、ZIPの中のファイルをすべて置いて、HTMLを貼ってください。

背景を透明にできますか？

はい。「背景を透明にする」をオンにすると、背景と形の外が透明になります。ただし iPhone のホーム画面用（apple-touch-icon.png）は、透明な部分が黒く表示されるため、「背景の色」で選んだ色で塗って作ります。

WordPress でも使えますか？

はい。WordPress では「外観」→「カスタマイズ」→「サイト基本情報」の「サイトアイコン」で、ZIPの中の android-chrome-512x512.png を選びます（512px 以上の画像が必要なため）。

ファビコンを変えたのに、表示が変わりません

ブラウザは、ファビコンを長く覚えておくことがあります。ページを読み込み直しても変わらないときは、ブラウザのキャッシュを消すか、しばらく待ってから確かめてください。

SVG のファビコンは作れますか？

はい。ZIPに favicon.svg が入ります。暗い画面（ダークモード）では、「暗い画面（ダークモード）の色」で選んだ色に変わります（自動では、見えにくい色のときだけ明るさを反転します）。文字は、選んだフォントの形を画像にして埋め込み、色だけを SVG で塗り分けます。

無料で使えますか？

無料です。登録も不要で、広告もありません。作れる数にも制限はありません。

ほかのツール

  • QRコード生成

    URLや文章、Wi-Fiの接続情報からQRコードを作ります。形や色、真ん中のアイコン、写真入りのデザインも選べます。

  • 画像をWebPに変換

    PNGやJPEGを、軽くて画質のよいWebP形式に変換します。

  • 画像をPNGに変換

    JPEGやWebPを、画質が落ちないPNG形式に変換します。

  • 画像をJPGに変換

    PNGやWebPを、どこでも開けるJPG（JPEG）形式に変換します。

  • HEICをWebPに変換

    iPhoneで撮ったHEICの写真を、軽くて扱いやすいWebPに変換します。

  • HEICをPNGに変換

    iPhoneで撮ったHEICの写真を、画質を落とさずにどこでも開けるPNGに変換します。