Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@oak1331

【Rails】ファビコンの設定

目的

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>
<!-- 省略 -->

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

確認

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

最後に

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

0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
oak1331
日々学んだことをアウトプットしていきます。 同じ境遇の方の参考になれば幸いです。 よろしくお願いします。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?