いつ 学ぶ ウェブサイトの作り方ウェブサイトの作り方を学ぶとき、多くの人が見落としがちなのが、実は大きな違いを生み出す小さな仕上げのタッチ、ファビコンです。あなたのウェブデザインは、実際のサイズよりもはるかに大きな印象を残すので、その重要性を過小評価しないでください。
ファビコンとは何であり、何がウェブサイトデザインにおいてファビコンをこれほど強力な要素にしているのでしょうか？この記事では、ファビコンの重要性に光を当て、ファビコンの作成方法について知っておくべきことをすべてお教えします。
ファビコン画像とは何ですか？
ファビコンは、ウェブサイトやウェブページを表すためにウェブブラウザ上で使用される16x16ピクセルの小さなアイコンです。お気に入りアイコン」の略で、ファビコンはウェブブラウザの上部にあるタブに表示されるのが一般的ですが、ブラウザのブックマークバーや履歴、検索結果でページのURLと一緒に表示されることもあります。
Google Chromeのように、ファビコンがブラウザのホームページに表示される場合もあります。言い換えれば、ファビコンを作成すると、あなたのウェブサイトのアイコンとして、またはユーザーがウェブ上であなたのウェブサイトを見つけるための視覚的な識別子の役割を果たします。
ファビコンは、ショートカットアイコン、タブアイコン、URLアイコン、ブックマークアイコンと呼ばれることもあります。
ファビコンの歴史
ファビコンの最初のバージョンは、1999年にリリースされたインターネット・エクスプローラ5でマイクロソフトによって導入された。これはICO形式の16x16ピクセルのアイコンで、ウェブサイトのルートディレクトリに追加することで、ブラウザに自動的に表示された。
しかし、ウェブサイトを表すのに小さなアイコンを使うというアイデアは、199年よりもさらに昔にさかのぼる。グラフィカル・ブラウザが一般的に使われるようになる前のウェブの黎明期には、リンクスのようなテキストベースのブラウザは、ウェブサイト名の横に小さなシンボルを表示し、そのサイトが安全かどうかを示していた。
ファビコンのコンセプトは後にFirefoxやChromeを含む他のブラウザにも採用された。同時に、フォーマットはより大きなサイズと複数の画像フォーマットをサポートするように進化しました。今日、ファビコンはすべてのウェブ体験に不可欠な要素となっています。カスタムデザインのアイコンとして、ファビコンは大小さまざまな企業のブランドアイデンティティを高めるために使用されています。
ファビコンの標準化
時間の経過とともに、ファビコンはそのフォーマット、サイズ、ウェブサイト上の位置の点で標準化されてきました。この標準化は、異なるブラウザとデバイス間で一貫してファビコンを実装する必要性から発展してきました。
この標準化のプロセスは2005年に始まった。 2005World Wide Web Consortium (W3C)がファビコンに関する勧告を発表したときに始まった。その勧告では、ファイルは「favicon.ico」という名前で、ウェブサイトのルート・ディレクトリに置くべきだと述べている。その勧告では、アイコンのサイズとフォーマットの要件についても概説している。
その後、W3Cは2011年にファビコン用の画像フォーマットとサイズを追加し、再び勧告を更新した。また、さまざまなデバイスにおける複数のアイコンのサポートガイドラインも含まれている。
ファビコンの標準化にはいくつかの利点がある。その第一は、さまざまなブラウザやデバイスで適切に表示されるということだ。標準化以前は、あるブラウザでははっきりと表示されても、別のブラウザでは表示されず、ユーザーエクスペリエンス 。
また、ウェブデザイナーや開発者は、異なるブラウザやデバイスのために特別にファビコンをデザインしたりフォーマットしたりする必要がなくなり、ファビコン作成プロセスが簡素化されました。一つのデザインとフォーマットで動作するはずです。これはまた、すべてのウェブユーザーのウェブ体験を改善し、標準化します。
ウェブブラウザ上のファビコン
ブックマークバーのファビコン
ブラウザの履歴にファビコン
検索結果のファビコン
ファビコンが重要な理由
ファビコンは、その小さなサイズにもかかわらず、あなたのウェブサイトのイメージの全体的な効果にとって非常に重要です。 ウェブサイトのイメージユーザーエクスペリエンス, ブランディングとプロフェッショナリズムを向上させます。
ユーザーエクスペリエンス:ファビコンは、あなたのウェブサイトへの記憶に残る視覚的な手がかりとして機能し、ユーザーエクスペリエンス を強化します。ファビコンは、ユーザーがブラウザ上やブックマークバーなどのさまざまなアプリケーション上であなたのウェブサイトのタブを簡単に見つけるのを助けるので、ユーザーが何度もあなたのサイトを再訪問しやすくなります。ファビコンはまた、モバイルに関してはユーザーエクスペリエンス 。モバイルでのウェブデザインはインパクトを与えることがすべてであり、多くの場合、優れたファビコンほどそれを強力に、あるいは簡単に行うものはありません。
ブランディング真にまとまりのあるブランドには、ほんの小さなディテールも重要です。ファビコンは、その小さなサイズにもかかわらず、ブランドの言語をサイトの外まで拡張し、ウェブブラウザに刻印することで、ウェブサイトのブランディングと可視性に貢献します。ファビコンはまた、あなたのウェブサイトの正当性とプロフェッショナリズムを高め、それを完全なものに見せます。
信頼性:ファビコンはあなたのサイトの安全性には影響しませんが、逸話的には、ユーザーはファビコンのあるサイトを信頼するようです。それは、ブランド検索で見つけたか、非ブランド検索で見つけたかに関係なく、ユーザーに明らかにあなたのサイトであることを知らせるからです。
リターンユーザー:ファビコンは強力なブランド識別子であり、検索結果ページやユーザーのブラウザ履歴で、あなたのサイトを簡単に目立たせることができます。このため、認識しやすいファビコンは、ユーザーがより頻繁にサイトを訪れるのに役立ちます。さらに、ユーザーがあなたのサイトをブックマークする際、ファビコンがあれば、保存されている他のコレクションの中から見つけやすくなります。
ファビコンとSEO
ファビコンはサイトのSEOに直接的な影響を与えません。しかし、ファビコンはブラウザの識別を容易にし、全体的なユーザーエクスペリエンス- ファビコンの品質は、いくつかの方法で検索結果でのサイトの順位を有機的に向上させることができます：
ファビコンは、Google 、その他の検索エンジンがあなたのウェブサイトを識別するのに役立ちます。Google があなたのウェブサイトをクロールするとき、ファビコンファイルを探します。見つかった場合、検索結果であなたのウェブサイトを識別するためにファビコンを使用します。
ファビコンはユーザーにウェブサイトを覚えてもらうことができます。ユーザーがブラウザのタブ、ブックマーク、検索結果であなたのファビコンを見ると、あなたのウェブサイトを覚えてもらうことができます。これにより、検索結果であなたのウェブサイトがより多くクリックされるようになります。
ファビコンはユーザーエクスペリエンス の改善に役立つ。優れたデザインのファビコンは、ウェブサイトをより専門的で洗練されたものに見せ、ユーザーエクスペリエンス 。
ファビコンへの挑戦
強力なブランドアイデンティフィケーションである一方で、ファビコンのデザインに課題がないわけではありません。以下に主なものをまとめました、
- 限られたデザインスペース： ブランドのロゴをファビコンに適したサイズにすることは、特にブランドの真のメッセージを伝えることを期待する場合、難しいことです。
- セキュリティ セキュリティ：ファビコンは、悪意のあるコードインジェクション、マルウェア、なりすまし攻撃、フィッシングの脅威など、多くのサイバーセキュリティ攻撃に使用される可能性があります。
- ウェブサイトのロード時間とスピード： すべてのウェブ画像と同様に、ファビコンもウェブサイトのパフォーマンスに合わせて最適化する必要があります。
- アクセシビリティ： 小さな画像であるファビコンは、アクセシビリティの観点から難しい場合があります。小さすぎて説明のテキストや他の手がかりを含めることができません。
- 互換性の問題： ファビコンのファイルやフォーマットが標準化されても、異なるブラウザやデバイス間での表示方法に問題があり、ウェブ上での見え方に影響を与える可能性があります。
ウェブサイトのファビコンを作成する方法
何よりもまず、ファビコンは通常、あなたのブランドのロゴを簡略化したものであるべきです。なぜなら、ファビコンはブランディングの延長であり、ユーザーの気をそらすのではなく、すでに構築したブランドアイデンティティを強化するものだからです。そのためには プロのデザイナーを雇う.しかし、好みのデザインプログラムやいくつかのオンラインツールを使って自分で作ることもできます。そのような推奨ツールのひとつが、Wixロゴメーカーこれは、あなたのスタイルとニーズを最もよく反映した、プロフェッショナルでパーソナライズされたファビコンを作成することができます。また、無料の Wixアイコンまたはベクターアート ベクターイラストレーションツールを使用することもできます。
ファビコンデザインのヒントについては下のセクションで説明しますが、今のところ、覚えておくべき重要なガイドラインは以下のとおりです：
Sサイズ
ファビコンを作成するのに最適なサイズは16x16ピクセルで、これは最も一般的に表示されるサイズです。しかし、ファビコンはより大きなサイズ（32x32ピクセルなど）でも表示することができます。ファビコンの適切なサイズを見つけるのにお困りの場合は、Wixのイメージリサイザーツールを使用してみてください。
ここでは、いくつかの標準的なファビコンのサイズと、それぞれを使用する必要がある場合のガイドラインを示します：
16x16:ブラウザファビコン
32x32:タスクバーショートカット favicon
96x96:デスクトップショートカットファビコン
180x180:Apple touch ファビコン
もっと詳しく ピクセルとは
Wixブログを購読する新鮮なウェブデザインのヒントやトレンドを毎週お届けします。
ファイル
オリジナルのファビコン形式はICOでした。今日ではファイル形式または ベクターアート ファビコンにはPNGまたは JPEG. SVGは、より多くのブラウザがサポートし始めているので、ますます人気のある選択肢です。ブラウザはGIFとして作成されたファビコンも表示できますが、サイズが小さいとGIFファビコンは見えにくくなります。
ICO： マイクロソフトが開発した、ファビコン用のオリジナルファイル形式です。すべてのブラウザでサポートされており、1つのファイルに複数のサイズの画像を含めることができます。これにより、ブラウザに依存することなく、画像のサイズや拡大縮小を行うことができます。多くの場合、ファビコンがICOと他のファイル形式として保存されている場合でも、ブラウザはICOバージョンを表示するように選択します。
PNG：これは、ウェブサイト作成者が非常に慣れ親しんでいるため、ファビコンのファイル形式として人気があります。作成が簡単で、一般的に高品質の画像とファビコンを提供します。PNGファイルは軽量で、読み込みが速いという利点もあります。
SVG： これらのファイルは軽量であることで知られています。ファビコン用のこのタイプのファイル形式の最大の利点は、ページ速度やサイトパフォーマンスを低下させることなく高品質の画像を提供できることです。以前は、ブラウザの互換性がないため、ファビコンへの SVG の使用は制限されていましたが、これは変わりつつあります。
透明：背景が透明なデザインの場合は、必ず透過設定をオンにしてPNGファイルとして保存してください。
ファビコンデザインのヒント
これほど小さなものをデザインするのは、公園を散歩するように思えるかもしれない。しかし ウェブサイトのアイコンが小さいということは、それだけ正確でなければならないということです。
ここでは、あなたのブランドとウェブサイトに最適なファビコンを作成するためのヒントをいくつか紹介します：
シンプルさ
ファビコンのサイズが小さいため、デザインは正確でなければなりません。小さな線、テクスチャ、陰影のような要素を避けることで、細部に入りすぎるのを控えましょう。その代わりに、一目でわかるような大胆で明確かつシンプルなアイコンを目指してください。
ジュエリーデザイナー、Wixユーザーイリア・ボナールiのファビコンは、3つのシンプルな点で構成されたシンプルなファビコンの素晴らしい例です。また、Ducknologyのシンプルなファビコンの風変わりな面白さも大好きです。アヒルは彼らのロゴから転用されたもので、このサイトとブランドをとてもユニークなものにしているすべてを表しています。
ブランド・アイデンティティ
ファビコンは、あなたのウェブサイトの他の部分と同じ視覚的言語と配色を維持しながら、あなたのウェブサイトとブランドの精神をカプセル化する必要があります。
グラフィックデザイナー向け BhrooviのWixのウェブサイトでは、レインボーカラーのファビコンがウェブサイトと同じカラフルなビジュアル言語を継承している。 eBayのファビコンは、ブランドのカラーと小さなショッピングバッグのアイコンを融合させ、ロゴデザインの簡略版でサイトの精神を完璧に表現している。
テキストはほとんどない
ファビコンにテキストを含める場合は、1文字から3文字の間に制限してください。イニシャルや略語は、ブランド名のようなテキストを短くするのに適しています。
非営利団体のWixウェブサイト アルテのウェブサイトでは、ロゴの頭文字Aをファビコンとして使用し、ネオングリーンの背景を加えて注目を集めている。また、ブルックリンを拠点とする レッドファーンのWixウェブサイトには、テキストがまったくない。代わりに、ロゴから葉っぱのアイコンのみを抽出し、ブランドを強化しながらインパクトを生み出している。
ロゴ使用
一部のロゴはファビコンサイズでも最高に美しく見えますが、ほとんどのロゴは縮小するとほとんど読めなくなります。ロゴをファビコンとして使いたい場合は、おそらくいくつかの調整が必要でしょう。タグラインを省いたり、イニシャルを1つだけにしたりすることは、ロゴをファビコンサイズで使えるようにする方法の一部です。
Googleのファビコンが、同じデザイン価値を体現しながら、ロゴとは少し異なっていることに注目してほしい。このファビコンは、おなじみのGの頭文字だけを示しながら、ブランドカラーの4色すべてをその1文字にシームレスに組み込んでいる。異なるアプローチをとったのは、イラストレーターでWixユーザーのシャーロット・ミーiは、手描きのロゴのイニシャルをファビコンとして使用している。
色
あなたのサイトのファビコンは、使用するコンテキストやブラウザによって異なる色の背景に表示されることに留意してください。したがって、デザインを確定する前に、グレー、白、黒の背景でファビコンをテストするようにしてください。
HTMLでファビコンを追加する方法
ウェブサイトビルダーでサイトを作成した場合、ファビコンは HTMLでファビコンを追加する必要はありません。このステップは、開発者によって構築されたサイトにのみ適用されます。以下は、ファビコン画像をウェブサイトに表示するために、コードのヘッダーに挿入する方法です。
<link rel="icon" type="image/png" href="Favicon.png"/>
Wixでサイトを作成しますか？次に、ファビコンを簡単にカスタマイズしてサイトに追加する方法をご紹介します。
Wixサイトにファビコンを追加する方法
Wixのサイトには、標準のデフォルトファビコンが自動的に含まれていますが、プレミアムプランにアップグレードして、以下の方法でカスタマイズすることができます。 サイトをドメインに接続する.
Wixサイトのファビコンを簡単に変更できます：
サイトのダッシュボードで、「設定」に進みます。
ファビコン」の隣にある「管理」をクリックします。
画像をアップロード」をクリックし、既存の画像を選択するか、「メディアをアップロード」をクリックしてコンピューターから画像をアップロードします。
ページに追加」をクリックします。ブラウザのタブにファビコンのプレビューが表示されます。
保存」をクリックすると、ジャーン！あなたのウェブサイトにファビコンができました。公開をクリックすると、ウェブサイトのタブに表示されます。
ファビコンのテスト
ファビコンを挿入したら、それが表示されるすべての場所でどのように見えるかをチェックすることをお勧めします。その際、キャッシュの問題を避けるため、シークレットモードに切り替えることをお勧めします。
ブラウザ、ブックマークタブ、ブラウザの履歴、そして可能であれば検索結果でも。オーガニックキーワードでまだランキングされていませんか？あなたのサイトがインデックスされていれば、会社名やブランド名で検索して見つけることができるはずです。ファビコンを見つけたら、それが適切に実装されていることがわかります。
これは、ファビコンの見た目について考える良い機会でもあります。その最終的なビジュアルデザインは、あなたのブランドの本質を捉えていますか？そうであれば、あなたのファビコンは世界と共有する準備ができています。もしあなたが Wix画像の最適化ガイドをご覧ください。
ファビコンFAQ
ファビコンは何に使うのか？
ファビコンは「お気に入りアイコン」の略で、ウェブサイトを表す小さなアイコンのことです。ウェブサイトを開いたときに、ブラウザのタブ、ブックマークリスト、アドレスバーに表示されます。ファビコンは、ユーザーがウェブサイトをすばやく簡単に識別できるようにするために使用され、ブランド認知度の向上にも役立ちます。