favicon_link_tagメソッドを使ったファビコンの設定

広告

favicon_link_tagメソッドを使ってファビコンを設定する方法について解説します。

favicon_link_tagメソッドはActionView::Helpers::AssetTagHelperクラスで次のように定義されています。 

favicon_link_tag(source='/favicon.ico', options={})

1番目の引数にファビコンのファイル名を指定します。省略した場合は「/favicon.ico」が初期値として設定されます。通常は「favicon.ico」のままで問題無いので、省略するかまたは引数に'/favicon.ico'を指定します。 

<%= favicon_link_tag %>
--> <link href="/favicon.ico" rel="shortcut icon"
         type="image/vnd.microsoft.icon" />

<%= favicon_link_tag '/favicon.ico' %>
--> <link href="/favicon.ico" rel="shortcut icon"
         type="image/vnd.microsoft.icon" />

ファイルのパスが「/favicon.ico」となっていますので、ファビコンのファイルは「public」フォルダに配置して下さい。また出力されるコードはlinkタグですのでレイアウトテンプレートに記述します。(レイアウトについては「レイアウトの利用」をご参照下さい)。

では実際に簡単な例で確認してみます。「books」コントローラに「show」アクションを作成します。 

class BooksController < ApplicationController
  def show
  end
end

次に「books」コントロールの「show」アクションから呼び出されるテンプレートとして「app/views/books/show.html.erb」ファイルを作成し、次のように記述しました。 

<p>
Welcome to Show Page
</p>

レイアウトテンプレートである「app/views/layouts/application.html.erb」ファイルに次の1行を追加しました。 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <title>SampleView</title>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
<%= favicon_link_tag %>
</head>
<body>

<%= yield %>

</body>
</html>

ルーティングの設定として「config/routes.rb」ファイルを次のように記述しました。 

SampleView::Application.routes.draw do
  get "books/show"
end

ファビコン用ファイルである「favicon.ico」を「public」ディレクトリに配置しました。

p12-1

ではアプリケーションを起動し「books」コントロールの「show」アクションを呼び出してみます。すると次のように結果がブラウザに表示されました。

p12-2

画面左上に先程設定したファビコンが表示されています。

ソースを確認してみると次にように出力されていることが確認できます。

p12-3

このようにfavicon_link_tagメソッドを使うことでファビコンを設定することが可能です。

なお環境が無いので確認をすることができないのですが、iPod Touch,やiPhoneやiPadなどでホーム画面のアイコンとして画像を指定するには次の書式で可能なようです。 

<%= favicon_link_tag 'mb-icon.png', :rel => 'apple-touch-icon',
  :type => 'image/png' %>

確認できる環境ができましたら、改めて確認を取ってみます。

( Written by Tatsuo Ikura )

Profile
profile_img

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。

カテゴリ
検索