2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【Rails】ブラウザのタブにアイコン(favicon)を設定する

Last updated at Posted at 2022-06-02

はじめに

ポートフォリオを作成しましたが、ブラウザのタブのアイコンがないのは寂しい!!と思い、
設定方法を調べたところ、favicon(ファビコン)を設定すれば実装できることが分かり、簡単に設定できたのでアウトプットとして記録します。
今回下の画像の赤枠のアイコンを変更していきます。
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が適用されていることが確認できます。

参考記事

最後に

記事の感想や意見、ご指摘等いただけると助かります。
最後までご覧いただき、ありがとうございました。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?