【初心者向け】ホームページのアイコン設定方法を解説!ゼロから自作する方法も

2023/05/26 18:00

ユーザーからのホームページ認知度を高めるために、アイコンは大きな役割を果たします。

自社ホームページであることを覚えてもらいやすくなるだけでなく、検索結果・タブ・ブックマーク上で識別してもらいやすくなるなど、ホームページを運用する上では必ず取り入れておきたいものです。

しかし「ホームページへのアイコン設定の設定方法は?」「そもそもアイコンは自作できるのか」などなど、Web初心者にとっては不明点が多くあることでしょう。

マナブ
マナブ

アイコンについては、考えたことがありませんでした…。

編集長
編集長

しっかり理解できれば難しくないよ。今回でアイコンをマスターしよう!

こちらでは、ホームページのアイコン設定方法や自作方法について解説します。

この記事のレベル

重要度(4)
初心者度(4)
難易度(1)

この記事で学べること

  • アイコンの概要
  • ホームページのアイコンを設定する方法
  • アイコンを設定するメリット
  • アイコンの自作方法
  • 注意点

ホームページのアイコン【ファビコン】とは?

ホームページのアイコンとは、そのホームページを象徴するものであり、企業がそれぞれに持っている「ロゴマーク」のようなイメージが当てはまります。

マナブ
マナブ

大手ファストフード店であるマクドナルドといえば「赤の背景に黄色のMの字」とイメージできることと同じですね。

このようなシンボルがあれば即座に「そのシンボルが何を表すのか」が理解できるように、ホームページにアイコンがあることで「何のホームページか」「どの企業が運営しているのか」がわかるようになります。

編集長
編集長

ホームページ上のアイコンは通称「ファビコン」といわれており、これは英語の”favorite icon”の略称なんだ。

ブックマーク、すなわち「お気に入り」に追加する際にアイコンが表示されることから、「ファビコン」と呼ばれるようになりました。

しかし、アイコンが表示される場面はこれだけではありません。

アイコンが表示される5つの場面

アイコンが表示される場面は、大きく5つに分類できます。

  1. スマホのホーム画面
  2. スマホの検索結果
  3. ブラウザのブックマーク
  4. ブラウザのタブ
  5. Windowsのショートカット

弊社が運用しているこのSEOタイムズにおいて、アイコンがどのように表示されているのかを実際に見ていきましょう。

スマホのホーム画面

共有ボタンから、スマホ上でホームページを「ホーム画面に追加」した場合には、以下のようにアイコンが表示されます。

スマホのホーム画面
マナブ
マナブ

SEOタイムズの「書籍」のアイコンが表示されていますね。

スマホの検索結果

スマホの検索結果では、サイトURLの左側に表示されるようになっています。

スマホの検索結果
編集長
編集長

虫眼鏡のアイコンが表示されているね!

ブラウザのブックマーク

ブラウザ上でブックマークした場合、以下のようにページ名の左側に表示されるようになっています。

ブラウザのブックマーク
マナブ
マナブ

書籍のアイコンが表示され、SEOタイムズであることが一目でわかるようになりました。

ブラウザのタブ

ブラウザのタブ上でも、アイコン・ページ名の順で表示されます。

ブラウザのタブ
編集長
編集長

検索しながらでもホームページを識別しやすくなっているんだ。

Windowsのショートカット

いつでもすぐに確認できるよう、ショートカットに登録した場合はどうでしょうか。

Windowsのショートカット
マナブ
マナブ

アイコンが大きく表示され、その下にページ名が入るようになっていますね。

このように、アイコンが表示されることにより、ページ名だけではなかなか識別が難しい部分で、非常に目立つようになります。

具体的なサイト名を覚えていなくても、アイコンに見覚えがあればまた訪問してくれる可能性も高まるでしょう。

アイコンの重要性

2023年3月、Googleはデスクトップ上での検索画面においてファビコンが表示されるようにアップデートしました。

これにより、ユーザーは従来よりも視覚的にホームページを識別できるようになりました。

検索結果の上部にアイコンやサイトURLが表示されることで、ユーザーはホームページを開く前にソース元(発信者)がどこなのか、よりわかりやすくなります。

ユーザーにとっては「信頼できるホームページなのか」「透明度の高いホームページなのか」を一目で判断できて安心です。

マナブ
マナブ

アイコンを設定することで、ユーザーにホームページを効果的にアピールできるようになるんですね!

編集長
編集長

そうだね。だから、ホームページ運用においてアイコンは欠かせないんだ!

ホームページのアイコンを設定する方法

それでは、ホームページにアイコンを設定するにはどうしたら良いのでしょうか。

実際のスクリーンショットとともに、2つの方法を解説します。

METHOD 1WordPressの場合

WordPressの場合の手順は、以下のとおりです。

  1. WordPressの設定から外観へアクセス
  2. カスタマイズをクリック
  3. サイト基本情報に入り、サイトアイコンを設定
  4. 保存
サイトアイコン

上記の画像における「サイトアイコンを選択」することにより、アイコンが表示されるようになります。

WordPressでは、画像を挿入するだけで簡単にアイコンを設定できて非常に便利です。

画像のサイズは「512px×512px以上」にしておきましょう。

METHOD 2HTMLファイル場合

HTMLファイルの場合の手順は、以下のとおりです。

  1. サーバーのファイルマネージャーを開く
  2. 任意のページのHTMLファイルにおいて、以下の3つのファイルをアップロード
    • favicon.ico
    • apple-touch-icon-180×180.png
    • android-chrome-192×192.png
  3. 任意のページのHTMKファイルを開き、以下のソースコードを挿入
    • <link rel=”apple-touch-icon” href=”./apple-touch-icon.png” sizes=”180×180″>
    • <link rel=”icon” type=”image/x-icon” href=”./favicon.ico”>
  4. ファイルを更新して完了

「favicon.ico」はアイコンの拡張子、「apple-touch-icon.png」はiPhoneなどのiOSにおけるアイコン、「android-chrome.png」はアンドロイドにおけるアイコンを指します。

3つのファイルをアップロードすることにより、どの媒体でも正しくアイコンが表示されるようになります。

編集長
編集長

WordPressとは異なり、ファイル形式を変更する必要がある点に注意しよう!

ホームページのアイコンを設定する4つのメリット

ホームページにアイコンを設定するメリットには、以下の4つが挙げられます。

  1. 認知度向上になる
  2. ブランディングになる
  3. 信頼性が高まる
  4. 検索結果で認識しやすくなる

それぞれのメリットについて、集客やマーケティングの視点から解説します。

MERIT 1認知度向上になる

人は、テキストよりも視覚的なイメージの方が記憶に残りやすいといわれています。

これは、「テキストによる記憶が得意な左脳」と「イメージによる記憶が得意な右脳」において、左脳よりも右脳の記憶力が10倍高いことが影響しています。

つまり、「相手へ即座に情報を伝えたい」「認知して欲しい」場合には、テキストではなく画像によるイメージの方が効果的だということです。

これはホームページにおいてもいえることであり、アイコンが設定されているとユーザーに記憶してもらいやすくなります。

マナブ
マナブ

結果的に、アイコンを見るだけでも認識してもらいやすくなり「ブランディング」「認知度向上」につながるんですね!

MERIT 2ブランディングになる

ホームページのアイコン設定は、ブランディングにもなります。

アイコンを設定すると必然的にホームページを象徴する「顔」となるわけですから、ユーザーはそのアイコンを「トレードマーク」や「目印」として認識するようになります。

編集長
編集長

アイコンを見るだけでホームページを判別できるようになることで、ユーザーに覚えてもらいやすくなるんだ。

アイコンを通してユーザーに存在を強くアピールでき、これを繰り返すことで最終的に「信頼」の証にもなり得ます。

アイコンを通して「再訪問」を誘導するのも夢ではないでしょう。マーケティングや集客の上では非常に大切なメリットです。

MERIT 3信頼性が高まる

ホームページにアイコンを設定していない場合、アイコンには共通して青い地球のマークが表示されるようになっています。

マナブ
マナブ

これではユーザー側からすると全貌が把握できず、ページへアクセスしてわざわざ調べなければならないので不便ですね…。

編集長
編集長

ここにアイコンが設定されていると「公式のサイトである」と直感的に判断できるようになり、信頼してアクセスできるようになるんだ。

例えば「マクドナルド 新作」で検索した場合、検索結果には約430万件ものサイトがヒットします。マクドナルドの公式サイト以外にも様々なメディアが並び、数多くのサイトが表示されるのです。

そのような中、「黄色のM字型のアイコン」が表示されているサイトがあるとどうでしょうか。すぐに公式サイトであると判断でき、安心してアクセスできるようになります。

ホームページにアイコンがあることで、公式サイトとして信頼してもらいやすくなるのです。

ユーザーに信頼性や安全性を認識してもらうことは、ホームページ運用における前提として欠かせない条件ですので、アイコン設定はしておいた方が良いといえるでしょう。

MERIT 4検索結果で認識しやすくなる

前述のように、アイコンは検索結果一覧においてページ名の上に表示されるようになっています。

ユーザーはページを視覚的に認識しやすくなり、「サイトの内容」と「アイコン」でイメージを紐付けて記憶することが可能になります。

わざわざページへアクセスしなくても判断できるようになりますので、機能性が向上してユーザーにとって使いやすいホームページを目指せるようになるでしょう。

ゼロから作ろう!ホームページアイコンの自作方法

ホームページにアイコンを設定するためには、アイコンの素材を用意する必要があります。

企業のロゴがある場合には良いのですが、オリジナルを持っていない場合には「アイコンを作る」ところから始める必要があるのです。

マナブ
マナブ

ゼロから!僕、デザイナーではないので作れるか自信がないです…。

編集長
編集長

大丈夫、ポイントを押さえることで、作りやすさがグッとアップするよ!

ここでは、アイコンをゼロから自作する方法をご紹介します。

効果的なホームページアイコンの5つの条件

アイコンを自作する際は、以下の5つの条件を満たすものを作成しましょう。

  1. ホームページと統一感がある
  2. シンプルなデザイン
  3. パッと見て認識しやすい
  4. テキストを入れない
  5. 頻繁に変更しない

アイコンは、ユーザーがホームページを認識する際の目印となるものです。そのため、視覚的に記憶することが容易なデザインの方がアイコンに適しています。

これまでに紹介したスクリーンショットを見てわかるように、「実際にアイコンが表示される領域は非常に小さい」ことも配慮しておかなければなりません。

ユーザーに認識してもらいやすいよう、上記の5つの条件は必ず押さえておきましょう。

描画ソフト(お絵かきツール)を使う

それでは、早速アイコンの自作に入ります。アイコンを作るには、描画ソフト(お絵かきツール)アイコン作成用の無料ツールを利用するのがおすすめです。

描画ソフトは完全オリジナルで質の高いアイコンを作成できるメリットがありますが、使用感に慣れていないと操作が難しい一面があります。

「アイコンの制作に時間がかかる」と懸念している場合には、次でご紹介する無料ツールを利用しましょう。

アイコン作成用の無料ツールを使う

① favicon.cc

ゼロから自作するのであれば、ドットでアイコンを作成できるfavicon.ccがおすすめです。

ドットでアイコンを作成favicon.cc

画像引用:favicon.cc

② Canva

感覚的に操作がしやすいので、初めてのアイコン作りでぜひ活用したいツールです。

アイコン制作ツールCanva

画像引用:Canva

③ ICOOON MONO

素材から装飾を加えてアイコンにしたい場合は、フリー素材サイトのICOOON MONOを活用しましょう。

フリー素材サイトICOOON MONO

画像引用:ICOOON MONO

④ Favicon generator

既存画像からアイコンを作成をしたい場合は、Favicon generatorを利用すると、多様なサイズに対応したアイコンを作成できます。

既存画像からアイコンを作成Favicon generator

画像引用:Favicon generator

ホームページアイコンに最適なファイル形式は?

アイコンに最適なファイル形式はicoファイルです。

使用する媒体や表示される場面によってアイコンのサイズは変化しますが、icoファイルだと複数サイズのアイコンを1つのファイルで管理できるようになります。

可能であれば、「apple-touch-icon.png」のファイル形式も作成しておくのがおすすめです。

「apple-touch-icon.png」は、AndroidやiPhoneなどのホーム画面において、ショートカットを作成した際に表示されるファイル形式です。

編集長
編集長

近年はスマホでの情報収集が主流となっているため、ブラウザ上だけでなく、スマホでの操作性も重視しよう!

ホームページのアイコンにまつわる注意点

アイコンを作成するにあたり、著作権商標権には十分注意しなければなりません。

権利を侵害したとみなされた場合には、罰則が与えられます。

著作権侵害に注意

著作権は知的財産権に分類される権利のことであり、著作者の創作活動によって生み出された著作物を守るために存在します。

他人の著作物を利用する場合には、著作者の許可がなければなりません。

編集長
編集長

仮に著作権を侵害した場合には、法律で以下のように罰せられるんだ。

1.民事上の請求
著作権の侵害を受けた者は、侵害をした者に対し、次のような請求をすることができます。

a.侵害行為の差止請求(第112条)
b.損害賠償の請求(民法第709条・719条、第114条)
c.不当利得の返還請求(民法第703条・704条)
d.名誉回復などの措置の請求(第115条)

2.刑事上の罰則
著作権、出版権、著作隣接権の侵害は、10年以下の懲役又は1000万円以下の罰金、著作者人格権、実演家人格権の侵害などは、5年以下の懲役又は500万円以下の罰金などが定められています。
また、企業などの法人による侵害の場合(著作者人格権侵害、実演家人格権侵害を除く)は、3億円以下の罰金と定められています。
さらに、私的使用目的であっても、無断でアップロードされていることを知っていて、かつダウンロードする著作物等が有償で提供・提示されていることを知っていた場合、そのサイトから自動公衆送信でデジタル録音・録画を行うと、2年以下の懲役若しくは200万円以下の罰金が科せられます
なお、「懲役刑」と「罰金刑」は併科されることがあります(第119条~第122条の2、第124条)。

引用:CRIC 公益社団法人著作権情報センター|民事上の請求、刑事上の罰則

「著作権について、改めて学んでおきたい!」という方は、こちらの記事を参考にしてください。

ライティングの基礎知識~ライターが知っておくべき著作権について~

ライティングの基礎知識~ライターが知っておくべき著作権について~

ライターが知っておくべき著作権の基礎知識、ライティングで気をつけたい3つのポイントを解説していきます。

商標権侵害に注意

商標権は知的財産権に分類される権利のことであり、商品やサービスなどの象徴である商標を保護するために存在します。

編集長
編集長

著作権と異なるのは、特許庁に商標の登録をお願いする必要がある点だ!

登録された商標には「専用権」と「禁止権」が適用され、商標の独自性が守られます。

商標権を侵害した場合には、商標法第78条の規定により以下の罰則が下されます。

1.民事上の請求
商標権の侵害を受けた者は、侵害をした者に対し、次のような請求をすることができます。

  • 損害賠償請求(第38条)
  • 不当利得返還請求(第703条)
  • 信用回復措置請求(第39条)

2.形而上の罰則
商標権又は専用使用権を侵害した者(第三十七条又は第六十七条の規定により商標権又は専用使用権を侵害する行為とみなされる行為を行つた者を除く。)は、十年以下の懲役若しくは千万円以下の罰金に処し、又はこれを併科する。

引用:アース国際特許商標事務所|第78条【刑罰】第78条(侵害の罪)

よくある質問

おしゃれなアイコンが手に入るツールは?

モノクロを基調とした「ICOOON MONO」「Icon-rainbow」やポップな素材もある「Icons8」などがおすすめです。おしゃれなアイコンがダウンロードできるフリー素材サイトは多くあるため、お好みのものを選びましょう。

ホームページをアイコン化するには?

スマホやWindowsなどでショートカットを作成し、ホームページをアイコン化するには「apple-touch-icon.png」のファイル形式でアイコンを作成しましょう。

ホームページのアイコンとは何ですか?

アイコンとは、「どのようなホームページなのか」をユーザーへ視覚的に伝える役割を果たす大切なシンボルです。

ホームページのショートカットアイコンを変更するには?

ホームページのショートカットアイコンを変更するには、以下の手順を踏みましょう。

  1. アイコンを右クリックしてプロパティを選択
  2. ショートカットのタブをクリックして、アイコンの変更を選択
  3. 「下の一覧からアイコンを選択」から任意のアイコンを選択してOKをクリック
  4. ファイルからアイコンを選択したい場合は「参照」をクリックして選択
  5. 完了

まとめ

ホームページへのアイコン設定は、ユーザーのホームページへの満足度を示す「ユーザビリティ」を高めるためにも欠かすことはできません。

識別しやすいシンプルなデザインにすることで、認知度向上やブランディング効果など、アイコンを設定するメリットを最大限に引き出せるようになります。

著作権や商標権には十分注意しながら、他社と差別化できるアイコンでユーザーの訪問や問い合わせを増やしましょう。

この記事を書いた人

SEOタイムズ 編集部

SEO対策実績「20,000社」を超えるGMOソリューションパートナー株式会社がインハウスSEOに取り組む企業様・個人に向けSEO情報を発信。

"Web初心者にもわかりやすく"をコンセプトにSEO対策情報をお届けします。

ランキング

  • 週間
  • 月間
【Illustratorのパターンの作り方】初心者でも簡単!パターンの基本を教えます!
1
【Illustratorのパターンの作り方】初心者でも簡単!パターンの基本を教えます!
2022/03/25 11:00
web
2
CSSでかっこいいアニメーションを作ろう!~animationの基本~
2022/07/08 18:34
web
#コーディング
3
【GA4】平均エンゲージメント時間とは?定義と滞在時間との違いを徹底解説
2023/02/27 12:00
SEOツール
#アナリティクス
4
AIツールとは?おすすめのAIツール27選をジャンル別にご紹介
2023/05/15 12:00
SEO対策
5
CSSの基本!横並びなどフレキシブルに対応する「Flexボックス」
2021/11/15 13:46
web
【Illustratorのパターンの作り方】初心者でも簡単!パターンの基本を教えます!
1
【Illustratorのパターンの作り方】初心者でも簡単!パターンの基本を教えます!
2022/03/25 11:00
web
2
CSSでかっこいいアニメーションを作ろう!~animationの基本~
2022/07/08 18:34
web
#コーディング
3
【GA4】平均エンゲージメント時間とは?定義と滞在時間との違いを徹底解説
2023/02/27 12:00
SEOツール
#アナリティクス
4
CSSの基本!横並びなどフレキシブルに対応する「Flexボックス」
2021/11/15 13:46
web
5
重ね言葉、知らないうちに使っていませんか?
2022/11/22 12:00
web
#ライティング

SEOタイムズとは?

SEOタイムズとは?

SEOタイムズは、Webマーケティングに取り組むWeb担当者向けのSEO対策特化型の情報メディアです。テーマは「SEO開拓者のバイブル」。

"初心者にもわかりやすく"をコンセプトに、SEO対策に関する有益な情報を発信しています。
20,000社以上の幅広い業種の集客支援実績から得られた経験とノウハウをベースに最新の情報をお届けします!

今すぐ出来るSEO対策情報も満載。あなたのWebマーケティング戦略を成功に導きます。