1. oak1331

    Posted

    oak1331
Changes in title
+【Rails】ファビコンの設定
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,91 @@
+# 目的
+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
+```
+
+次に配置したファビコンを読み込ませます。
+
+```ruby:app/views/layouts/application.html.erb
+<!DOCTYPE html>
+<html>
+ <head>
+#省略
+ <%= favicon_link_tag('favicon.ico') %>
+#省略
+ </head>
+#省略
+```
+
+これで、ファビコンの設定ができました!
+
+# 確認
+
+以上で設置できたはずなので、サーバーを起動し確認してみてください!
+
+# 最後に
+
+以上でファビコンの設定は完了です。
+簡単に設定できるので、ぜひ試してみてください。
+では。