Help us understand the problem. What is going on with this article?

Rails Tutorial 拡張(ブラウザのタブに好きな画像を表示)

More than 3 years have passed since last update.

はじめに

Ruby on Rails Tutorialをやっていて、ふと、ブラウザのタブにRailsのロゴを入れたいなと思い、調べて見ました。案外簡単だったので、使って見てください。

Railsにはもともと、ActionView::Helpers::AssetTagHelperに favicon を使用できるように favicon_link_tag が定義されているようです。

そもそも faviconって。。。?

プログラミング初心者の中には、 faviconという言葉を初めて聞いたという人も多いのではないでしょうか?僕もその一人で、今回これを調べるにあたり初めて知りました。
そんな方でも安心してください!もう今後、 faviconって何? なんて絶対に言わなくなります! 絶対に です!

faviconとは、、、

言葉で説明するより、見た方が早いと思うので、こちらの画像を用意しました。

image.png

見ての通り、よくwebサイトで見る、このアイコンのことです。
それでは、言葉でも説明したいと思います。

faviconとは、

fav + icon 

のことである!!!!
favとは、 favorite の略で、つまり、どういうことかというと、 自分の好きな画像 ってことだね!
何かオリジナルでサービス開発する時には、ここもこだわるといいかもしれません。

実際に使って見る。

API docや、こちらのブログを参考にしました。

favicon.ico を用意

今回は、やはり、Rails Tutorialということもあり、 Rails のロゴがいいなと思い、Rails Tutorialに沿って、ダウンロードします。
ターミナルで、

Terminal
$ curl -OL http://railstutorial.jp/rails.png

と入力し、rails.pngをダウンロードします。
そして、こちらのサイトへアクセスし、favicon.icoを作成・ダウンロードします。

次に、作成した favicon.ico を使用したいアプリケーションの app/assets/images 以下に配置してください。

favicon.icoを読み込ませる。

favicon.icoを使用するためには、基本的に、 favicon_link_tag を使用します。このヘルパーは、アセットパイプラインに則っているので、引数に.icoファイル名を指定しただけでも、 app/assets/images/画像ファイル.ico を探してくれます。引数に何も指定しないと、app/assets/images/favicon.icoを自動で読みに行ってくれるようです。User-firstって感じがしますね〜

application.html.slim
doctype html
html
  head
    title
      = full_title(yield(:title))
    = csrf_meta_tags
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
    = favicon_link_tag 'favicon.ico'

この一番下の部分ですね。(Template Engineは、今回 slim を採用しています。)

確認してみる

実際にロゴが適用されているか確認しましょう。もちろんローカルサーバーと起動し、それぞれ、localhostにアクセスして見てください。
自分の場合はこうなりました。

これで、Rails TutorialにもRailsのロゴが適用されました!!!
皆さんも自分の好きなアイコン(favicon)を設定してください。

参考にしたサイト

です。ありがとうございました。アドバイス等々ありましたら、ご指摘いただけると嬉しいです。

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