ファビコン画像を作成
PNG画像をアップロードして、favicon用の複数サイズ画像を作成できます。
favicon.ico形式ではなくPNG形式のfavicon画像を作成します
ファビコン生成設定
PNG画像を選択してください
元画像は、512px × 512px 以上の正方形PNG画像がおすすめです。
大きめの画像を使うと、小さいfaviconへ縮小したときも綺麗に表示されやすくなります。
正方形でない画像は、中央を基準に正方形へ切り抜いて作成します。
PNGのfaviconでも大丈夫？
はい。現在のWebサイトでは、PNG形式のfaviconもよく使われています。 昔からあるfaviconは .ico 形式のイメージが強いですが、 HTMLでPNG画像を指定して使うこともできます。
ただし、古いブラウザや一部の環境まで広く対応したい場合は、
.ico 形式も用意しておくと安心です。 このツールでは、まず初心者でも扱いやすいPNG形式のfavicon生成から対応しています。
どのサイズを作ればいい？
このツールでは、アップロードした1枚の画像から 複数サイズのfavicon画像を自動生成します。
生成されるfavicon画像は、最低限なら、まずは 32x32 と 180x180 があると使いやすいです。 余裕があれば、192x192 や 512x512 も作成しておくと、 スマホのホーム画面アイコンや、高解像度表示にも対応しやすくなります。
| サイズ | 主な用途 |
|---|---|
| 16x16 | ブラウザタブなど、小さく表示される場所 |
| 32x32 | 一般的なfavicon用途 |
| 48x48 | 一部の環境向けの予備サイズ |
| 180x180 | iPhone・iPadのホーム画面アイコン向け |
| 192x192 | Androidスマホのホーム画面アイコン向け |
| 512x512 | 高解像度表示やアプリアイコン向け |
HTMLでの設置例
作成した画像をサイトにアップロードしたら、
HTMLの <head> 内に設定します。
例えば、通常のfaviconには 32x32 を使い、 iPhone・iPadのホーム画面アイコンには 180x180 を使うことが多いです。
- favicon-32x32.png
ブラウザタブなどに表示される一般的なfaviconです。 - apple-touch-icon.png
iPhone・iPadでホーム画面に追加したときのアイコンです。
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">よくある質問
faviconとは？
favicon（ファビコン）は、Webサイトのタブやブックマークなどに表示される小さなアイコン画像です。
サイトの目印として使われます。
PNG形式でも使えますか？
はい。
現在はPNG形式のfavicon画像にも広く対応しています。
WordPressや多くのWebサイトでも利用されています。
どのサイズを作ればいいですか？
一般的には、
- 32×32
- 180×180
- 192×192
- 512×512
などがよく利用されています。
このツールでは、faviconでよく使われるサイズをまとめて生成できます。
512×512画像は必要ですか？
最近では、
- WordPress
- スマホホーム画面
- Webアプリ風ショートカット
などで高解像度画像が利用されることがあります。
そのため、512×512以上のPNG画像を用意しておくと安心です。
ツールを使うと、画像はアップロードされますか？
アップロードされません。
このツールはブラウザ上だけで画像処理を行っています。
画像ファイルが外部サーバーへ送信されることはありません。
その他の質問
その他の質問はFAQページ をご確認ください。
