PNG→ICO変換・ファビコン作成
このページのどこかにPNGやロゴをドロップすれば、16～256pxのすべてのサイズを収めた.icoを1つ、またはアプリアイコン、Webマニフェスト、HTMLタグをそろえたファビコン一式をダウンロードできます。
例：
ファイルをお持ちですか？
- 無料・登録不要
- .icoと
16～512pxの PNG - Apple
タッチアイコン - Webアプリ
マニフェスト
ドロップしてロゴを開く
無料でロゴを探し続けましょう
サイトのほかの画像
ロゴをクリックすると、そのサイトで見つかった次のロゴに切り替えたり、ロゴを外したりできます。
このロゴを3Dに
リール、TikTok、YouTube向けの3Dロゴアニメーション動画、光沢のある3D画像、3Dプリント用データを、ブラウザー上で数秒で作成できます。
使用イメージ
PNGをICOに変換する方法
ファイルを
PNGを
ドロップ PNG、
JPG、 WebP、 SVGを ページの どこかに ドロップ するか、 検索ボックスの 下の手持ちの ロゴを をドロップ 押します。 すでに アイコンの ある 会社の アイコンを 作るなら、 その 会社の ウェブサイトを 入力すれば、 いま 使っている アイコンを ツールが 取り込みます。 アイコンと
して 確認 画像は、
どの アイコン枠にも 合う 正方形の 中央に 配置されて 開き、 ブラウザーの タブでの 実寸16pxと、 スマートフォンの アプリアイコンでの 見え方を 確認できます。 ICOを
ダウンロード ICOを
押すと 16、 24、 32、 48、 64、 128、 256pxを 収めた .icoが 1つ、ファビコンを 押すと ウェブサイト用の 一式が 1つの ZIPで ダウンロード できます。 実際に
使う 一式を
ウェブサイトに コピーして 用意された HTMLを 貼り付けるか、 Windowsの ショートカット、 フォルダー、 アプリの アイコンに .icoを 指定します。
.icoに入るすべてのサイズと、表示される場所
ICOは
| サイズ | 表示される |
|---|---|
| 16×16px | ブラウザーの |
| 24×24px | Windowsの |
| 32×32px | 高解像度画面の |
| 48×48px | 高解像度画面の |
| 64×64px | 高解像度画面での |
| 128×128px | 大型 |
| 256×256px | 最大の |
MDNの画像形式ガイドでは、ICOファイルは256×256pxまでの「複数のアイコンを含むことができる」と説明されています。Microsoftのアイコンガイドは、Windowsが各サイズを表示する場所を挙げ、アプリには「最低限、16×16、24×24、32×32、48×48、256×256」を求めています。ICOのダウンロードにはそのすべてに加え、中間のサイズ用に64pxと128pxも入っています。
ファビコン一式のファイル一覧
ウェブサイトの
| ファイル | 概要 | 役割 |
|---|---|---|
| favicon.ico | 16、 | ブラウザーが |
| icon-256.ico | 全サイズ：16、 | Windowsアプリ、 |
| favicon-16x16.png、 | 背景が | ブラウザーの |
| favicon.svg | ロゴが | SVGアイコンを |
| apple-touch-icon.png | 180× | iPhoneと |
| android-chrome-192x192.png、 | Webアプリの | Androidの |
| site.webmanifest | アプリアイコンを | スマートフォンや |
| add-to-your-head.html | 各ページの | コピーして |
180pxのAppleタッチアイコンは、AppleのSafariウェブコンテンツガイド（アーカイブ）に記載されたiPhone向けのサイズです。またweb.devの解説のとおり、Chromium系のブラウザーは、サイトをアプリとしてインストールする前に、マニフェストにある192pxと512pxのアイコンを探します。
サイトに追加：そのまま貼れるHTML
一式を
一式に含まれるadd-to-your-head.htmlには、次の行が入っています（ロゴがベクターの場合はSVGアイコンの行も）。
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">ロゴが画像の場合は、2行目が代わりに32pxのPNGを指します。
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">Google検索は、ファビコンを見つけられると、検索結果でページの横に表示します。Googleのガイドラインでは、8×8px以上の正方形のアイコンが必要で、48×48pxより大きいものを推奨しており、Googlebotがホームページとアイコンファイルの両方をクロールできることが条件です。
ダウンロード前に実寸で確認
ファビコンの
大きなプレビューの横には、ブラウザーのタブとスマートフォンのアプリアイコンでのアイコンの見え方と、明るいヘッダーと暗いヘッダーでのロゴ全体の見え方がモックアップで表示されます。タブのサイズでつぶれてしまう細部も、訪問者の目に触れるずっと前に、ここで気づけます。
小さなアイコンでは、シンプルな形ほど映えます。社名全体は16pxでは読めなくても、シンボルや1文字なら読めるので、マークだけを切り抜くか、ロゴの白抜きで太くすっきりしたバージョンを作りましょう。暗いタブ向けの白いファビコンも作れます。
Windowsのアプリ、フォルダー、デスクトップのアイコン
同じ
ショートカット：ショートカットを右クリックしてプロパティを選び、アイコンの変更から.icoを参照します。
フォルダー：フォルダーを右クリックしてプロパティを選び、カスタマイズタブを開いてアイコンの変更を押します。
開発中のアプリ：.icoを開発者に渡すか、アプリのビルド設定に指定します。256pxのアイコンが入っているので、Windowsは小さなアイコンを引き伸ばすのではなく、小さい枠に合わせて縮小します。そのため、高解像度画面でもくっきり表示されます。
ロゴからファビコンを作成
アイコンファイルがまだなければ、ロゴそのものをドロップしてください。適度な余白を取って正方形の中央に配置され、一式のすべてのサイズが一度に作られます。
クライアントのリブランディングなら、Logo Finderにクライアントのウェブサイトを入力して、いま使っているロゴから始めるか、まずファビコン取得で現在のアイコンを取得しておきましょう。
そのほかの無料アイコン・ロゴツール
- PNG→SVG変換どの
サイズでも 鮮明な、 マークの ベクター - 3Dロゴ作成同じ
ロゴを 3Dの 画像や 動画に - ロゴ
アニメーション作成 音楽付きの8種類の 3Dアニメーション - ロゴ
オープニング作成 動画の冒頭を 飾る 3Dロゴ オープニング - 回転
ロゴGIF作成 途切れない3D回転を ループGIFで - ロゴを
STLと どんな3MFに ロゴも 3Dプリント用 データに - SVG→STL変換ベクターから
3Dプリント用 データへ - PNG→STL変換画像を
3Dプリント用 データに - 3Dロゴの
作り方 平面のロゴに 奥行きを 出す 4つの 方法 - ロゴ
アニメーションの 各プラットフォーム向けの作り方 モーション、 サウンド、 サイズ - ロゴを
3Dプリントする サイズ、方法 色、 スライサー、 トラブル対策 - ロゴの
SVG変換 印刷やカッティング用に ロゴを ベクター化
PNGをICOに変換するには？
このページのどこかにPNGをドロップするか、「手持ちのロゴをドロップ」を押します。正方形のアイコンとして開くので、「ICO」を押せば16、24、32、48、64、128、256pxを収めた.icoファイルが1つ、「ファビコン」を押せばウェブサイト用の一式がダウンロードできます。無料で、すべてブラウザー上で行われます。
favicon.icoには、どのサイズを入れるべきですか？
ウェブサイトなら、16、32、48pxでタブ、ブックマーク、高解像度画面をカバーでき、一式のfavicon.icoにはまさにこの3つが入っています。Windowsアプリやデスクトップのアイコンについては、Microsoftが少なくとも16、24、32、48、256pxを求めており、ICOのダウンロードにはそのすべてに加えて64pxと128pxも入っています。
ロゴからファビコンを作るには？
このページにロゴをドロップします。ロゴはどのアイコン枠にも合う正方形の中央に配置され、ファビコン一式をダウンロードする前に、ブラウザーのタブとアプリアイコンでの見え方を確認できます。16pxでいちばん読みやすいのは、ロゴのシンボルや頭文字です。
今でもウェブサイトにfavicon.icoは必要ですか？
置いておく価値は十分にあります。ブラウザーは今でもウェブサイトに/favicon.icoを要求し、Google検索もICOファイルに対応しており、1つのICOに複数のサイズを収められます。最新のブラウザーはページのheadでリンクしたPNGやSVGのアイコンも読み込み、一式にはその両方が含まれています。
ファビコンをウェブサイトに追加するには？
一式のファイルを、ホームページがあるサイトのルートフォルダーにコピーし、add-to-your-head.htmlの行をすべてのページのheadに貼り付けます。ホームページ作成サービスやECプラットフォームでは、サイトアイコンの設定で512pxのPNGをアップロードしてください。
PNGから256pxのWindowsアイコンを作れますか？
はい。ICOのダウンロードには16、24、32、48、64、128、256pxが入っています。Microsoftによると、256pxのアイコンがあれば、Windowsはアイコンを拡大せず縮小だけを行うので、どのサイズでもくっきり表示されます。幅256px以上のPNGか、ベクター形式のロゴから始めてください。
ファビコンの最適なサイズは？
1つのサイズではなく、セットで考えます。favicon.icoには16、32、48pxのアイコンを収録し、180pxのAppleタッチアイコンと、Webアプリマニフェスト用の192pxと512pxのアイコンも用意します。Googleは検索向けに、48×48pxより大きい正方形のファビコンを推奨しています。このパックなら、1つのファイルからこれらすべてを作れます。
このツールは役に立ちましたか？