ファビコンとは、パソコンのブラウザで自分のWebサイトを表示した時にURLの左側表示される小さなアイコンと、お気に入りに追加した時に表示されるアイコンのことです。アップルタッチアイコンとは、スマートフォンでホームに登録した時や検索結果に表示されるアイコンのことです。
それぞれのアイコンを登録することで、Webサイトのイメージを伝えやすくすることができます。webサイトを運営しているなら必ず設定しておく必要があります。設置方法も紹介します!
目次
ファビコンとアップルタッチアイコン作成に役立つWebサービス3選
とはいえ今回は1つのサービスしか試していませんのでご了承ください。
Favicon Generator. For real.
ファビコンとアップルタッチアイコンがどのように表示されているかチェックできるWebサービス
公式サイト:Favicon Generator. For real.
ICO converter
ファビコンを作成するWebサービス
公式サイト:ICOconverter
iconifier.net
ファビコンとアップルタッチアイコンを同時生成してくれるWebサービス
公式サイト:iconifier
Favicon Generator. For real.を使ってみよう
アイコンに設定したい画像をアップロードします。
このようにiOSやAndroidなどでの表示を確認する事ができます。この機能がとても便利です。自分であちこち見て回らなくてもいいですから。
このように、HTML5のタグを出力してくれるので、設定も簡単にできます。作成したアイコン一式をダウンロードできます。とても便利ですね。画像では確認できませんが、右側にファイル一式をダウンロードするボタンがあるので、そこからダウンロードして下さい。
ホームページへ設定する方法
はじめに紹介した「Favicon Generator. For real.」を使って出力したタグで説明します。
まずはお手持ちのエディターでHTMLファイルを開き<head></head>内に貼り付けます。
アイコンのパスはあなたの環境に合わせて書き換えてください。
ファイルの中身
ダウンロードしたファイルの中身を見てみましょう。上記のコード以外のファイルも入っています。
favicon.icoの設定
faviconの設定で気をつけることはディレクトリのルートに配置することです。URLで説明するとyoutukuru.com/favicon.icoとなる場所にアイコンをアップロードするだけで表示してくれるブラウザが大半です。link relで指定しなくても大丈夫だと思います。
特定のフォルダから設定するにはこのようにします。*WordPressの場合はthemeフォルダ内にfavicon.icoを置いてもルートディレクトリにはなりませんので、下のリンク設定をしたほうが管理しやすいかもしれません。
manifest.jsonは、Chrome39で採用された形式で、アプリケーション設定のためにあるようですが、詳しくは下記サイトを参照してください。とりあえず設定しておこうと思います。
参照サイト:Google IO 2015のWebページから学ぶ最新のタグ
safari-pinned-tab.svgは、AppleのブラウザSafari専用に必要とのことです。
参照サイトAdding a pinned tab icon for Safari
meta theme-colorは、Google Chrome for Androidなど特定の機種のヘッダー部分のみ変更する事ができるようです。標準化されていないmetaタグだそうですが、とりあえず設定しておきます。
参照サイト:theme-color を使って Chrome for Android や Google アプリで独自の色を設定する (2016年6月更新)
browserconfig.xmlはWindowsなどのOSで表示する場合に必要になります。このファイルはルートディレクトリに入れておくだけでいいです。
mstile-150×150.pngは、Windows8用です。
android-chromeは、Android chrome用に設定するようです。今回は出力されたタグに記載がなかったため省略しました。おそらくルートディレクトリに置いておけばいいんだと思います。申し訳ないですが、こちらは検証していません。