複数のファビコンをレールに追加する方法

Question

単一のfavicon.icoの代わりにhttp://www.favicomatic.com/のファイルのいくつかの他のバージョンを作成しました。したがって、Faviconを.ico、.png、モバイル版およびWindows版として入手できます。

Railsは他のヘッダについて

favicon_link_tag 'myicon.ico' 

しかし、何を使用してにファビコンを追加するための非常に単純な方法を得ましたか。

Answer 1

Favicomaticはリンクがfavicon_link_tagが過負荷にしなければならないので、だから私たちは、そのようなもので終わらなければなりません

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" /> 
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" /> 
<meta name="application-name" content="&nbsp;"/> 
<meta name="msapplication-TileColor" content="#FFFFFF" /> 

をどのように見えるべきかのHTMLテンプレートを提供します。ミキシング

favicon_link_tag 'apple-touch-icon-57x57.png', rel: 'apple-touch-icon', type: 'image/png' 

を両方とも私たちはこのような何かを得る：favicon_link_tag documentation次のよう

<%= favicon_link_tag 'favicon/favicon.ico' %> 

<% [57,72,60,76].each do |size| %> 
    <%= favicon_link_tag "favicon/apple-touch-icon-#{size}x#{size}.png", rel: 'apple-touch-icon', type: 'image/png', sizes: "#{size}x#{size}" %> 
    <%= favicon_link_tag "favicon/apple-touch-icon-#{size * 2}x#{size * 2}.png", rel: 'apple-touch-icon', type: 'image/png', sizes: "#{size * 2}x#{size * 2}" %> 
<% end %> 

<% [16,32,96,196].each do |size| %> 
    <%= favicon_link_tag "favicon/favicon-#{size}x#{size}.png", type: 'image/png', sizes: "#{size}x#{size}" %> 
<% end %> 

<%= favicon_link_tag "favicon/favicon-128.png", type: 'image/png', sizes: "128x128" %> 

<meta name="application-name" content="My App"/> 
<meta name="msapplication-TileColor" content="#FFFFFF" /> 

<% [70,150,310].each do |size| %> 
    <meta name="<%= "msapplication-square#{size}x#{size}logo"%>" content="<%= asset_path("favicon/mstile-#{size}x#{size}.png")%>" /> 
<% end %> 
<meta name="msapplication-wide310x150logo" content="<%= asset_path("favicon/mstile-310x150.png")%>" /> 
<meta name="msapplication-TileImage" content="<%= asset_path("favicon/mstile-144x144.png")%>" /> 

をこれはあなたのファビコン資産があなたのレールのアプリで資産/画像内のディレクトリにあることを考えています。

あなたのfaviconに追加されているものは誰かがあなたのサイトをWindowsアプリケーションとして追加した場合のためのWindows Tile Metadataです。だからあなたのアプリ名と原色も入れてください。

Answer 2

私はあなたがRealFaviconGenerator and its companion RoR pluginを使用することをお勧め：

• あなたが（代わりにあなたがRoRのに適応する必要がある一般的な指示を得るための）あなたのRoRのプロジェクトであなたのファビコンをインストールするためのステップバイステップの手順を取得します。
• 実際のマークアップは、時間の経過とともに（新しいプラットフォームが表示されたときやマークアップが最適化されたとき）進化する可能性があります。
• ウェブアプリケーションマニフェスト（Android Chromeで使用）やbrowserconfig.xml（IE用）などのサポートファイルを含め、すべてのリソースに対してアセットパイプラインを活用します。
• Mac OS X El CapitanのSafari用（最近）のマスクアイコンを含む、すべてのプラットフォームのサポートを受けることができます。

私はこのサイトの著者です。