2022.02.22ホームページをブックマークするとき、WebページのURLを覚えておくのは困難ですが、ブックマークリストに小さなアイコン(ファビコン)が表示されます。ユーザーはアイコンを認識し、それが以前に訪問したホームページであることに気付きます。このアイコンは小さいですが、ブランド認知度に大きな影響を与えてくれます。上記のような問題が生じるかと思います。本コラム記事では、ホームページ担当者様へ向けて、ホームページアイコン(ファビコン)の「作り方」「ツール紹介」「素材サイト」「設定方法やコツ」を紹介しています。まとめホームページアイコン(ファビコン)とはアイコン(ファビコン)は、ホームページを抽象的に表したアイコンです。通常「ブラウザタブ」や「ブックマークリスト」などにアイコンが表示されます。アイコンは、ホームページにとって重要な要素となるため、デザイン設計に力を入れる必要があります。アイコンは以下のような場所にも表示されます。検索バーパソコンデスクトップアイコンスマートフォンで作成したショートカットホームページアイコンを設定するメリットホームページアイコン設定をすることで、4つのメリットを得ることができます。アイコン設定を検討している方は、下記メリットを考慮した上でアイコン作成してみましょう。ブランディング効果がある検索エンジン最適化(SEO)に役立つブックマークをするとWebページがみつけやすいホームページデザインのアクセントになるブランディング効果があるホームページアイコンを作成するとブランディング効果があります。ブランディングとは、ユーザーへの共通のイメージ付けです。ホームページアイコンを設定することで、多くのユーザーの目に触れます。アイコンを覚えることは、企業名を覚えるよりも簡単なため、自社認知度アップに適した方法であるということです。検索エンジン最適化(SEO)に役立つホームページアイコンの作成は検索エンジン最適化(SEO)にも役立ちます。アイコン設定自体に直接のSEO効果はありませんが、アイコン設定をすることでホームページの信頼度が増し、アクセスしやすくなるので結果として検索エンジン最適化に役立つということです。ブックマークをするとWebページがみつけやすいホームページアイコンを設置すると、ブックマークした場合にWebページがみつけやすくなります。一度訪問したWebページをブックマークすることはよくありますが、その度に企業名やページタイトルは覚えていないでしょう。ホームページアイコンがあることで、ユーザーの記憶に残りやすくなり、再アクセスが見込みやすくなるメリットがあります。ホームページデザインのアクセントになるアイコン設定はホームページデザインのアクセントになります。ホームページのデザインは、ユーザーの使いやすさを考慮して設計しなくてはいけないため、デザインで差別化を図るのは難しいでしょう。アイコンをこだわって作成すれば、それがホームページのアクセントとなります。ホームページアイコンの作り方を4STEPで紹介ホームページアイコンの作り方を4ステップで紹介します。下記手順に従ってホームページアイコンを作成してみましょう。※上記リンクを選択すると移動(ジャンプ)できます【STEP1】ホームページアイコンの画像形式を理解するホームページアイコンの画像形式を理解しましょう。ファビコンには、指定されたフォーマットやサイズがあります。画像形式を理解した上で作成に望む必要があります。アイコンのサイズアイコンのサイズは、表示される「デバイス」や「ブラウザ」によってことなります。必要となるアイコンのサイズは下記の通りです。apple-touch-icon.pngfavicon.ico(パソコン用アイコン)favicon.icoは「ブラウザ上」「デスクトップ」など、アイコン作成時に良く用いられるフォーマットです。favicon.icoは主にパソコン閲覧用にアイコンを作成するフォーマットと理解しましょう。favicon.icoのフォーマットにて、アイコンを作成すると表示場所に応じた最適サイズに縮小されるので、大きいサイズのアイコンを用意しておく方法が最適です。サイズごとにアイコンをキレイに表示させたい場合は、上記で紹介した各サイズのアイコンを作成し、複数のアイコンをマルチアイコンとして使用する方法で設定を行います。apple-touch-icon.png(スマートフォン向けアイコン)apple-touch-icon.pngは「Android」や「iPhone」のホーム画面でショートカットを作成した場合に表示されるアイコンフォーマットです。ユーザビリティを向上させたい場合は「favicon.ico」「apple-touch-icon.png」両方のフォーマットにてアイコン作成することをおすすめします。【STEP2】アイコン作成ツールを使用する続いて、アイコンを作成するためのツールを用意しましょう。今回紹介するツールは下記3つです。favicon.ccfavicon.cc(ファビコン・シーシー)は、簡単にホームページアイコンが作成できるツールです。素材をインポートして使用することも可能ですし、1からデザインを描いてアイコンを作成することも可能となっています。作成中のアイコンは常にプレビューで確認もできるので「アイコン作成初心者」にピッタリのツールです。generator(ファビコン・ジェネレーター)は「JPG」「PNG」の素材をアップロードするだけで、アイコンに必要なサイズに最適化をしてくれるツールです。最適化したアイコンごとのタグも生成されるので「favicon.ico」「apple-touch-icon.png」両方のアイコン作成がしたい方には、おすすめのツールといえます。Any2Ico(クイック・エニー2Ico)は「PNG」「JPG」「JPEG」「GIF」「BMP」「TIF」「WMF」等の複数フォーマットに対応したアイコン作成ツールです。アイコン対応サイズも「16px×16px」~「512px×512px」まで対応しているのが特徴となっています。「多様なサイズに対応したアイコン作成がしたい」に向いているツールです。【STEP3】アイコン素材を探すアイコン作成ツールの選定が終わったら、次にアイコン作成で使用する素材を探します。1からアイコンのデザイン設計が困難な場合は、下記素材サイトから自社に合った素材を見つけてみましょう。MONO(アイコン・モノ)では、6,000以上のアイコン素材が無料でダウンロード可能です。白黒を基調としたオシャレなアイコンが特徴となっており、ビジネスシーンに活用できるたくさんのアイコン素材が用意されています。素材をダウンロードする際に「サイズ」「カラー」「フォーマット」の3点を選択した上で、ダウンロードが可能です。Icon-rainbowIcon-rainbow(アイコン・レインボー)は、商用利用可能なアイコンがダウンロード可能なアイコン素材サイトです。アイコンのカテゴリーは「インターネット関連」「ビジネス」「ファッション」「人・動物」の4つ分けられています。基本的に白黒のアイコンですが、カラー変更した上でのダウンロードも可能です。Icons8Icons8は、3万点以上のアイコンが商用利用できるアイコンサイトです。ビジネスシーンからポップなジャンルのアイコン素材が多く用意されています。Icons8は無料で利用可能ですが、リンク表記が必要です。有料プランに加入、もしくは個別でアイコンを購入することでリンク表記が不要となります。Iconsは、無料で商用利用が可能なアイコンサイトです。カテゴリーとしては、ユーザーのアクションを促すようなCTAボタンが多い印象です。ホームページアイコン作成だけではなく、アプリなどでも活用できるアイコンが多く用意されています。DESIGN(ドッツ・デザイン)は、商用フリーのアイコン素材が1万点以上用意されているWebサイトです。多くのジャンルを網羅しています。Icons(マテリアル・アイコン)は、Google社が提供するアイコンサイトで、マテリアルデザインに特化したアイコンが750種類以上用意されています。マテリアルデザインとは、Googleが推奨するデザインで、どんな環境化でも直感的でシンプルなデザインを意味します。マテリアルデザインを意識したホームページ設計をしている方には、ピッタリのアイコンサイトです。FLATICONFLATICON(フラットアイコン)は、立体的なデザインが特徴なアイコンサイトです。掲載されているアイコンは400万点を超えるのが特徴となっています。FLATICONではアイコン編集ツール等も提供しているため、合わせて活用することで効率良くアイコン作成を行うことが可能です。CMANCMAN(シーマン)は、商用フリーのアイコンがダウンロード可能なWebサイトです。「ビジネス関係」「インターネット」「人物」等のアイコンを提供しており、中には動くアイコンもあります。サイズやカラーは、CMAN上でカスタマイズした上でダウンロードが可能です。生物アイコンデータ生物アイコンデータは、動植物のアイコンを200種類以上商用フリーで提供しているアイコンサイトです。文部科学省の研究機関が運営しているWebサイトになるため、珍しい動物や真正細菌等のアイコンが見つかります。アイコンは「背景の有無」と「サイズ」を選択した上でダウンロードを行います。ハンコでアソブハンコでアソブは、シンプルなモノトーン調のアイコンが商用フリーでダウンロードできるWebサイトです。シンプルながら、細部にまでこだわったアイコンが多いのが特徴のため、ホームページアイコンをこだわって作成したい方に向いています。【STEP4】ホームページアイコンを設定アイコン素材が用意できたら最後はアイコン設定です。アイコン設定方法は、自社でHTMLファイルを直接修正する場合とWordPressで編集する場合でことなります。HTMLファイルの場合HTMLでホームページアイコン設定する場合は、冒頭で紹介したアイコン作成ツールにて「favicon.ico」形式の画像を用意します。画像の用意ができたら、下記コードをタグ内に挿入してください。href="アイコンのURL">また、上記コードは全てのHTMLファイルに挿入するようにしてください。スマーフォン向けのショートカットアイコン設定「apple-touch-icon.png」の設定を行う場合は、下記コードをタグ内に挿入してください。href="アイコンのURL">上記コードは「apple-touch-icon」となっていますが、Androidでも問題なく反映します。今回使用した要素は下記の通りです。関連記事HTMLでホームページを作成する方法については、以下のコラム記事で解説中です。HTMLでホームページ作成する方法とは【プロ並のHPが作成できます】WordPressの場合WordPressでアイコン設定する際は、はじめにアイコンの素材となる画像をアップロードします。画像のアップロードは、WordPressの管理画面(ダッシュボード)にある「メディア」→「新規追加」でできます。カスタマイズ」→「サイトの基本設定」を選択します。基本設定で先ほどアップロードした画像を選択することで、アイコンが設定できます。WordPressで使用するアイコンは「512px×512px」以上のサイズが必要です。Rotator」というプラグインを追加すれば、さらに簡単にアイコン設定ができます。ホームページアイコンを上手に作成するための6つのヒントつづいて、ホームページアイコンを上手に作成するためのヒントを6つ紹介します。下記内容を理解した上で、アイコン作成してみましょう。スペースを賢く使うシンプルを保つブランドを反映するブラウザの互換性に注意する1からデザインする場合はスケッチをする著作権侵害に注意スペースを賢く使うアイコン作成するときは、スペースを賢く利用しましょう。空白が全くないアイコンだと、見栄えがよくない場合があるためです。いってあまりにも空白が多くて、アイコン自体が小さくなりすぎてもいけません。与えられたピクセルページを上手く使い切るようなデザイン設計を心がけて、スペースを賢く利用したアイコンをデザインしてみましょう。シンプルを保つホームページアイコンはシンプルが一番です。ホームページアイコンには、複雑なデザインは求められていません。アイコン作成の目的は、ユーザーに「覚えてもらう」「認知されやすくする」この2点です。そのため、複雑なデザインだとマイナスに働いてしまうこともあるので、アイコンデザインはシンプルを保つようにしましょう。ブランドを反映するホームページアイコンは、自社ブランドを反映したものでなくてはいけません。アイコンを見ただけで、どんな企業かイメージできるものが理想です。アメリカのペンシルベニア州にあるウォルバート・アニマル病院のアイコンは非常に良い例といえます。ウォルバート・アニマル病院では、アイコンに「足跡」を採用しています。多くのユーザーは足跡を見ると動物を連想するため、アイコンを見ただけで動物を扱っているビジネスであると認識するでしょう。このように自社のビジネスと関連のあるアイコン作成がおすすめです。ブラウザの互換性に注意するホームページアイコンを作成するときは、ブラウザの相互性に注意が必要です。アイコンは、ブラウザのタブ上に表示されますが、ブラウザごとにタブの背景色がことなるためです。したがって、ホームページアイコンの色は慎重に選定する必要があります。Chromeのブラウザタブは明るい灰色ですが、これと同系色がメインのアイコンを作成した場合、うまく表示ができない可能性があるということです。ホームページアイコンを作成する際は、ブラウザの互換性に注意した上で作成するようにしましょう。1からデザインする場合はスケッチをする1からアイコンデザインを考える場合は、すぐ作成ツールを使わずにスケッチからはじましょう。アイコンの細かな曲線などの編集は、作成ツールよりもスケッチの方が優れているためです。スケッチでデザインのアウトラインが完成してから、作成ツールを利用することでアイコン作成時間と労力を大きく削減することがきます。著作権侵害に注意ホームページアイコンの作成時は、著作権侵害に注意が必要です。1からデザイン設計したアイコンであれば問題ありませんが、素材サイトから入手した画像からアイコン作成する場合は「クレジット表記の有無」について確認するようにしてください。素材サイトによっては、Webサイトから取得した旨の記載を義務付けているケースもあるので、事前に確認した上で素材を使用するようにしましょう。関連記事ホームページは複数のコンテンツで構成されているので、それぞれのコンテンツ先の著作権には注意が必要です。著作権について詳しくは、以下のコラム記事をご覧ください。最後に、設定後ホームページアイコンが表示されないときの原因と対策について紹介します。ホームページアイコンがうまく表示されないときは、下記内容を確認してみてください。キャッシュが残っているホームページアイコンが上手く表示されないときは、キャッシュが残っている可能があります。キャッシュとは、ユーザーが一度アクセスしたホームページデータをブラウザ上で保管し、次回訪問時に表示速度を早くするための機能です。キャッシュにより、以前のデータが使用されアイコンが表示されないケースがあります。このような場合は、キャッシュの削除をすることで改善が可能です。キャッシュ削除方法は、ブラウザによってことなります。Edge」のブラウザ削除方法を紹介します。画像サイズ・フォーマットが合っていない画像サイズ・フォーマットが合っていないと、アイコンが表示されない場合があります。アイコンのサイズに関しては、下記内容を確認してサイズが大きすぎないか、小さすぎないかを確認してください。Androidショートカットアイコンまた、フォーマットについても確認する必要があります。通常ホームページアイコンは「JPG」「PNG」等も表示される場合もありますが、原則「favicon.ico」でなくてはいけません。generator」の変換ツールを使用し「favicon.ico」に変換した上で、再度設定を実施してみてください。画像URLが違うHTMLにてアイコン設定を行った場合は「画像URL」が間違っている可能性があります。画像URLとは「href=」の後に続く画像のアドレスのようなものです。href="アイコンのURL">アイコン作成ツール等で作成したURLを正しくコピー&ペーストできているか、再度確認しましょう。反映まではある程度時間がかかる上記方法を試しても改善しない場合は、アイコン反映までに時間がかかっている可能性があります。アイコン反映までは、早くても2~3時間かかるといわれています。反映するまでに1日かかることもあるので、しばらく時間を置いてから確認してみましょう。まとめホームページアイコンの設定方法について紹介しました。今回のポイントは下記の通りです。ホームページアイコンを設定するメリットは4つです。ブランディング効果が期待できるアクセスが見込みやすくなるブックマークをするとWebページがみつけやすいホームページデザインのアクセントになるホームページアイコンは下記4STEPで作成できます。【STEP1】ホームページアイコンの画像形式を理解する【STEP2】アイコン作成ツールを使用する【STEP3】アイコン素材を探す【STEP4】ホームページアイコンを設定ホームページアイコンの作成ツールは下記のいずれかのツールを利用しましょう。当サイト「ビズサイ」ではホームページ制作サービス(サブスクリプション)を提供しています。ビズサイでは、ホームページの目的に合わせて3種類のプランを用意しており、お申込みから公開まで最短5営業日でホームページ制作ができます。ホームページアイコン(ファビコン)の作成も行っております(詳しいサービスはこちら)。美容業まずは無料でご相談ください。