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

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

この記事は2021年にアップデートしています

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

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

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

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

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

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

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

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

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

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

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

ちなみに、ファビコンの必要なサイズですが、2021年2月時点では、

  1. 16px × 16px 各ブラウザタブ
  2. 32px × 32px Retina 各ブラウザタブ
  3. 180px × 180px iOS:Safariのホーム画面 Android Chromeのホーム画面
  4. 192px × 192px Android Chromeのブラウザタブ、ホーム画面

上記になります。

アップルタッチアイコン: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のアイコン画像を作成したら、ファビコンと同じように、ルートディレクトリにファイルを設置してみてください。

また、ファビコンの色合いについてですが、鮮やかな色合いをおすすめします。

その方が、スマホなどで閲覧したときに、埋没しにくいです。

マルチアイコンとは

マルチアイコンとは、縦横16px と 縦横32px の画像をico形式で作ったものです。

複数サイズのファビコンを格納するので、マルチアイコンと呼ばれています。

ファビコン(favicon) 自動変換サイト

ファビコン(favicon)作りの強い味方!!

ファビコンへ、自動変換してくれるサイトをご紹介

Real Favicon Generator
http://realfavicongenerator.net/

操作は簡単!

  1. ファイルをアップロード
  2. iPhone&iPad用のファビコンの設定
  3. 「add a solid・・・」をクリック
  4. Android用の設定も簡単にできます!

zip形式のファイルがDLできます

  1. favicon.ico
  2. apple-touch-icon.png
  3. android-chrome-256×256.png

と3つのファイルが出てきます。

あとは、これをFTPでアップロードするだけ!!

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

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

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

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

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

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

  • ファビコンは、スマホの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

http://www.favicon.cc/

Chromeなどのwebブラウザで簡単にファビコン作成できます。

私がいいな!と感じたのは、画面右にあるカラーチャートから色を選択してファビコンを作れること。

ファビコンは、色合いがきれいな、ビビットカラーとかの方が映えるのでオススメです。

でも、色合いを考えながら作るのは大変なのですが、

このfavicon.ccなら、そういうフローで、ファビコンが作れます。

基本的には、画像中央のフレーム内でファビコンを作成するかんじです。

Googleにブロックされる前にwebサイトへすべき対応と方法

▼高機能なのに、無料のCRMについて記事をまとめてみました