1. oak1331

    No comment

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