下準備
faviconに設定したい画像のサイズを300×300 pxに設定しておく
下記サイトでfaviconを作成していく
-
select your favicon imageを押下
→iOS、Android Chrome、macOS Safariなどに対応するfaviconを自動生成してくれる。
※背景色等も好みに合わせて変更可能
-
Favicon for Android Chrome設定画面にて、App nameにアプリケーション名を入力する
-
指定が終わったら画面下の
Generate your Favicons and HTML codeを押下すると、ダウンロード画面に遷移する
- Favicon package を押下し、作成されたfavicon達をダウンロード、解凍する
- 解凍したフォルダを任意の名称にリネーム（今回はfavicons）する
- app/assets/images配下にfaviconsディレクトリを配置する
- app/views/shared/_favicon.html.erbを作成し、
- ダウンロード画面の項番3 Insert the following code in the section of your pages
の内容をコピペし、以下のようにfavicon_link_tagを使用する形で書き直す。
<%= favicon_link_tag 'favicons/favicon.ico', rel: 'shortcut icon', type: 'image/x-icon' %>
<%= favicon_link_tag 'favicons/favicon-32x32.png', rel: 'icon', sizes: '32x32', type: 'image/png' %>
<%= favicon_link_tag 'favicons/favicon-16x16.png', rel: 'icon', sizes: '16x16', type: 'image/png' %>
<%= favicon_link_tag 'favicons/android-chrome-192x192.png', rel: 'icon', sizes: '192x192', type: 'image/png' %>
<%= favicon_link_tag 'favicons/android-chrome-256x256.png', rel: 'icon', sizes: '256x256', type: 'image/png' %>
<%= favicon_link_tag 'favicons/apple-touch-icon.png', rel: 'apple-touch-icon', sizes: '180x180', type: 'image/png' %>
<%= favicon_link_tag 'favicons/safari-pinned-tab.svg', rel: 'mask-icon', color: '#5bbad5' %>
<link rel="manifest" href="<%= asset_path('favicons/site.webmanifest') %>">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="<%= asset_path('favicons/mstile-150x150.png') %>">
<meta name="theme-color" content="#ffffff">
app/views/layouts/application.html.erbのheadタグ内に以下を記載する。
<%= render 'shared/favicon' %>
詰まりポイント
app/views/shared/_favicon.html.erbの中身をfavicon_link_tagに書き換えないと、「ローカル上ではfaviconが表示されるが、heroku上では表示されない」問題が発生、ド が付くほどハマった。
参考