実践的な制作手順
AIロゴをファビコンにする：16ピクセルで読めるアイコンの作り方
看板では美しいカフェのロゴも、ブラウザーのタブでは黒い塊になることがあります。必要なのは、識別できる記号と実際の小さなファイルです。ロゴを縮小表示するだけでは足りません。
架空の陶器店は取っ手に穴があるシンプルなカップを使います。その特徴を残して、サイトで使う実際の小さなアイコンファイルを準備します。
文字ロゴ全体ではなく記号を選ぶ
Ciyoでロゴを開き、店名を読まなくても識別できる部分を選びます。ファビコン版からはキャッチコピーと補助装飾を外します。完全な文字ロゴはサイトのヘッダー用に残してください。
すべてを小さく写すより、別途簡略化した記号の方がブランドらしさを保てる場合があります。輪郭と承認済みの配色関係をそろえます。
きれいな原稿を作る
ベクター化が必要ならVectorツールを使い、書き出したSVGを確認します。背景の矩形、欠け、余分な線を探してください。ベクター化だけでは複雑な図が自動で簡単になるわけではありません。
記号の周りに十分な余白を残します。取っ手が端に接するほど切り詰めないでください。サイズ別の版を作る前に原稿を保存します。
このロゴのカップ記号でファビコン原稿を作ってください。取っ手の空間を保ち、文字を外し、象牙色の背景にチャコール色を使い、正方形の中央に配置します。16、32、64ピクセルのプレビューを見せてください。すべて合格したと決めつけず、消える細部を挙げてください。用途ごとに本物のファイルを書き出す
デザインエージェントのファイル作業領域で、必要サイズのPNGと、小サイズの画像を格納した正しいICOを作るよう依頼します。PNGの拡張子を.icoに変えても、形式は変わりません。
大きいPNGはサイトの別の場所、小さいICOはブラウザーで使えます。プラットフォームの要件を確認し、納品時に各ファイルの役割を伝えます。
| ファイル | サイズの例 | 確認する点 |
|---|---|---|
| PNGプレビュー | 16 × 16 | 輪郭と取っ手の空間 |
| PNGプレビュー | 32 × 32 | 端と中央配置 |
| 大きいPNG | 64 × 64 | 正方形のサイズとブランド色 |
| ICO | 16・32ピクセルの画像 | 名前だけでなく、実際に格納された画像 |
各サイズを実寸で確認する
簡単なページに、画像の1ピクセルが画面の1ピクセルになるよう表示し、明るい周囲と暗い周囲で確認します。拡大は端の分析に役立ちますが、実寸確認の代わりにはなりません。
16ピクセルで取っ手の空間が閉じるなら、開口部を広げるか内部を簡略化します。大きな原稿の細部を増やしても解決しません。小サイズ専用の調整が必要な版を記録します。
サイトのリンクと配信ファイルを試す
ファイルとアイコンリンクの指定をサイト管理者に渡します。配信URLを直接開き、存在と正しいContent-Typeを確認します。その後、テストページのタブを確認してください。
Googleのガイドには、正方形、ホームページとアイコンURLのクロール可能性、安定したURLなど、検索向けの条件があります。ブラウザー表示とGoogle検索での表示は別の確認で、片方がもう片方を保証することはありません。
別のブラウザーテストページでは、実際の16、32、64ピクセルPNGを画像1ピクセル＝CSSの1ピクセルで表示します。変更していないPNGから別途組み立てたICO内の64ピクセル画像もデコードします。ファイル検査で3サイズすべてと元のデータの一致を確認しました。これはサンプルファイルのChromeでの確認であり、Google検索での表示や、どのブラウザーも同じ内部サイズを選ぶことの証明ではありません。
ブランド資料に小サイズ版を残す
アイコン原稿、出力ファイル、承認した実寸プレビューを完全なロゴと一緒に保存します。次の担当者が、確認済みの記号と配色を把握できるようにします。
古いアイコンが表示される場合は、描き直す前にリンクと配信ファイルを確認します。ブラウザーのキャッシュや検索の処理待ちは、形が読めない問題とは別です。
よくある質問
PNGの名前をICOに変えれば使えますか？
使えません。ICO形式で保存する必要があります。出力ファイルと内部の画像サイズを確認してください。
店名を入れるべきですか？
小サイズでは簡単で識別しやすい記号が読みやすいことが多いです。完全な文字ロゴは大きな場所に使います。
Googleはすぐに新アイコンを表示しますか？
すぐとは限りません。クロールできるアイコンとホームページの処理が必要で、表示も保証されません。
まず小サイズ版を作る
Ciyoにロゴを持ち込み、サイト管理者に渡す前にファビコンの実寸で確認しましょう。