LoginSignup
1
0

More than 1 year has passed since last update.

【Rails】ファビコンの設定

Last updated at Posted at 2021-06-10

目的

Railsで作成したアプリにファビコンを設定する。

開発環境

macOS: Big Sur
Rubyバージョン: 2.6.5
Railsバージョン: 6.0.0

前提

手順

  1. はじめに
  2. 画像の作成
  3. 画像の編集
  4. 画像のファビコン化
  5. ファビコンの設定
  6. 確認

はじめに

今回はファビコンの設置を行っていきます。
ファビコン作成から設定まで簡単な方法で行っていきます。

画像の作成

まずは画像を作成していきます。

canva

こちらのサイトからロゴ作成を選択し、ファビコンとなるデザインを作成していきます。
会員登録は必要ですが、無料で使えます。

canva.png

作成できたら画像をダウンロードして次へ進みます。

画像の編集

次に画像の編集を行います。(画像の編集が必要ない方は飛ばして頂いて構いません。あくまで見た目の修正です。)
今のままですと、ピン角になっているため、角Rを付けます。
BANNERKOUBOU
こちらのサイトから画像を加工します!
加工が完了したらダウンロードしてください。

画像のファビコン化

先程ダウンロードした画像をファビコン化していきます。
Favicon ジェネレーター
こちらのサイトから画像サイズを選択し、画像拡張子を「.ico」に変更します!

今回は「16x16」「32x32」を選択しました。

ファビコンの設定

最後に作成したファビコンをアプリに設定していきます。

まず先程ダウンロードしたファビコンをアプリimagesフォルダー下に配置します。

assets/assets/images/favicon.ico

次に配置したファビコンを読み込ませます。

app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
<!-- 省略 -->
    <%= favicon_link_tag('favicon.ico') %>
<!-- 省略 -->
  </head>
<!-- 省略 -->

これで、ファビコンの設定ができました!

確認

以上で設置できたはずなので、サーバーを起動し確認してみてください!

最後に

以上でファビコンの設定は完了です。
簡単に設定できるので、ぜひ試してみてください。
では。

1
0
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
1
0