2019年5月から、Googleのスマートフォン版の検索結果で、ファビコンが表示されるようになりました。
この記事は2021年にアップデートしています
ファビコンが入っていないホームページは、地球のようなマークが統一して表示されています。
ただ、ずっとそのままにしておくのは、見た目的には、微妙ですよね。ロゴなどをいれておくことで、アイキャッチをしておきたいですよね。
また、そもそも、このファビコンを、検索結果に表示をしてきたGoogleの意図を考えても、早い段階で、設置をしておきたいですよね。
そこで、今回は、2021年最新版のファビコンの設置方法と、アップルタッチアイコンの設定方法をご紹介します。
そもそも、ファビコン(favicon)とは
ファビコン(favicon)は、簡単に言うと、ホームページのロゴマークのようなものです。ブックマークなどをすると、サイトタイトルの横に出てくるマークです。
ブラウザのタブにも表示されますね。このファビコンは、Webサイトごとに設定可能です。言うなれば、アイコン画像で、正直、なくても、webサイトが使えないものではないので、後回しにされやすいものでした。
ただ、Googleがスマホの検索結果で表示し始めたところを見ると、ファビコンのユーザビリティとしての価値はあがったと考えられます。
たしかに、ファビコンがあると、ユーザーは、タブ表示やブックマーク時にWebサイトを探しやすくなります。
そう考えると、今後はSEO対策の重要な要素になるかも！しれません。モバイルファーストインデックスの1つの事柄かもしれません。
ちなみにファビコン(favicon)は、OSやブラウザのバージョンアップによって書き方が異なるケースもありました。また、画像のサイズも、どのくらいがいいのか、不明確でした。そして、ファビコンをhtmlなどのソース内に記述する方法、正しい書き方も常に変化してしまっています。ややこしいですね。
ちなみに、ファビコンの必要なサイズですが、2021年2月時点では、
- 16px × 16px 各ブラウザタブ
- 32px × 32px Retina 各ブラウザタブ
- 180px × 180px iOS：Safariのホーム画面 Android Chromeのホーム画面
- 192px × 192px Android Chromeのブラウザタブ、ホーム画面
上記になります。
アップルタッチアイコン：apple-touch-icon(スマホ用)
アップルタッチアイコンは、iPhoneやiPadのsafariや、AndroidでWebサイトをホーム画面に追加した時に表示される画像です。apple-touch-icon(アップルタッチアイコン)といいます。ファビコンがPC用なら、スマホ用は、今まで、アップルタッチアイコンだったかんじです。
ただ、ファビコンがスマホで使われ始めたので、もしかしたら、不要になるかもです。とはいえ、ホーム画面で使用するアイコンとしては、まだ活用できますので、設定はしておきましょう。
というわけで、この２つのアイコンの設定が必要だと思っています。実際は、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のアイコン画像を作成したら、ファビコンと同じように、ルートディレクトリにファイルを設置してみてください。
また、ファビコンの色合いについてですが、鮮やかな色合いをおすすめします。
その方が、スマホなどで閲覧したときに、埋没しにくいです。
マルチアイコンとは
マルチアイコンとは、縦横16px と 縦横32px の画像をico形式で作ったものです。
複数サイズのファビコンを格納するので、マルチアイコンと呼ばれています。
ファビコン（favicon） 自動変換サイト
ファビコン（favicon）作りの強い味方！！
ファビコンへ、自動変換してくれるサイトをご紹介
Real Favicon Generator
http://realfavicongenerator.net/
操作は簡単！
- ファイルをアップロード
- iPhone＆iPad用のファビコンの設定
- 「add a solid・・・」をクリック
- Android用の設定も簡単にできます！
zip形式のファイルがDLできます
- favicon.ico
- apple-touch-icon.png
- android-chrome-256×256.png
と３つのファイルが出てきます。
あとは、これをFTPでアップロードするだけ！！
Safari用のアイコン画像は作らなくてもOKです
ほかのファビコン関連のサイトを見ていると、Safari用のアイコンを作れ！作ったほうがいいという記述もあります。
ですが、2019年5月現在では不要です。
というのも、iOS 12、macOS Mojaveによって、Safariでもファビコン画像がサポートされるようになりました。それゆえ、ファビコンさえ正しく設定しておけばSafariでも正しく表示されるようになりました。
まとめ：ファビコン設定、アップルタッチアイコンの設定方法
ファビコン設定について、いま１度まとめますね！！
- ファビコンは、スマホのGoogle検索で表示されるようになった
- ファビコンはユーザビリティを改善する
- ファビコンの登録方法は、ルートディレクトリにfavicon.icoを設置するだけ
- アップルタッチアイコンでも同じでルートディレクトリに設置
- アップルタッチアイコンは180×180ピクセルのpng形式で作成
こんなかんじですね。
ファビコンを作れる、そのほかのwebツール
ファビコン favicon.icoを作ろう!
https://ao-system.net/favicon/
16×16と32×32と48×48ピクセルのマルチアイコンが簡単に作れるwebサービスです。もちろん、無料で使えます。ファビコンを作れます。
Faviconジェネレーター
https://favicon-generator.mintsu-dev.com/
Faviconジェネレーターは、webブラウザで、JPEG、PNG、gifなどの各種画像ファイルから、favicon用の画像(favicon.ico)を作ってくれる変換サービス。
もちろん、無料です。
マルチアイコン対応で、透過画像にも対応しています！！
WebsitePlanet.com ファビコン作成ツール
https://www.websiteplanet.com/ja/webtools/favicon-generator/
こちらも、画像ファイルからファビコンを作ってくれるサービスです。
すべてのサイズを！という設定ボタンを使えば、さまざまなサイズを作ってくれます。
個人的には、このサイトにあるGzip圧縮確認ツールも気になります！
https://www.websiteplanet.com/ja/webtools/gzip-compression/
favicon.cc
Chromeなどのwebブラウザで簡単にファビコン作成できます。
私がいいな！と感じたのは、画面右にあるカラーチャートから色を選択してファビコンを作れること。
ファビコンは、色合いがきれいな、ビビットカラーとかの方が映えるのでオススメです。
でも、色合いを考えながら作るのは大変なのですが、
このfavicon.ccなら、そういうフローで、ファビコンが作れます。
基本的には、画像中央のフレーム内でファビコンを作成するかんじです。
