はじめに

Rails で favicn を設定する方法(と、ついでに favicon そのものの生成)についてまとめた。

TL;DR

  • favicon_link_tag を使う
    • /public 配下の場合は / 始まりで指定
    • /app/assets など配下の場合は / 無しで指定
  • favicon の作成は Canva と favicon generator が便利
  • Favicon checker で設定内容を確認する
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. favicon の指定方法
    2. favicon の生成
    3. favicon 設定のチェック
  5. まとめ
  6. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15.1
BuildVersion:	19B88

$ ruby -v
ruby 2.6.3p62 (2019-04-16 revision 67580) [x86_64-darwin18]

$ rails -v
Rails 5.2.3

詳細

favicon の指定方法

favicon_link_tag を使うことで、favicon を指定できる。

app/views/layouts/application.html.slim

/app/assets/ 配下などの Assets Pipeline のターゲットを対象とする場合。

1
2
= favicon_link_tag 'favicon.ico'
# => <link rel="shortcut icon" type="image/x-icon" href="/assets/favicon-45c143d444ad8ac923f6d6d9ea2a9c9b78c0bc2eff93715eeb5b4f123cbf13a7.ico">

/public/favicon.ico などを指定する場合は / 始まりにする。

1
2
= favicon_link_tag '/favicon.ico'
# => <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

rel や type などの属性を変更したい場合。

1
2
= favicon_link_tag 'favicon.ico', rel: "icon", type: "image/png"
# => <link rel="icon" type="image/png" href="/assets/favicon-45c143d444ad8ac923f6d6d9ea2a9c9b78c0bc2eff93715eeb5b4f123cbf13a7.ico">

favicon の生成

画像そのものの作成は Canva を使うことが多い。

画像から favicon への変換は favicon generator を使うのが便利。

なお、favicon generator で推奨(最低限)の設定は以下。

画像は以下2個を任意の場所に置き、favicon.icoをドキュメントルートに置きます。最低この3個でいいと思われます。

1
2
3
4
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/favicon.ico">
<link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico">
<link rel="apple-touch-icon" type="image/png" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/icon-192x192.png">

これを favicon_link_tag で指定する場合は、以下の通り。(favicon.ico について、type と rel を指定すべきかは不明なので未指定)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# /app/assets/ 配下などの Assets Pipeline のターゲットを対象とする場合
= favicon_link_tag 'favicon.ico'
= favicon_link_tag 'icon-192x192.png', rel: "icon", type: "image/png"
= favicon_link_tag 'apple-touch-icon-180x180.png', rel: "apple-touch-icon", type: "image/png"
# => <link rel="shortcut icon" type="image/x-icon" href="/assets/favicon-45c143d444ad8ac923f6d6d9ea2a9c9b78c0bc2eff93715eeb5b4f123cbf13a7.ico">
#    <link rel="icon" type="image/png" href="/assets/icon-192x192-dbe5640cc38f71aac56b8e7f8d1803446f4a3433468dda94ba4d18382b01997e.png">
#    <link rel="apple-touch-icon" type="image/png" href="/assets/apple-touch-icon-180x180-ff369de2ff841a3369fef8e319e7afecf1aaa11181d309213d8f0fb7c43b9726.png">


# /public/favicon.ico などを指定する場合
= favicon_link_tag '/favicon.ico'
= favicon_link_tag '/icon-192x192.png', rel: "icon", type: "image/png"
= favicon_link_tag '/apple-touch-icon-180x180.png', rel: "apple-touch-icon", type: "image/png"
# => <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
#    <link rel="icon" type="image/png" href="/icon-192x192.png">
#    <link rel="apple-touch-icon" type="image/png" href="/apple-touch-icon-180x180.png">

favicon 設定のチェック

Favicon checker というサイトがあるので、URL を指定してチェックすると良さそう。

まとめ

  • favicon_link_tag を使う
    • /public 配下の場合は / 始まりで指定
    • /app/assets など配下の場合は / 無しで指定
  • favicon の作成は Canva と favicon generator が便利
  • Favicon checker で設定内容を確認する

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list