2019年最新:ファビコン、アップルタッチアイコンの設定方法

2019年5月から、Googleのスマートフォン版の検索結果で、ファビコンが表示されるようになりました。

ファビコンが入っていないホームページは、地球のようなマークが統一して表示されています。

ただ、ずっとそのままにしておくのは、見た目的には、微妙ですよね。ロゴなどをいれておくことで、アイキャッチをしておきたいですよね。

また、そもそも、このファビコンを、検索結果に表示をしてきたGoogleの意図を考えても、早い段階で、設置をしておきたいですよね。

そこで、今回は、2019年最新版のファビコンの設置方法と、アップルタッチアイコンの設定方法をご紹介します。

そもそも、ファビコン(favicon)とは

ファビコン(favicon)は、簡単に言うと、ホームページのロゴマークのようなものです。ブックマークなどをすると、サイトタイトルの横に出てくるマークです。

ブラウザのタブにも表示されますね。このファビコンは、Webサイトごとに設定可能です。言うなれば、アイコン画像で、正直、なくても、webサイトが使えないものではないので、後回しにされやすいものでした。

ただ、Googleがスマホの検索結果で表示し始めたところを見ると、ファビコンのユーザビリティとしての価値はあがったと考えられます。

たしかに、ファビコンがあると、ユーザーは、タブ表示やブックマーク時にWebサイトを探しやすくなります。

そう考えると、今後はSEO対策の重要な要素になるかも!しれません。モバイルファーストインデックスの1つの事柄かもしれません。

ちなみにファビコン(favicon)は、OSやブラウザのバージョンアップによって書き方が異なるケースもありました。また、画像のサイズも、どのくらいがいいのか、不明確でした。そして、ファビコンをhtmlなどのソース内に記述する方法、正しい書き方も常に変化してしまっています。ややこしいですね。

アップルタッチアイコン:apple-touch-icon(スマホ用)

アップルタッチアイコンは、iPhoneやiPadのsafariや、AndroidでWebサイトをホーム画面に追加した時に表示される画像です。apple-touch-icon(アップルタッチアイコン)といいます。ファビコンがPC用なら、スマホ用は、今まで、アップルタッチアイコンだったかんじです。

ただ、ファビコンがスマホで使われ始めたので、もしかしたら、不要になるかもです。とはいえ、ホーム画面で使用するアイコンとしては、まだ活用できますので、設定はしておきましょう。

というわけで、この2つのアイコンの設定が必要だと思っています。実際は、windows用のアイコンもありますが、使用頻度は圧倒的に低いので、割愛します!

ファビコンとアップルタッチアイコンの記述ソース、記述方法

ファビコンやアップルタッチアイコンの設定方法です。

ページごとに、以下のタグを埋める必要はないです。念のため、TOPページには入れておきましょう。Googleのインデックス対象にもなります。

以下のコードを、<head>タグと</head>タグの間に入れるかんじです。

<!– ファビコン –>
<link rel="icon" href="/favicon.ico">

<!– スマホ用アイコン –>
<link rel="apple-touch-icon" sizes="180×180″ href="/apple-touch-icon.png">

favicon.icoという画像は、ルートディレクトリにおいてあれば、それを元に、検索エンジンは拾ってくれます。ですので、実は、上記のように書かなくてもいいことはいいのですが、念のためです。

アップルタッチアイコンの画像サイズは?

先にソースコードを書いてしまったので、なんですが、画像サイズは、180×180ピクセルでよいです。

ほかのサイズでもいいのですが、大きさや使いやすさを考えると、このサイズで十分です。実際、ほかのサイトだと、192×192ピクセルなども紹介していると思いますが。

ファビコン(favicon)の作り方

ファビコンの拡張子は.ico形式にしてください。

ico形式のファイルを作るには、「様々なファビコンを一括生成。favicon generator」というサービスを使うと、すぐにできます。

pngやjpgなどの画像ファイルなどをアップロードすると、.ico形式のファイルに変換してくれます。

様々なファビコンを一括生成。favicon generator
https://ao-system.net/favicongenerator/

アップルタッチアイコンも、このツールで作れます。本当に便利!

作成後、apple-touch-icon.pngという名称で180×180のアイコン画像を作成したら、ファビコンと同じように、ルートディレクトリにファイルを設置してみてください。

Safari用のアイコン画像は作らなくてもOKです

ほかのファビコン関連のサイトを見ていると、Safari用のアイコンを作れ!作ったほうがいいという記述もあります。

ですが、2019年5月現在では不要です。

というのも、iOS 12、macOS Mojaveによって、Safariでもファビコン画像がサポートされるようになりました。それゆえ、ファビコンさえ正しく設定しておけばSafariでも正しく表示されるようになりました。

まとめ:ファビコン設定、アップルタッチアイコンの設定方法

ファビコン設定について、いま1度まとめますね!!

  • ファビコンは、スマホのGoogle検索で表示されるようになった
  • ファビコンはユーザビリティを改善する
  • ファビコンの登録方法は、ルートディレクトリにfavicon.icoを設置するだけ
  • アップルタッチアイコンでも同じでルートディレクトリに設置
  • アップルタッチアイコンは180×180ピクセルのpng形式で作成

こんなかんじですね。

【webマーケティング】2019年4月のSEO変動は、共起語で対策