🖼 画像・メディア

ファビコン生成

画像・文字・絵文字から、各サイズ(16〜512px)のファビコンと apple-touch-icon、そして favicon.ico をまとめて生成します。ZIPで一括ダウンロードでき、<head> に貼るHTMLスニペットも表示。処理はすべて端末内(Canvas)で行い、画像はサーバーに送信されません。

例(クリックで試す)
文字色
背景色
プレビュー

ファビコン生成ツールの使い方

上のセグメントで素材(文字・絵文字・画像)を選び、文字や画像、背景色・形・余白を設定するだけ。設定したその場でプレビューが更新されるライブ動作です。「ZIPでまとめてダウンロード」を押すと、各サイズのPNG・apple-touch-icon・favicon.ico・貼り付け用のHTMLスニペットが1つのZIPに入って保存されます。favicon.ico だけ欲しいときは右のボタンからどうぞ。

生成されるファイルと設置例

ZIPには次のファイルが入ります:favicon-16x16.png / favicon-32x32.png / favicon-48x48.png / favicon-64x64.png / favicon-128x128.png / favicon-192x192.png / favicon-256x256.png / favicon-512x512.png / apple-touch-icon.png(180px)/ favicon.ico / snippet.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">
  • 文字:1〜3字を背景の上に配置します。サービス名の頭文字などに。
  • 絵文字:好きな絵文字をそのままアイコンに。
  • 画像:手持ちの画像(ロゴ等)を各サイズに縮小します。正方形がきれいです。
  • 形・余白・背景色:四角/角丸/円、余白の有無、背景色(透過も可)を選べます。

こんな場面で便利です

  • 新しいサイトやアプリのファビコンをサッと用意したいとき
  • ロゴ画像から各サイズのアイコン一式をまとめて書き出したいとき
  • 頭文字だけのシンプルなファビコンを作りたいとき

アイコン用に画像を切り抜くなら 画像トリミング、サイズだけ変えたいなら 画像リサイズ もどうぞ。

よくある質問

アップロードした画像はサーバーに送信されますか?
いいえ。リサイズやファビコン生成の処理はすべてお使いのブラウザ内(Canvas)で完結し、画像が外部に送信・保存されることはありません。
どのサイズのファビコンが作れますか?
16・32・48・64・128・192・256・512pxのPNGと、180pxのapple-touch-icon、さらに16/32/48pxを束ねたfavicon.icoを生成します。まとめてZIPでダウンロードでき、貼り付け用のHTMLスニペットも表示します。
生成したファビコンはどう設置しますか?
ZIP内のファイルをサイトのルートに置き、表示されるHTMLスニペット(link rel=icon / apple-touch-icon など)をページの<head>に貼り付けます。favicon.icoはルートに置けば多くのブラウザが自動で読み込みます。