ホームページにファビコン、アップルタッチアイコンを設置しよう

ホームページへの「ファビコン（favicon）」や「アップルタッチアイコン（apple-touch-icon）」の設定は非常に大切です。

ファビコンとは、ホームページのタブに表示される小さなアイコン画像のこと。アップルタッチアイコンとは、ホームページをスマホのホーム画面に追加した時に表示される画像のことです。

ファビコンもアップルタッチアイコンも、自社ホームページのブランディングに役立ちます。これらの有無で、ホームページに対する印象が大きく変わることもあるでしょう。

しかし、ファビコンやアップルタッチアイコンについて詳しい人は少ないでしょう。どのような画像を作成すればよいのか、どのように設定すればよいのか、わからない方も多いと思います。

そこで今回は、初心者向けに「ファビコン」と「アップルタッチアイコン」について分かりやすく解説していきます。ファビコンやアップルタッチアイコンの作成ツール、チェックツールも紹介しているので、ぜひ参考にしてみてください。

ファビコン・アップルタッチアイコンとは

まずは「ファビコン」「アップルタッチアイコン」とは何か、簡単に解説します。

上述の通り、ファビコンとは、ホームページのタブに表示される、小さなアイコン画像のこと。パソコンのブラウザでホームページを開くと、画面上部のタブにページタイトルと共にファビコンが表示されます。

また、ホームページをブックマークしたり、お気に入りに追加した時に表示されるアイコンもファビコンです。

次に、アップルタッチアイコンとは、ホームページをスマホのホーム画面に追加したときに表示されるアイコン画像のこと。アップルタッチアイコンを設定しなかった場合、ホームページの画面キャプチャを縮小したものがアイコンとして表示されてしまいます。しかし、アップルタッチアイコンを設定しておけば、アプリと同じようにアイコン用の画像がしっかりと表示されます。

ファビコン・アップルタッチアイコンを設置するメリット

ファビコンもアップルタッチアイコンも、ホームページ運営において絶対に必要なものではありません。しかし、設定しておくことで、大きなメリットがあります。

具体的には、以下のような点がメリットとしてあげられます。

• ユーザビリティが向上する
• ブランディング効果がある

ユーザビリティが向上する

パソコンのブラウザ上でいくつものホームページを閲覧していると、タブの数が増え、見たいページがどこにあるか分からなくなります。しかし、ファビコンを設置しておくことで、他のホームページと区別がしやすくなり、タブ内でのホームページの見つけやすさが向上します。

ブックマークやお気に入りでも同様です。ファビコンがあれば、ユーザーは瞬時にそのホームページを識別できるようになります。

また、アップルタッチアイコンを設置することで、スマホのホーム画面において、ホームページの視認性が格段にアップします。

ファビコンやアップルタッチアイコンは、「ユーザーのための目印・シンボル」と言えるでしょう。ユーザビリティを向上させるために、ぜひファビコンやアップルタッチアイコンを設定してみてください。

ブランディング効果がある

また、ファビコンやアップルタッチアイコンには、ブランディング効果も期待できます。

自社のアイコンが綺麗に、また特色をもって表示されていれば、そうでない場合と比べて、当然ユーザーの印象は良くなります。さらに、ユーザーが何度も同じアイコンを目にすれば、「そのアイコン＝自社」というイメージを持ってもらえるでしょう。

ファビコンやアップルタッチアイコンを設置するだけで、ユーザーに対して視覚的にアプローチできるわけです。自社や自社商品を覚えてもらうためにも、印象的なアイコンを作成し、設定しておきましょう。

ファビコン・アップルタッチアイコン用の画像について

続いて、「ファビコン・アップルタッチアイコン用の画像」について説明します。

ファビコンやアップルタッチアイコンに使用する画像は、あらゆるデバイス・ブラウザに合わせて、様々なサイズを用意しなければなりません。しかし、全てのデバイス・ブラウザに合わせて画像を用意するのは、なかなか面倒です。

そこで、まずは1枚だけ大きな画像を用意します。その上で、自動生成ツールを活用し、他のサイズの画像を作っていきます。

また、ファビコンの拡張子は、「.ico形式」にするのがおすすめです。あまり馴染みのない拡張子かもしれませんが、「.ico形式」の画像ファイルはデバイスや環境に応じて最適なサイズで表示されるので、非常に便利です。

ファビコン・アップルタッチアイコンの設定方法

次に、「ファビコン・アップルタッチアイコンの設定方法」について、簡単に解説します。

ファビコンとアップルタッチアイコンに関するコードは、HTMLファイルのタグ内に記述します。最低限必要なサンプルコードは、以下の通りです。

なお、画像ファイルのパスは、ご自身の環境に合わせて変更してください。

ファビコン・アップルタッチアイコンを作成するWebツール

ファビコン・アップルタッチアイコンを作成するのに便利なWebツールをいくつか紹介します。

• 様々なファビコンを一括生成。favicon generator
• 半透過マルチアイコンfavicon.icoを作ろう!

「様々なファビコンを一括生成。favicon generator」では、画像を1枚指定するだけで、誰でも簡単に、ファビコンやアップルタッチアイコンを作成することができます。

指定可能な画像タイプは、「PNG」「JPG」「GIF」の3種類です。様々なサイズのアイコンを一括で生成できるので、非常に便利です。

https://ao-system.net/favicongenerator/

「半透過マルチアイコンfavicon.icoを作ろう!」では、半透明のファビコンやアップルタッチアイコンを作成することができます。

指定可能な画像タイプは「PNG」のみ、自動リサイズ機能は無いので注意しましょう。

https://ao-system.net/alphaicon/

ファビコン・アップルタッチアイコンのチェックツール

最後に、ファビコンやアップルタッチアイコンのチェックツールを紹介します。

• Favicon Generator. For real

「Favicon Generator. For real.」では、ファビコンやアップルタッチアイコンの設定に問題がないかどうか、チェックすることができます。

使い方は非常に簡単で、「チェックしたいページのURLを入力するだけ」です。ファビコンやアップルタッチアイコンを設置した後は当ツールを使い、エラーが出ていないか確認してください。

https://realfavicongenerator.net/

まとめ

「ファビコン」と「アップルタッチアイコン」について、簡単に解説しました。ファビコンやアップルタッチアイコンは、ホームページのユーザビリティ向上やブランディングに大きく貢献してくれます。ぜひ当記事を参考にしながら、適切なファビコン・アップルタッチアイコンを設定してみてください。