できること、利用例、使い方、価値などをまとめてみました。最新webニュースVRで購入意欲が高まる人は42%。ノウハウ最新webニュース2019年5月から、Googleのスマートフォン版の検索結果で、ファビコンが表示されるようになりました。ファビコンが入っていないホームページは、地球のようなマークが統一して表示されています。そのままにしておくのは、見た目的には、微妙ですよね。ロゴなどをいれておくことで、アイキャッチをしておきたいですよね。そもそも、このファビコンを、検索結果に表示をしてきたGoogleの意図を考えても、早い段階で、設置をしておきたいですよね。そこで、今回は、2019年最新版のファビコンの設置方法と、アップルタッチアイコンの設定方法をご紹介します。favicon.ccそもそも、ファビコン(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>タグの間に入れるかんじです。href=”/apple-touch-icon.png”>favicon.icoという画像は、ルートディレクトリにおいてあれば、それを元に、検索エンジンは拾ってくれます。実は、上記のように書かなくてもいいことはいいのですが、念のためです。アップルタッチアイコンの画像サイズは?先にソースコードを書いてしまったので、なんですが、画像サイズは、180×180ピクセルでよいです。ほかのサイズでもいいのですが、大きさや使いやすさを考えると、このサイズで十分です。実際、ほかのサイトだと、192×192ピクセルなども紹介していると思いますが。ファビコン(favicon)の作り方ファビコンの拡張子は.ico形式にしてください。ico形式のファイルを作るには、「様々なファビコンを一括生成。generator」というサービスを使うと、すぐにできます。pngやjpgなどの画像ファイルなどをアップロードすると、.ico形式のファイルに変換してくれます。様々なファビコンを一括生成。generatorhttps://ao-system.net/favicongenerator/アップルタッチアイコンも、このツールで作れます。本当に便利!作成後、apple-touch-icon.pngという名称で180×180のアイコン画像を作成したら、ファビコンと同じように、ルートディレクトリにファイルを設置してみてください。ファビコンの色合いについてですが、鮮やかな色合いをおすすめします。その方が、スマホなどで閲覧したときに、埋没しにくいです。Safari用のアイコン画像は作らなくてもOKですほかのファビコン関連のサイトを見ていると、Safari用のアイコンを作れ!作ったほうがいいという記述もあります。2019年5月現在では不要です。Mojaveによって、Safariでもファビコン画像がサポートされるようになりました。それゆえ、ファビコンさえ正しく設定しておけばSafariでも正しく表示されるようになりました。まとめ:ファビコン設定、アップルタッチアイコンの設定方法ファビコン設定について、いま1度まとめますね!!ファビコンは、スマホのGoogle検索で表示されるようになったファビコンはユーザビリティを改善するファビコンの登録方法は、ルートディレクトリにfavicon.icoを設置するだけアップルタッチアイコンでも同じでルートディレクトリに設置アップルタッチアイコンは180×180ピクセルのpng形式で作成こんなかんじですね。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)を作ってくれる変換サービス。ファビコン作成ツールhttps://www.websiteplanet.com/ja/webtools/favicon-generator/こちらも、画像ファイルからファビコンを作ってくれるサービスです。すべてのサイズを!という設定ボタンを使えば、さまざまなサイズを作ってくれます。個人的には、このサイトにあるGzip圧縮確認ツールも気になります!https://www.websiteplanet.com/ja/webtools/gzip-compression/favicon.cchttp://www.favicon.cc/Chromeなどのwebブラウザで簡単にファビコン作成できます。私がいいな!と感じたのは、画面右にあるカラーチャートから色を選択してファビコンを作れること。ファビコンは、色合いがきれいな、ビビットカラーとかの方が映えるのでオススメです。色合いを考えながら作るのは大変なのですが、このfavicon.ccなら、そういうフローで、ファビコンが作れます。基本的には、画像中央のフレーム内でファビコンを作成するかんじです。Googleにブロックされる前にwebサイトへすべき対応と方法Googleセキュリティ強化。リニューアルNext「+メッセージ」(プラスメッセージ)サービス開始。LINEに勝てるか?この記事を書いた人sanzuisanzuiは、このサイトの著者。web業界で20年以上のwebマーケッター。上場企業などのコンサルティングやwebサイト制作、プロモーション、システム開発などを担当。中小企業のwebなどでのSEO対策でも実績を出し、新規顧客獲得にも成功。最大、年間で数千万円以上の売上を獲得。コメントをキャンセルメールアドレスが公開されることはありません。できること、利用例、使い方、価値などをまとめてみました。最新webニュースVRで購入意欲が高まる人は42%。netNews|web広告、新サービスの解説.。