会社ロゴをそのままファビコンへ変換したところ、文字が読めない、細い線が消える、何のマークか分からない状態になることがあります。
原因は、画像サイズや保存形式だけではありません。
横長のロゴや細かな装飾を持つロゴは、ブラウザのタブに表示される小さな正方形へ縮小することを前提に作られていないためです。
この場合、変換ツールを何度使っても大きな改善は期待できません。必要なのは、元のロゴを縮小する作業ではなく、ブランドの特徴を残したファビコン専用デザインへの組み替えです。
ファビコンはロゴの縮小版ではない
ファビコンは、ブラウザのタブやブックマーク、Google検索結果などでサイトを識別するための小さなアイコンです。Google検索では、ガイドラインを満たしたファビコンが検索結果へ表示される場合があります。
通常の企業ロゴには、次のような情報が含まれています。
- 会社名
- 英字のブランド名
- シンボルマーク
- キャッチコピー
- 細い装飾線
- グラデーション
- 複数のブランドカラー
これらを小さな正方形へ詰め込むと、一つひとつの要素が判別できなくなります。
ファビコンでは、ロゴの情報をすべて見せるのではなく、小さく表示してもブランドを識別できる要素だけを残します。
ロゴが潰れて見える6つの原因
ファビコンが見えにくい場合は、解像度を上げる前にデザインそのものを確認します。
横長のロゴを正方形へ押し込んでいる
会社名とシンボルが横に並んだロゴは、そのまま正方形へ縮小すると極端に小さくなります。
特に英字や日本語の会社名を含むロゴは、一文字ずつ判別できなくなります。
横長ロゴを使う場合は、次のいずれかへ変更します。
- シンボルマークだけを使う
- 会社名の頭文字だけを使う
- ロゴの一部分を切り出す
- ファビコン専用の略号を作る
横長の全体ロゴを残したまま、余白だけを削っても根本的な解決にはなりません。
線が細すぎる
ロゴを大きく表示したときに美しく見える細い線も、ファビコンでは消えたり途切れたりします。
次のようなデザインは注意が必要です。
- 細い円
- 小さな葉や枝
- 複雑な家の輪郭
- 繊細な筆記体
- 細い枠線
- 小さな点の集合
- 線だけで描いた人物
ファビコン用では、元のロゴより線を太くしたり、細部を削ったりします。
文字数が多い
16px前後の表示で、複数文字を読ませることは困難です。
会社名を残す場合でも、基本は一文字または短いイニシャルに絞ります。
たとえば、「SAKURA DESIGN」というロゴなら、次の候補があります。
- S
- SD
- 桜のシンボル
- ブランドカラーの円とS
- ロゴ内の特徴的な図形
会社名を全部入れるより、頭文字と色で識別できる状態を優先します。
色の差が弱い
淡いグレーの線を白い背景へ置くと、小さな表示では輪郭が消えます。
ファビコンでは、通常のロゴよりも背景色と図形の差を強くしたほうが識別しやすくなります。
確認したい組み合わせは次のとおりです。
- 白い図形と淡い背景
- 薄いグレー同士
- 黄色と白
- 細い黒線と透明背景
- 同系色のグラデーション
- 半透明の装飾
ブランドカラーが淡い場合は、背景を濃くする、輪郭を太くする、濃色版を用意するなどの調整が必要です。
余白が多すぎる
ロゴ画像の周囲に広い透明余白があると、実際のマーク部分がさらに小さく表示されます。
元画像が512pxの正方形でも、中央のロゴが200px程度しか使っていなければ、ファビコン上では小さく見えます。
ただし、余白を完全になくすと窮屈です。
マークが正方形の中で十分な面積を占めつつ、端へ接触しない程度に調整します。
デザインではなく変換だけで解決しようとしている
画像変換ツールは、PNGやJPEGなどをICO形式へ変換する用途には便利です。
しかし、ツールは次の判断までは行いません。
- どのパーツを削るか
- どの線を太くするか
- 何色に絞るか
- 頭文字とシンボルのどちらを使うか
- 小さく表示したときに何が残るか
- 元のブランドらしさをどう維持するか
ファイル形式に問題がなくても見えにくい場合は、デザインの簡略化が必要です。
無料変換で足りるケースと作り直すべきケース
現在のロゴによって、必要な対応は変わります。
| ロゴの状態 | 無料変換で対応 | 専用デザインを推奨 |
|---|---|---|
| 単純なシンボルだけ | 対応しやすい | 必須ではない |
| 太い一文字のロゴ | 対応しやすい | 微調整のみ |
| 横長の会社名ロゴ | 潰れやすい | 推奨 |
| 細い筆記体ロゴ | 読みにくい | 推奨 |
| キャッチコピー付き | ほぼ判別できない | 推奨 |
| 複雑なイラスト | 細部が消える | 推奨 |
| 淡色の線画ロゴ | 背景に埋もれやすい | 推奨 |
| 小さな文字が複数ある | 読めない | 推奨 |
変換後の画像を16px程度まで縮小し、一瞬で何のサイトか判断できるなら、自作でも対応できます。
単なる色の塊に見える場合や、別の会社のアイコンに見える場合は、専用版を作るほうが安全です。
ファビコン専用デザインの代表的な4パターン
複雑なロゴは、次の方法で簡略化できます。
シンボルだけを残す
元のロゴに独立したマークがある場合は、文字部分を外してシンボルだけを使います。
この方法が向いているのは、次のようなロゴです。
- 動物や植物のマーク
- 幾何学図形
- 建物や道具のシルエット
- 円や四角を組み合わせたマーク
- 独自性のある記号
小さくしたときに細部が消える場合は、シンボルも簡略化します。
頭文字を使う
シンボルがない場合は、会社名やサービス名の頭文字を使います。
一文字ファビコンでは、次の要素でブランドらしさを出せます。
- 文字の形
- 背景色
- 文字色
- 角の丸み
- 円形または四角形
- 文字の配置
- 元ロゴの一部を装飾として使う
複数文字を入れる場合も、二文字程度までに抑えたほうが読みやすくなります。
ロゴの一部分を切り出す
ロゴ全体では複雑でも、特徴的な一部分だけならファビコンに使える場合があります。
たとえば、次のような切り出し方です。
- 花の中央部分
- 動物の顔だけ
- 建物の屋根だけ
- 頭文字を囲む枠だけ
- ロゴの特徴的な曲線
- エンブレム中央の記号
元のロゴとのつながりが分かる部分を選びます。
ブランドカラーと図形で再構成する
ロゴ自体がファビコンに向かない場合は、ブランドカラーを使った簡単な図形を作ります。
会社の頭文字、丸、四角、斜線などを組み合わせ、小さくても識別できる形へ整えます。
元ロゴを完全に再現するより、同じ色と印象を残すことを優先します。
16px表示で確認してから決める
ファビコンのデザインは、制作画面で大きく表示した状態だけでは判断できません。
最終確認では、実際に小さくした状態を見ます。
確認項目は次のとおりです。
- シンボルの形を判別できるか
- 頭文字を読めるか
- 線が途切れていないか
- 背景とマークの差があるか
- 余白が広すぎないか
- 他のタブと並んでも見つけられるか
- 白背景と暗い背景の両方で見えるか
- 会社ロゴとの関連を感じられるか
大きく表示すると物足りないほど単純でも、小さなタブ上ではそのほうが明確に見えることがあります。
Google検索結果を考えたサイズ条件
Google検索結果へ表示するファビコンは、1対1の正方形で、最低8×8pxが必要です。Googleは、さまざまな表示面で見栄えを保つため、48×48pxより大きい画像を推奨しています。ファビコンがガイドラインを満たしていても、検索結果への表示が保証されるわけではありません。
検索結果への表示を考える場合は、デザインだけでなく次の条件も確認します。
- 正方形で作成する
- ブランドを表すデザインにする
- ファビコンのURLを頻繁に変更しない
- Googlebotが画像とホームページをクロールできる状態にする
- ホームページのhead内でファビコンを指定する
制作データを受け取った後は、Webサイト側への設定作業が必要です。
ICOとPNGの役割
ファビコンでは、ICOやPNGなどの画像形式が使われます。
ICO形式は、一つのファイル内へ複数サイズの画像をまとめられる点が特徴です。
たとえば、次のサイズを含むICOを用意できます。
- 16×16px
- 32×32px
- 48×48px
表示環境に応じたサイズを持たせることで、小さなタブや大きめのショートカットなどへ対応しやすくなります。
今回紹介するサービスでは、16・32・48pxを含むマルチファビコンのICO形式と、48×48pxのPNG形式が納品されます。
ファビコン制作を依頼する前に用意するもの
発注前に、次の情報をまとめます。
WebサイトのURL
制作済みのサイトがある場合はURLを渡します。
デザイナーは次の要素を確認できます。
- サイトの配色
- 使用フォント
- 写真やイラストの雰囲気
- 対象顧客
- ロゴの配置
- サイト全体の印象
公開前の場合は、確認用URLやスクリーンショットを共有します。
ロゴデータ
ロゴを持っている場合は、可能な範囲で元データを渡します。
- Illustratorデータ
- SVG
- 背景透過PNG
- 高解像度の画像
- ロゴの使用ルール
- ブランドカラーの指定
小さなJPEG画像しかない場合は、その状態で制作可能か事前に確認してください。
残したい要素
元ロゴの何を残すか決めます。
- シンボル
- 頭文字
- ブランドカラー
- 特徴的な線
- 円や枠
- ロゴの一部分
希望が決まらない場合は、「小さく表示したときの見やすさを優先してお任せ」と伝える方法もあります。
避けたいデザイン
希望だけでなく、避けたい方向も伝えます。
- 子ども向けに見える丸文字
- 派手なグラデーション
- 黒一色
- 元ロゴと関係のないモチーフ
- 業種を直接表す一般的なアイコン
- 細い線
- 複数の文字
具体的に伝えると、初稿とのずれを抑えられます。
希望納期
Webサイトの公開日やリニューアル日が決まっている場合は、確認と修正の時間も含めて相談します。
今回紹介するサービスの予定納期は3日で、内容によって見積もりが変わります。
そのまま使える見積もり相談文
使用するWebサイト
自社コーポレートサイトへ設置します。
サイトURLは以下です。
現在の問題
横長の会社ロゴをそのまま縮小したところ、会社名が読めず、シンボルも小さくなってしまいました。
ファビコン専用に簡略化したデザインを希望します。
支給データ
Illustrator形式と背景透過PNGのロゴデータがあります。
残したい要素
ロゴ左側のシンボルと、青緑のブランドカラーを残したいです。
会社名の文字は入れなくても構いません。
希望する印象
法人サイトとして使うため、シンプルで信頼感のあるデザインを希望します。
可愛らしすぎる表現や細い線は避けたいです。
参考デザイン
シンボルだけを使用しているファビコンの参考画像を添付します。
納期
○月○日までの納品を希望します。
この内容にロゴデータとサイトURLを添えれば、デザイナーが簡略化の方向を判断しやすくなります。
初稿で確認するポイント
ファビコンの初稿は、拡大画像だけで判断しないことが重要です。
次の順番で確認します。
- 拡大表示で形と色を確認する
- 48pxで確認する
- 32pxで確認する
- 16pxで確認する
- ブラウザのタブ風に並べる
- 白背景と暗い背景で確認する
- 元ロゴとの関連を確認する
気になる点がある場合は、「違う」とだけ伝えず、見え方を具体的に説明します。
- 16pxで中央の線が消える
- 頭文字が別の文字に見える
- 背景色とシンボルの差が弱い
- 余白が広く、マークが小さい
- 元ロゴより明るすぎる
- 業種の印象が変わって見える
今回紹介するサービスでは、一案の提案と3回までの無料修正が案内されています。
納品データと設置作業は別
ファビコンの画像を納品してもらっただけでは、Webサイトへ自動的に反映されません。
サイト側で画像をアップロードし、CMSの設定画面やHTMLから読み込ませる必要があります。
今回紹介するサービスは画像データの制作と納品が対象で、Webサイトへの設置作業は含まれていません。
依頼前に、設置を誰が担当するか決めておきます。
- 自分でCMSから設定する
- Web制作会社へ渡す
- サーバー管理者へ依頼する
- WordPress担当者へ渡す
- コーダーへ設置を依頼する
設置まで必要な場合は、別途対応できる制作者やWeb担当者を探します。
ファビコンを変更してもすぐ反映されない場合がある
画像を差し替えた後も、ブラウザや検索結果に以前のファビコンが残ることがあります。
ブラウザ側ではキャッシュを確認し、Google検索結果についてはホームページが再クロールされるまで待つ必要があります。Googleは、再クロールと処理に数日から数週間かかる場合があると案内しています。
確認時は、次の順番で切り分けます。
- シークレットウィンドウで開く
- 別のブラウザで確認する
- キャッシュを削除する
- HTMLが新しいファイルを参照しているか確認する
- ファビコンのURLへ直接アクセスする
- ホームページの再クロールを待つ
反映されないからといって、すぐに画像を何度も作り直す必要はありません。
著作権のある素材は使用できない
ファビコンへ第三者のキャラクター、他社ロゴ、購入条件が不明な画像を使用することは避けます。
依頼時に渡す画像は、依頼者が著作権または二次利用権を持つものに限定します。
今回紹介するサービスでも、著作権に抵触する画像は対応対象外です。
フリー素材を使用する場合も、次の条件を確認してください。
- 商用利用できるか
- 加工できるか
- ロゴや商標用途に使えるか
- クレジット表記が必要か
- 独占利用できるか
- 再配布に当たらないか
サイトの識別に長く使う画像なので、権利関係が明確な素材を使います。
ファビコン制作でよくある質問
ロゴがなくても依頼できますか
会社名の頭文字、サイト名、テーマカラー、事業内容などを基に相談できます。
ロゴ制作とは作業範囲が異なるため、ファビコン用の簡単なアイコン制作として対応できるか、見積もり時に確認してください。
JPEG画像しかなくても依頼できますか
元画像の状態によっては対応できます。
ただし、画像が小さい、輪郭がぼやけている、背景と一体化している場合は、再制作やトレースが必要になる可能性があります。
ロゴ全体を必ず入れる必要はありますか
必要ありません。
小さく表示したときの識別性を優先し、シンボル、頭文字、ブランドカラーなどへ絞れます。
ファビコンを設定すると検索順位が上がりますか
ファビコンは検索結果でサイトを識別する表示要素ですが、設定しただけで検索順位が上がると考えるのは適切ではありません。
検索順位対策ではなく、サイトの識別と見た目の統一を目的に設定します。
ICOとPNGの両方が必要ですか
使用するCMSやサイト構成によって異なります。
Web担当者へ必要な形式を確認し、複数環境へ対応したい場合は両方を保管しておくと便利です。
納品後に色を変更できますか
納品データの形式と利用条件によって変わります。
色違いが必要な場合は、自分で変更する前に制作者へ相談してください。
ファビコンの設置も依頼できますか
今回紹介するサービスでは、画像データの納品のみで、設置作業は対象外です。
サイトへの設定が必要な場合は、Web制作担当者へ依頼します。
ロゴを無理に詰め込まず識別できる形へ変える
ファビコンが潰れる場合、元画像の解像度だけを上げても解決しないことがあります。
横長の会社名、細い線、小さな文字、複雑な装飾は、小さな正方形へ表示する用途に適していません。
対策は、ロゴの特徴を次のいずれかへ絞ることです。
- シンボルだけを使う
- 頭文字を使う
- 特徴的な一部分を切り出す
- ブランドカラーと図形で再構成する
- 線を太くする
- 色数を減らす
- 余白を調整する
ファビコンは、元ロゴを完全に再現する画像ではありません。
16px程度まで小さくなってもサイトを見分けられることが、最優先です。
ロゴを縮小すると文字や装飾が消えてしまう場合は、サイトURLとロゴデータを用意し、ファビコン専用の簡略化デザインを相談してください。
