【Rails】Webpacker管理下のアイコン画像をFaviconに設定する方法

2020年8月30日 14:37

はじめに

Rails6から標準導入されたWebpackerで画像を管理し、その中のアイコン画像をFavicon(タブやお気に入りに表示されるアイコン)に設定する方法を解説します。

Favicon設定方法

画像の用意

まずはFaviconに設定する画像を用意します。今回はフリーで使用できるアイコンを使うことにします。ちなみにPNG画像でもFaviconに設定できます。

Icons made by Freepik from www.flaticon.com

保存した画像をWebpacker管理下のディレクトリへ移動させます。

app
 |-javascript
    |-images
       |-favicon.png   ←ここに移動

これで画像の用意は完了です。

Webpackerで画像を管理

app/javascript/packs/application.jsに以下を追記します。

const images = require.context('../images', true)
const imagePath = (name) => images(name, true)

これでWebpackerで画像を管理できるようになりました。

アイコン画像をFaviconに設定

app/views/layouts/application.html.erbのヘッダーに以下を追記します。

<%= favicon_pack_tag 'favicon.png' %>

これで設定は完了です。ブラウザを更新して確認してください。

関連記事

【Rails】Railsアプリのデバッグ《マルチデバイス篇》
# はじめに 近年のWebアプリはレスポンシブ対応が当たり前になっています。最低でもPCとスマートフォンに対応したデザイン、ときにはその中間のタブレットに対応したデザインなんかも作成する必要があります。 Webアプリの開発はPCを使って行う [...]
2021年5月23日 13:02
【Rails】Railsアプリのデバッグ《Better Errors篇》
# はじめに Railsアプリの開発中になんらかのエラーが発生すると、デフォルトでは以下のような画面が表示されます(画像をクリックすると拡大します)。 <a class="gallery" data-group="gallery" href [...]
2021年5月22日 19:42
【Rails】Railsアプリのデバッグ《byebug篇》
# はじめに Ruby on Railsに限りませんが、アプリの開発中にはエラーは付き物です。なにかしらのエラーが発生したときに、エラーの原因を特定しエラー箇所を修正することをデバッグと言います。Railsではデバッグの手助けとなる機能があらかじ [...]
2021年5月22日 15:30
【Rails】レンダリング(renderメソッド)でアンカー指定を行う
# はじめに 通常、Railsでアンカー付きのリクエストを発生させるには`redirect_to`を使います。 ```rb redirect_to root_path(anchor: 'target') ``` では、`rende [...]
2021年5月20日 10:47
【Rails】Bundler 2.2.x以降は開発者が適切なプラットフォームを追加する必要がある
# 事象 昔作ったRailsアプリを久しぶりに修正しデプロイしようとしたところ、以下のエラーが出力されました。 ```bash # 実行コマンド Running $HOME/.rbenv/bin/rbenv exec bundle ch [...]
2021年5月18日 16:18