旧来のCMSではPNGのアップロードに対応している一方、あなたのサイトにはまだ複数のサイズを含むfavicon.icoがある場合、ICO to PNG converterを使えば、アイコンを最初から作り直すことなく、ラスター画像ファイルを用意できます。
Mzu favicondlのICO to PNG converterは、ICOからPNGへの受け渡しを担い、ICOファイルをPNG出力に変換します。出力はメディアライブラリへの取り込み、デザインレビュー、PNGをベースにしたfavicon linkなどに利用できます。複数の解像度を持つWindows icon containerではなく、必要な1つのbitmapを用意したい場合に便利です。
ICO to PNG converterを使い始める
既存の.icoアセットがあり、特定の利用先向けにPNGのコピーが必要な場合は、このワークフローを利用してください。
- Mzu favicondlを開き、ICO to PNG converterを選択します。
- 変換する
.icoファイルをアップロードします。 - 用途に合わせて出力サイズまたは埋め込み画像を選択します。複数のICOレイヤーが一覧表示されている場合は、最小のレイヤーを拡大するのではなく、ネイティブのレイヤーを選択してください。
- 変換を実行し、生成されたPNGをダウンロードします。元のICOはプロジェクトファイル内に残してください。
出力で確認すべき主なポイント
ネイティブの解像度を選ぶ
ICOには複数の画像サイズを含められることがあり、各レイヤーにはそれぞれのピクセル寸法があります。用途に最も近いネイティブのものを書き出してください。32×32のレイヤーは、拡大された16×16の画像より適しています。拡大しても、元々存在しなかったディテールは復元できないためです。
透明性を確認する
PNGを、コントラストのある背景または市松模様の背景で開いてください。透明なエッジが保たれていることと、マーク周囲に不要な白ボックスが表示されないことを確認してください。
適切なコンテナを保つ
各PNG出力は単一のラスター画像であり、複数のサイズを持つICO containerではありません。デプロイメントの別の部分がその形式をまだ必要としている場合はICOを保持し、PNGを直接指定する方が都合のよい場面ではPNGを使用してください。
PNGをサイトに追加する
ダウンロードしたファイルをドキュメントのheadから参照します。実用的な構成では、両方の形式を利用可能な状態にしておきます：
<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>
<link rel='icon' href='/favicon.ico'>HTML標準では、外部アイコンリンクを rel='icon' で指定できます。 type と sizes は任意のメタデータです。正確な属性についてはHTML link relation specificationを参照してください。
公開前に確認したいポイント
- 本番用アセットを置き換える前に、PNGの実際の寸法とファイルサイズを確認してください。
- ICOファイルにネイティブ解像度の大きい画像がすでに含まれている場合、小さいICOレイヤーをアップスケールしないでください。
- ブラウザがキャッシュ済みのコピーを配信し続ける場合は、PNGのバージョン番号を更新するかファイル名を変更してください。この手順はfavicon cache-busting guideで説明しています。
- 運用スタックを標準化する前に、format判断の参考としてICO vs PNG faviconsを読んでください。
まとめ
ICO to PNG converterを使えば、レガシーなWindows icon fileとPNG中心のワークフローを橋渡しできます。ネイティブ解像度で抽出して透明性を確認し、PNGをmarkupに追加してください。レガシーサポートが引き続き必要であれば、ICOも保持してください。
Mzu favicondlでICOを変換する，然后用Dimensionsとmarkupを確認してから公開してください。