faviconを設定したい。PCのブラウザ上では、サイト名の横に表示されるあの画像ですね。faviconがあるかないかで、サイトの信頼感や覚えてもらいやすさが変わってきますので、ぜひ設定したいところ。
特にスマホの設定（ホーム画面にリンクを貼ったときなどに表示される画像になる）で「本当にこれでいいのだろうか」と思いながらの実装した背景もあり、まとめて残しておこうと思いました。
なお、本記事では、Railsでhamlを使って書いた例をそのまま載せてあります。
PC用のfavicon
まずはPCのfaviconの設定方法です。
(1) ico形式の画像を用意
設定したい画像をico形式で用意しました。持っている画像が他の形式の場合は「ico 変換」などで検索するとオンライン上に簡単に変換できるサービスが見つかります。
(2) assets/images 以下に置く
ここでは、画像は assets/images の直下に置きました。お好みでどうぞ。
(3) application.html.haml のhead部分で呼び出す
application.html.haml のheadのなかにfavicon_link_tagを使って次のように書きました。
%head
= favicon_link_tag 'xxxx.ico'
以上でPC用のfaviconは無事に反映される、はずです。
Rails sで立ち上げ直すと、ローカルでも確認することができます。
スマホ用のfavicon
次に、スマホのfaviconの設定方法です。
(1) png形式の画像を用意する
iOS用とAndroid用で2つのpng形式の画像を用意しました。
＊ iOS用画像の注意点
- 背景が透過されているものを使用すると黒背景になるようです。そのため、背景色を含む画像を設定するのが無難でしょうか。
- ホームに追加された時のアイコンになりますが、下のように角が丸く削れます。その点も計算に入れると良い感じになりそうです。
＊ Android用画像の注意点
- 透過が反映される or されないなど、諸々機種によって異なるそうです。そうなのか。
［参考］favicon大解剖 〜必要サイズから検証時の注意点まで〜
(2) assets/images 以下に置く
こちらも、画像は assets/images の直下に置きました。お好みでどうぞ。
(3) application.html.haml のhead部分で呼び出す
iOS用とAndroid用で次のように書きました。
%head
= favicon_link_tag 'xxxx180x180.png', rel: 'apple-touch-icon', sizes: '180x180', type: 'image/png'
= favicon_link_tag 'xxxx192x192.png', rel: 'android-touch-icon', sizes: '192x192', type: 'image/png'
以上でスマホでも画像が表示されるようになるはず、です。
なお、事前に検証する方法がわからなかったため、わたしの場合はデプロイしてはじめて表示されていることを確認したという…。無事に設定できてよかったです。
参考
以上の記事とGitHubに公開されているコードを参考に解決できました。ありがとうございました。