WebPをICOに変換
ロゴが自分のサイトから保存したWebPやデザインツールの書き出しファイルしかない場合でも、追加のマークアップなしでブラウザ、ブックマーク、Windowsのショートカットに認識されるfavicon.icoに変換できます。
画像変換
またはJPG, JPEG, JPE … ファイルをここにドロップ ·
1ファイルあたり最大95 MB· 最大20ファイルまで· 30分後に削除
ファイルは当社のサーバーで処理され、30分後に削除されます。
85 なら写真は元の画像と見た目がほぼ変わりません。ファイルを小さくしたいときだけ下げてください。
JPG、BMP、EPS は透過に対応していません。透明な部分はこの色で塗りつぶされます。
透明な部分の背景に使う16進カラーです(例: #FFFFFF)。
この形式には 1 枚の画像しか保存できません。アニメーションを残すには GIF または WebP を選んでください。
マルチサイズのアイコンは 1 つのファイルに複数の解像度を含み、ブラウザや OS が必要なサイズを選びます。
元のサイズを維持するか、片方の辺を入力すると縦横比を保ったままサイズ変更します。
上で選んだ辺のピクセル数です。
元のサイズに対する割合です。
画面や Web には sRGB が適しています。印刷用途では元の色空間を維持してください。グレースケールにすると色情報は失われます。
メタデータのみ変更します。0 なら元の値を維持します。プリンターや一部のサイトがこの値を読み取りますが、ピクセル数は変わりません。
このツールの使い方
- 1
WebPのロゴをアップロード
.webpファイルをドロップしてください。一度に最大20個、1ファイルあたり95 MBまで追加できます。256 × 256 px以上の正方形のロゴが最適です。
- 2
すべてのアイコンサイズを残す
詳細設定のアイコンサイズは、初期値ですべてのサイズ(16–256)になっています。アニメーションWebPは最初のフレームが使われます。
- 3
変換してサイトにアップロード
変換先をICOにして変換し、必要に応じてファイル名をfavicon.icoに変更して、サイトのルートフォルダに置いてください。
Webサイトから保存したロゴは、最近はたいていWebPです。1回の変換で、透過背景を保ったまま複数サイズのfavicon.icoにできます。
WebPロゴからfavicon.icoを作成する
WebPは2010年にGoogleが発表して以来、Webの多くで標準的な画像形式になりました。WordPressは2021年のバージョン5.8からWebPのアップロードに対応し、多くの画像CDNは配信するPNGをすべて変換します。そのため自社ロゴを探すと、見つかるのが.webpだけということも多く、ファビコン生成ツールやWindows、一部のホスティング管理画面では受け付けられません。
ICOはWebPとは別の課題を解決する形式です。1枚の圧縮画像ではなく、複数の正方形ビットマップをまとめ、ブラウザやOSが必要なサイズを選びます。タブには16 px、タスクバーやブックマークバーには32 px、デスクトップのショートカットや高密度ディスプレイにはより大きいサイズが使われます。変換すると、WebPからこれらのサイズを一度に作成します。
ページヘッダーのロゴには、元のWebPをそのまま使い続けてください。2つのファイルは用途が異なり、変換しても元のファイルは変わりません。
変換後のICOに含まれるもの
- 1つの.icoに5つのサイズを格納
- 16–256 px
- 1回で変換できるWebPファイル数
- 20
- 1ファイルあたりの最大サイズ
- 95 MB
- その後サーバーから削除されます
- 30分
WEBP
WebP 画像
WebP は、ウェブページの表示を速くするために Google が 2010 年に公開した画像形式です。非可逆圧縮と可逆圧縮の両方、アルファ透過、アニメーションを 1 つの形式で扱えます。非可逆 WebP は、同程度の画質の JPEG と比べて一般に 25–35% 小さくなり、可逆 WebP も通常は PNG より小さくなります。現行のブラウザーはすべて対応していますが、古いデスクトップソフト、印刷サービス、アップロードフォームの中には、今でも受け付けないものがあります。Windows、macOS、最近のほとんどの画像編集ソフトで WebP を開けます。
- 圧縮方式
- 非可逆または可逆
- 透過
- 対応
- アニメーション
- 対応
- 登場時期
- 2010 · Google
ICO
Windowsアイコン
ICOは、Windowsのプログラムアイコンやウェブサイトのファビコンに使われるMicrosoftのアイコン形式です。1つの.icoファイルに16×16、32×32、48×48、256×256ピクセルなど複数サイズの画像を含められ、システムが最適なものを選びます。各画像はビットマップまたはPNGデータで保存でき、完全なアルファ透過に対応します。写真や大きなイラスト向けではありません。ブラウザ、Windows、ほとんどのアイコンエディタで読み込めます。
- 圧縮方式
- 可逆
- 透過
- 対応
- アニメーション
- 非対応
- 登場時期
- Microsoft
ブランドマークの元データが、WebサイトやCMSから配信された圧縮ファイルしかなく、サイトのルートにfavicon.icoが必要なときに、WebPロゴをICOに変換します。
16 pxのブラウザタブ向けにWebPロゴを準備する
マーク部分で切り抜く
ロゴは横長のものが多くあります。シンボルや頭文字だけを残し、少し余白を取って正方形にトリミングしてください。
小さな文字は外す
キャッチコピーやロゴタイプは、16 pxでは灰色のノイズになります。太い単純な形は残りますが、細い線は残りません。
両方のタブ色で確認する
ブラウザのライトテーマとダークテーマの両方で確認してください。透過背景の暗いロゴは、暗いタブでは見えなくなることがあります。
新しいファビコンをサイトに追加する
favicon.icoをルートフォルダに置くと、yoursite.com/favicon.icoで取得できます。ページのheadに<link rel="icon" href="/favicon.ico" sizes="any">と記述すると指定が明確になります。WordPressなどのCMSには、これらのタグを自動で出力するサイトアイコンの欄があります。
あと2種類のアイコンがあると万全です。iPhoneやiPadでは、サイトをホーム画面に追加するときに180 × 180 pxのPNGであるapple-touch-iconが使われます。WebPをPNGに変換と比率に合わせてトリミングするガイドで作成できます。Google検索では48 pxの倍数サイズの正方形ファビコンが求められるため、96 pxまたは144 pxのPNGをホームページからリンクしておけば検索結果にも対応できます。ブラウザはファビコンを強くキャッシュするので、新しいアイコンをすぐ確認するにはプライベートウィンドウで開いてください。
WebPをICOに変換に関するよくある質問
ロゴがすでにWebPなのに、なぜ.icoが必要なのですか？
ページでアイコンを指定していない場合、ブラウザはサイトのルートにある/favicon.icoを自動的に取得します。Windowsのショートカットや古いブラウザ、多くのCMSのファビコン欄もICOまたはPNGを前提としています。ルートに.icoを1つ置くだけで、マークアップなしでこれらすべてに対応できます。
WebPロゴの周りの透明部分は透過したまま残りますか？
はい。WebPもICOもアルファチャンネルを扱えるため、透過背景はアイコン内のすべてのサイズにそのまま引き継がれ、明るいタブでも暗いタブでもファビコンがきれいに表示されます。
アニメーションWebPをアップロードするとどうなりますか？
ICOは静止画のみ対応のため、最初のフレームを使用します(アニメーション画像の扱いは最初のフレームのみに設定されています)。最初のフレームが空白だったり切り替わりの途中だったりする場合は、別の元画像を選んでください。
WebPの非可逆圧縮による劣化はファビコンに表れますか？
16〜64 pxではほとんど目立ちません。縮小の過程で小さなノイズが平均化されるためです。128 pxと256 pxの層には、うっすらとした縁取りが残ることがあります。ロゴがベクターでも用意できる場合は、SVGをICOに変換すると最もきれいなエッジになります。
くっきりしたファビコンにするには、WebPロゴの解像度はどれくらい必要ですか？
256 × 256 px以上の正方形をおすすめします。最大サイズの層を拡大ではなく縮小で作れるためです。ページヘッダーから保存した120 pxのロゴでは、大きいサイズでぼやけて見えます。