ファビコン作成

サイトアイコン一式と favicon.ico

ファイルを選ぶ

作成されるアイコン

画像を選ぶと結果が表示されます。

16×16: ブラウザのタブ・ブックマーク
32×32: ブラウザのタブ・ブックマーク
48×48: ブラウザのタブ・ブックマーク
180×180: iPhone・iPad のホーム画面
192×192: Android のホーム画面・ウェブマニフェスト
512×512: Android のホーム画面・ウェブマニフェスト
favicon.ico: 16×16 · 32×32 · 48×48

サイトに貼り付けるHTML

ダウンロードしたファイルをサイト直下に置き、下の行を <head> 内に入れてください。

<link rel="icon" href="/favicon.ico" sizes="any">
<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">

すべてブラウザ内で処理され、画像は送信も保存もされません。保存したファイルには撮影日時・位置情報(GPS)・カメラなどの元データ(EXIF)は残りません。

使い方

画像1枚からサイトアイコン一式を作ります。ブラウザのタブ用 16・32・48px、iPhone のホーム画面用 180px、Android 用 192・512px の PNG と favicon.ico をまとめて作り、`<head>` に貼る HTML もお渡しします。処理はブラウザの中だけで行われ、アップロードされません。

こんなときに使います

新しいサイトやブログにタブのアイコンを設定するとき。
ロゴを変えたあとにアイコン一式を作り直すとき。
スマートフォンのホーム画面に追加されたときのアイコンまで用意するとき。

使い方

元の画像を選びます。正方形に近い512px以上を推奨します（最小48px）。
作られるアイコンがサイズごとにプレビューされ、どこで使われるサイズかも表示します。
一式をまとめてダウンロード（ZIP）するか、favicon.ico だけ受け取れます。
ZIP を展開してサイトの最上位フォルダに置き、同梱の HTML を `<head>` に貼り付けます。

知っておきたいこと

favicon.ico の中には 16・32・48px の3種類が一緒に入っています。古いブラウザと Windows のエクスプローラーはこのファイルを見ます。
元が正方形でない場合は切り取らずに中央へ置き、余った部分は透明にします — ロゴが切れるほうが悪い結果だからです。
元より大きいサイズは拡大して作るためぼやけることがあります。 そのサイズがある場合は画面でお知らせします。
16px ではごく細い線や文字はつぶれます。単純な形ほど小さなサイズで見やすくなります。
すべてブラウザの中で作ります — ロゴをどこにも送りません。

よくある質問

ico と png はどちらを使えばよいですか？

両方置くのが安全です。最近のブラウザは PNG を読みますが、古いブラウザや Windows のエクスプローラーは favicon.ico を探します。ZIP には両方入っており、同梱の HTML が適切に結び付けます。

アイコンを変えたのに古いままです。

ブラウザがアイコンを長く保存しているためです。強制再読み込み（Ctrl+Shift+R）するか、ファイル名のうしろに ?v=2 などを付けて URL を変えると読み直されます。

正方形でないとどうなりますか？

切り取らずに中央へ置き、余白は透明にします。ロゴ全体が見えるほうが切れるよりよいと考えたためです。いっぱいに使いたい場合は「画像切り取り」で先に 1:1 に切ってください。

背景が透明なアイコンにできますか？

元が透明な PNG ならそのまま透明になります。ただし暗いテーマのブラウザでは暗いロゴが埋もれることがあるので、背景のある画像のほうが安全な場合も多いです。