新しいRailsアプリには空のfavicon.icoファイルが付属しています。ファビコンを追加する方法を知りたいと思います。favicon_link_tag
ヘルパー。しかし、favicon.icoファイルをどのように取り込むかはわかりません。ファビコンジェネレーターを使用していますか?もしそうなら、どれが最適ですか?
また、キャッシュできるようにしたいのですが、Railsも自動的にキャッシュしますか?
ありがとう
たとえば、ここでファビコンを生成します: http://www.favicon.cc/ そしてpublic /ディレクトリに入れます
[〜#〜] update [〜#〜]パブリックフォルダ内のファビコンはプリコンパイルされておらず、長期間キャッシュされる場合があります。 favicon_link_tag を使用して、ファビコンの更新の問題を回避する方が良いようです。ブラウザーがルートにファビコンを必要とするかわかりません。 favicon wiki によれば、すべての最新のブラウザーは
<link rel="shortcut icon" href="favicon path" /> (favicon_link_tag)
これをレイアウトの<head></head>
セクションに追加するだけです:
<%= favicon_link_tag 'favicon.ico' %>
アセットパイプラインを使用している場合は/app/assets/images/
に、使用していない場合は/public/images/
にfavicon.icoイメージを配置します。
また、Ruby 2.0 with Rails 3.0.20(および3.0.xも可能))を使用すると、例外をスローしようとするとバグが発生しますfavicon.icoをレンダリングします。
修正するには、application_controller.rbに次のコードを配置します。
config.relative_url_root = ""
これらの答えはすべて16x16アイコンを作成すると言っていますが、実際には、網膜ディスプレイをサポートするために16x16と32x32の両方を作成する必要があります。オンラインジェネレーターのどれもこれで非常に良い仕事をしませんでした。
Macには、 Icon Slate と呼ばれるすばらしい5ドルのアプリがあり、単一のICOファイルに両方の形式を簡単に作成できます。
Windowsでは、 Axialis IconWorkshop を使用して大成功を収めましたが、これははるかに頑丈なツールであり、約50ユーロと非常に高価です。
両方とも、16x16と32x32の両方の画像を含むicoファイルを作成します。
アセットパイプラインを使用している場合は、/ publicではなくapp/assets/imagesフォルダーを使用します。 link
タグを無視するフリンジブラウザーの数は急速にゼロに近づいているため、それらに対応するためにフープをジャンプすることは価値がありません。
他の回答で述べたように、head
でこれを使用して表示します:
<%= favicon_link_tag 'favicon.ico' %>
このオプションを強くお勧めします。使いやすく、無料でした http://converticon.com
書き込みapplication.html.haml:
= favicon_link_tag '/images/favicon.ico'
ファイルを置くfavicon.ico dir:
project/public/images
Favicon.icoという16x16ピクセルの画像ファイルが必要であり、サイトのルートで公開されている必要があります。
ロゴや他の画像を.ico形式に変換するには、常に主要な画像エディターを使用できます。 Gimpのような無料のオプションは、既存の画像に基づいて、オンラインアイコンジェネレーターよりも優れたアイコンを作成できます。
(デスクトップブラウザーだけでなく)すべてのプラットフォームのファビコンを生成するには、 RealFaviconGenerator とRails_real_favicon gemを使用できます。
Rails_real_favicon
gemをGemfile
に追加しますfavicon.json
という名前の新しいファイルを作成します。このファイルには、設計したばかりのアイコンが記述されています。Rails generate favicon
を実行して、実際にアイコンとHTMLコードを作成します。render 'favicon'
を追加して、ページにHTMLコードを挿入します。このソリューションの利点は、ファビコンファイル(favicon.ico
、Apple-touch-icon.png
、およびbrowserconfig.xml
およびmanifest.json
)をアセットパイプラインに挿入することです。
完全開示:私はRealFaviconGeneratorの著者です。
上記のリンクを試してみましたが、サービスの使い方はそれほど簡単ではありませんでした。私はこのリンクを別のサイトで見つけ、私の.pngファイルを完璧にコピーし、とても簡単に使用できました。私はそれがより良いサービスだと思うので、私もこのリンクを共有すると思いました。
何年もやっていないが、Gimpはサイズが異なる複数の画像を含む.icoファイルを保存することができる。いくつかの可視レイヤーを含む.ico形式にエクスポートする必要があります。
ファイルを/public/favicon.ico
に入れると問題が発生しました。 AWS EBS。 を使用しています
間違いを修正できました。
私にとってより良い解決策は、ファイルを/app/assets/images/favicon.ico
に入れて= favicon_link_tag 'favicon.ico'
を使用することでした
私のために働いたことがわかった解決策は、次のことをすることでした:
?v=version
_オプションを使用して、ブラウザーのキャッシュの問題を解決してください。これは私を助けました。public
および_app/assets/images
_にコピーします。必要なのは1つだけですが、どちらかがわからない場合は、両方の場所にコピーしても問題はありません...または、どちらが機能するかを試すことができます-_?v=version
_を利用してテストを実行。<head></head>
_セクションに次の行を追加します。_<%= favicon_link_tag 'favicon.ico' %>
_
簡単なレシピが提供されれば幸いです。私が何かを逃したなら、誰かがこの答えを改善することができ、そして改善するでしょう。