はじめに
ポートフォリオを作成しましたが、ブラウザのタブのアイコンがないのは寂しい!!と思い、
設定方法を調べたところ、favicon(ファビコン)を設定すれば実装できることが分かり、簡単に設定できたのでアウトプットとして記録します。
今回下の画像の赤枠のアイコンを変更していきます。
環境
- Ruby 2.6.3
- Rails 6.1.5.1
タブのアイコン用の画像を用意する
favicon用に設定するファイルをこちらで変換し作成してください。無料で半透過マルチアイコンを作成できます。
ファイルを指定し、作成ボタンを押した後、ファイルが作成されますので、ダウンロードボタンを押します。
ダウンロードしたfavicon.icoを、railsのimageフォルダに保存します。
自分は16×16用画像ファイルで変換し作成しましたが問題無く反映されました。
コードを追加する
app/views/layouts/application.html.erb
内に、以下のコードを追加します。
application.html.erb
<html>
<head>
<!--(省略) -->
+ <%= favicon_link_tag('favicon.ico') %> ← #追記
</head>
<body>
<!--(省略) -->
</body>
</html>
サーバーを再起動して確認
rails s
でサーバーを再起動すると、faviconが適用されていることが確認できます。
参考記事
最後に
記事の感想や意見、ご指摘等いただけると助かります。
最後までご覧いただき、ありがとうございました。