--- title: 【Rails】ファビコンの設定 tags: Rails Rails6 favicon author: oak1331 slide: false --- # 目的 Railsで作成したアプリにファビコンを設定する。 # 開発環境 macOS: *Big Sur* Rubyバージョン: *2.6.5* Railsバージョン: *6.0.0* # 前提 - `アプリ`が作成されている。 [【Rails】簡単な投稿アプリの作成](https://qiita.com/oak1331/items/18a4f3a3386aab0fa354) # 手順 1. [はじめに](#はじめに) 1. [画像の作成](#画像の作成) 1. [画像の編集](#画像の編集) 1. [画像のファビコン化](#画像のファビコン化) 1. [ファビコンの設定](#ファビコンの設定) 1. [確認](#確認) # はじめに 今回はファビコンの設置を行っていきます。 ファビコン作成から設定まで簡単な方法で行っていきます。 # 画像の作成 まずは画像を作成していきます。 [canva](https://www.canva.com/) こちらのサイトから`ロゴ作成`を選択し、ファビコンとなるデザインを作成していきます。 会員登録は必要ですが、無料で使えます。 ![canva.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1337030/75a3c28e-efff-60bb-9a3d-a3b0db2cd5ab.png) 作成できたら画像をダウンロードして次へ進みます。 # 画像の編集 次に画像の編集を行います。(画像の編集が必要ない方は飛ばして頂いて構いません。あくまで見た目の修正です。) 今のままですと、ピン角になっているため、角Rを付けます。 [BANNERKOUBOU](https://www.bannerkoubou.com/) こちらのサイトから画像を加工します! 加工が完了したらダウンロードしてください。 # 画像のファビコン化 先程ダウンロードした画像をファビコン化していきます。 [Favicon ジェネレーター](https://favicon-generator.mintsu-dev.com/) こちらのサイトから画像サイズを選択し、画像拡張子を`「.ico」`に変更します! 今回は`「16x16」`と`「32x32」`を選択しました。 # ファビコンの設定 最後に作成したファビコンをアプリに設定していきます。 まず先程ダウンロードしたファビコンをアプリ`imagesフォルダー`下に配置します。 ``` assets/assets/images/favicon.ico ``` 次に配置したファビコンを読み込ませます。 ```html:app/views/layouts/application.html.erb <%= favicon_link_tag('favicon.ico') %> ``` これで、ファビコンの設定ができました! # 確認 以上で設置できたはずなので、サーバーを起動し確認してみてください! # 最後に 以上でファビコンの設定は完了です。 簡単に設定できるので、ぜひ試してみてください。 では。