大阪/梅田のホームページ制作会社 ウェブラボ関西オフィス

スタッフブログ

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

2020/11/25 ホームページ制作

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!-- ファビコン -->
<link rel="icon" href="/favicon.ico">
<!-- アップルタッチアイコン -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

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

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

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

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

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

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

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

「半透過マルチアイコンfavicon.icoを作ろう!」

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

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

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

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

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

  • Favicon Generator. For real
「Favicon Generator. For real.」

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

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

https://realfavicongenerator.net/

まとめ

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

ホームページ制作実績

大阪/梅田を拠点に、京都・奈良・滋賀・兵庫など関西圏はもちろん、 日本全国、さまざまな業種のお客様のホームページを制作しています。

制作実績一覧はこちらから

私たちについて

私たちはお客様の会社のホームページ担当として、 以下のポリシーをもってホームページ制作を行います。

少数精鋭。常に最高のチーム体制で制作します

少数精鋭。
常に最高のチーム体制で制作します

100人のお客様に100通りのプランをご提案します

100人のお客様に
100通りのプランをご提案します

常に正直に、誠実に。きちんとNOとお伝えします

常に正直に、誠実に。
きちんとNOとお伝えします

お客様の「お客様」の視点を大事にします

お客様の「お客様」の
視点を大事にします

格好いい、キレイなだけのデザインはしません

格好いい、キレイなだけの
デザインはしません

「+1」のクリエイティブにとことんこだわります

「+1」のクリエイティブに
とことんこだわります

詳しくはこちらから

スタッフブログ TOP