ファビコン画像を作成
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">AI画像やブログ用アイコン作成にもおすすめ
favicon（ファビコン）は、 Webサイトのタブ・ブックマーク・スマホホーム画面などで表示される小さなアイコンです。
ChatGPTや画像生成AIで作成したイラストを使って、 オリジナルfaviconを作成したい場合にも利用できます。
Petanko Imageでは、 ブラウザだけでfavicon画像を作成できます。 画像ファイルを外部サーバーへ送信しません。
favicon画像作成はこんな方にオススメです
- ブログ用faviconを作りたい
- AI画像からfaviconを作成したい
- WordPress用アイコンを作りたい
- サイト用アイコンサイズをまとめて作成したい
favicon画像作成のよくある質問
favicon（ファビコン）とは？
favicon（ファビコン）は、Webサイトのタブやブックマークに表示される小さなアイコンです。
ブログやホームページの目印として使われます。
faviconはどこで表示されますか？
ブラウザタブ・ブックマーク・スマホホーム画面などで表示されます。
WordPressやWebサイト運営でもよく利用されています。
AI画像からfaviconを作れますか？
はい。ChatGPTや画像生成AIで作成した画像からfaviconを作成できます。
イラスト・ロゴ・キャラクター画像などにも利用できます。
おすすめの画像サイズは？
512×512px以上の正方形画像がおすすめです。
高解像度画像を使うと、複数サイズ生成時もきれいに表示しやすくなります。
faviconは透過できますか？
はい。PNG画像の透明背景にも対応しています。
ロゴやイラストアイコンにも利用できます。
favicon画像作成ツールを使ったら、画像はアップロードされますか？
アップロードされません。
このツールはブラウザ上だけで画像処理を行っています。
画像ファイルが外部サーバーへ送信されることはありません。
その他の質問
その他の質問はFAQページ をご確認ください。
