ファビコンの例、ベストプラクティスとテクニック

ブラウザのタブの上部にある小さなアイコンに注目したことはありますか？オンラインの Web サイトやページへのショートカットを保存するときはどうでしょうか。それらの小さな画像、つまりファビコンは、特にその目的のために設計されています。

何が良い小さなアイコンか悪い小さなアイコンかは、かなり明確な違いがあります。小さなスケールでのデザイン決定はそれほど重要ではないと考えるのは当然でしょう。しかし、デザインの悪いファビコンは、ブランドに悪い影響を与えます。

今日は、これらのアイコンが何であるか、その基本的なデザイン手法、および従う必要のある仕様について見ていきましょう。 Envato Elementsは月額16ドルから利用でき、これまでで最高のクリエイティブ・サブスクリプションです。

Envato Elementsを探索する

ファビコンとは何か

簡単に言うと、ウェブサイト、ブランド、ビジネスを表すために使われる小さくて透明なアイコンのことです。ファビコンは、一貫したビジュアルにより、Web サイトの訪問者に、同じサイトにいることを伝える一貫したマーカーを提供することにより、ユーザーエクスペリエンスを向上させます。この用語は、ブックマークされたページが “お気に入り” と呼ばれていた Internet Explorer 時代にさかのぼります。ファビコンは、2000 年頃の HTML 4.0 で World Wide Web Consortium (W3C) によって初めて採用され、翌年にはブラウザウィンドウにより一貫して表示されるようになりました。視覚的な識別子は、ほとんどの人がこれらのリンクやページにアクセスするための正しいボタンを関連付けるために使用します。

従来、ファビコンは .ico ファイル形式を使用していましたが、今ではそれほど問題ではありません。 .png はしばしば選択される形式です。

Technical Considerations

かつて、すべてのファビコンは非常に小さな 16 ピクセルの四角形でした。高解像度の網膜画面やショートカットアイコンを考慮する必要があるため、今はそうではありません。

HTML 5 には、小さなブラウザアイコンからコンピュータドッキングステーションアイコン、ホーム画面アイコンまで、あらゆる用途のために複数のサイズを持つファビコン用の標準が含まれています。 16 ピクセルの正方形はもう本当に必要ないのです。

Modern favicon sizes and usage:

32×32: ほとんどのデスクトップブラウザの標準（16×16 を置き換える）
128×128: Chrome store および小さな Windows 8 スター画面アイコン
152×152: ホーム画面アイコンを含む。 iPad touch icon
167×167: iPad Retina touch icon
180×180: iPhone Retina icon
192×192: Google Developer web app recommendation
196×196: iPad Touch icon
192×192: iPad Retina icon
182×192: Google Developer web app recommendation Android ホーム画面アイコン

Best Practices

アイコンがそうであることは、全体のデザインから見て重要ではないように思えますが、そうとは言い切れないのです。ユーザーは、名前で識別できない場合、それらを期待するようになりました。これらの小さな要素は、全体的なユーザーエクスペリエンスとブランドに貢献します。

では、ファビコンを最大限に活用するにはどうしたらよいでしょうか。

ファビコンはブランドアイデントにつながる必要がありますが、ロゴ全体を含めるには小さすぎることがよくあります。ブランド名の最初の文字や、ブランドと組み合わせて使用する小さなマークなど、識別可能な要素を使用します。
形状について考えてみましょう。ファビコンのスペースは、デフォルトでは、正方形です。それ以外の場合は、背景が透明であることが必要です。システムによっては、エッジを丸くすることもできるので、それも考慮する必要があります。
ファイルは小さくても、小さすぎないようにする。ほとんどのデバイスで適切にレンダリングされるファビコンサイズをアップロードしますが、ウェブサイト全体を停滞させることはありません。
ファビコンのデザインでは、単語や複雑な要素を避けます。色でクレイジーになるには小さすぎます。そのため、これらの小さなアイコンのほとんどは、背景色と前景色に加え、2 つの間に多くのコントラストを使用しています。

Design Techniques

Favicon は小さいので、Photoshop で気まぐれにデザインしたくなることがあります。これは、長持ちさせるために推奨される方法ではありません。

Favicon の視覚的なデザインルールのトップは、デザインをシンプルに保つことです。色やテキスト、ブランド要素でやり過ぎないようにしましょう。

Illustrator や Sketch などのベクターツールでファビコンを作成し、必要なサイズにデザインを書き出します。これにより、画面の解像度が変化しても、時間の経過に耐えるファビコンを作成することができます。 (新しいサイズで再エクスポートするだけです。)

Favicon の視覚的なデザインルールのトップは、デザインをシンプルに保つことです。色やテキスト、ブランド要素でやり過ぎないようにしましょう。この投稿の例を見ると、これらの小さな要素のほとんどすべてが、16×16ピクセルで読み取れることがわかります。見やすいように小さく作るのは結構大変かもしれません。

ファイルは透過pngで保存しましょう。これは、ファビコンに奇妙なエッジやボーダーが発生しないようにするための良い習慣です。 (アイコンを囲むギザギザの白い縁ほど悪いものはありません。)

優れたデザインの原則を使用する。ファビコンは、より大きく、より目に見えるサイズで何かに使用される可能性があることを知らない。たとえば、Web サイトのブックマークを保存すると、ファビコンの大きなバージョンが使用されることがあります。同じことが、ドッキングや、検索エンジンの結果プレビューでも言えます。

小さいとはいえ、このアイコンはあなたのブランドを表します。うまく設計しましょう。

ファイルを用意したら、数行のコードで Web サイトに追加できます。 (多くの WordPress テーマや Web サイトビルダーにはすでにファビコン要素が含まれているので、このステップについて考える必要はありません。)

画像ファイルをアップロードしたら、Web サイトのヘッダーに次のコードを挿入し、「iconpath」と「iconname」が特定のファイル要素を参照していることに注意します。 (必ずクリックして、デザイナーの Dribbble ページで愛を表現してください。)

Prodigi.team Responsive Logotype

Butterscotch Proposed Logo System

Logo Favicon Display

ファビコンテンプレート

TECロゴオプション2

結論

ファビコンのサイズに欠けているもの。ユーザーエクスペリエンスで補うことができます。これらのアイコンは、あなたのサイトの訪問者や多くのブラウザタブを開いたままにしがちな訪問者のためのナビゲーションツールとして機能します。

一般に、ファビコンは、ユーザーをあなたのデジタルプレゼンスにリンクする素早い視覚的な識別子です。あなたのブランドを最もよく、より正確に表現するために、ファビコンに気を配ってください。