ファビコンとアップルタッチアイコン作成に使えるWebサービスまとめ

ファビコンとは、パソコンのブラウザで自分のWebサイトを表示した時にURLの左側表示される小さなアイコンと、お気に入りに追加した時に表示されるアイコンのことです。アップルタッチアイコンとは、スマートフォンでホームに登録した時や検索結果に表示されるアイコンのことです。

それぞれのアイコンを登録することで、Webサイトのイメージを伝えやすくすることができます。webサイトを運営しているなら必ず設定しておく必要があります。設置方法も紹介します！

ファビコンとアップルタッチアイコン作成に役立つWebサービス3選

とはいえ今回は１つのサービスしか試していませんのでご了承ください。

ファビコンとアップルタッチアイコンがどのように表示されているかチェックできるWebサービス

ファビコンを作成するWebサービス

公式サイト：ICOconverter

ファビコンとアップルタッチアイコンを同時生成してくれるWebサービス

公式サイト：iconifier

アイコンに設定したい画像をアップロードします。

このようにiOSやAndroidなどでの表示を確認する事ができます。この機能がとても便利です。自分であちこち見て回らなくてもいいですから。

このように、HTML5のタグを出力してくれるので、設定も簡単にできます。作成したアイコン一式をダウンロードできます。とても便利ですね。画像では確認できませんが、右側にファイル一式をダウンロードするボタンがあるので、そこからダウンロードして下さい。

はじめに紹介した「Favicon Generator. For real.」を使って出力したタグで説明します。

まずはお手持ちのエディターでHTMLファイルを開き<head></head>内に貼り付けます。

アイコンのパスはあなたの環境に合わせて書き換えてください。

ダウンロードしたファイルの中身を見てみましょう。上記のコード以外のファイルも入っています。

faviconの設定で気をつけることはディレクトリのルートに配置することです。URLで説明するとyoutukuru.com/favicon.icoとなる場所にアイコンをアップロードするだけで表示してくれるブラウザが大半です。link relで指定しなくても大丈夫だと思います。

特定のフォルダから設定するにはこのようにします。＊WordPressの場合はthemeフォルダ内にfavicon.icoを置いてもルートディレクトリにはなりませんので、下のリンク設定をしたほうが管理しやすいかもしれません。

manifest.jsonは、Chrome39で採用された形式で、アプリケーション設定のためにあるようですが、詳しくは下記サイトを参照してください。とりあえず設定しておこうと思います。

safari-pinned-tab.svgは、AppleのブラウザSafari専用に必要とのことです。

meta theme-colorは、Google Chrome for Androidなど特定の機種のヘッダー部分のみ変更する事ができるようです。標準化されていないmetaタグだそうですが、とりあえず設定しておきます。

browserconfig.xmlはWindowsなどのOSで表示する場合に必要になります。このファイルはルートディレクトリに入れておくだけでいいです。

mstile-150×150.pngは、Windows8用です。

android-chromeは、Android chrome用に設定するようです。今回は出力されたタグに記載がなかったため省略しました。おそらくルートディレクトリに置いておけばいいんだと思います。申し訳ないですが、こちらは検証していません。