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

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

(Last modified: )

ファビコンを設定する

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 )

プロフィール画像

著者 / TATSUO IKURA

これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、開発環境構築などに関する解説サイトを運営しています。