如何在Rails 3.2中添加Favicon

74

我知道新的Rails应用程序附带一个空的favicon.ico文件。我想知道如何添加收藏夹图标。我知道您可以使用该favicon_link_tag帮助程序，但是我不确定如何填充favicon.ico文件。您是否使用网站图标生成器？如果是这样，哪个最好？

我还希望能够对其进行缓存，rails是否也可以自动进行缓存？

谢谢

ruby-on-rails favicon

— 菜鸟
source

3

stackoverflow.com/questions/6130593/… 这篇文章将为您提供帮助

— Norto23 2012年

69

例如，在此处生成您的网站图标：http : //www.favicon.cc/ 并放入public /目录

UPDATE 公用文件夹中的Favicon尚未预编译，因此可能会缓存很长时间。看起来最好使用favicon_link_tag以避免favicon更新问题。我不知道浏览器需要root的favicon。根据Favicon Wiki，所有现代浏览器都维护

<link rel="shortcut icon" href="favicon path" /> (favicon_link_tag)

— Gayavat
source

谢谢。出于某种原因，我可以看到它的图标www.website.com，但是当我转到时website.com，它不显示吗？

— noob 2012年

26

那么收藏图标不会进入资产管道吗？

— 詹姆斯

4

最好/标准是在yourdomain.com/favicon.ico上放置favicon，因为某些浏览器会直接要求它们（即使您不使用meta标签也是如此）。

— yorch 2012年

114

只需将其添加到<head></head>布局部分：

<%= favicon_link_tag 'favicon.ico' %>

/app/assets/images/如果您正在使用资产管道，则将favicon.ico图像放入；如果不使用，则将favicon.ico图像放入/public/images/。

另外，如果将Ruby 2.0与Rails 3.0.20（可能还有3.0.x）一起使用，则会出现一个错误，该错误会在尝试渲染favicon.ico时引发异常。

解决方法是将以下代码放入application_controller.rb中：

  config.relative_url_root = ""

— 阿德里安·拉莫特（Adrien Lamothe）
source

我喜欢这个解决方案。我搜索此问题是因为我想在favicon中为dev / stage / prod选项卡添加清晰的标识符，而这正是我所需要的！

— asfallows 2013年

嗯...我只是最奇怪地表达了这个错误，只是在我的公共目录中拥有favicon.ico（在开发中和在heroku上都可以正常工作）不起作用，并且奇怪地尝试查看“ myhostname.com/favicon。 ico”会给我nginx欢迎屏幕（您刚刚安装了nginx的屏幕，不知道为什么，这就是我发布此消息的原因，因为它对我来说是非常奇怪的），然后我就添加了favicon_link_tag很好，该图标出现了，看着它直接起作用了。所有这些都来自一个本来就很好的应用程序。

— Mike HR

9

虽然所有这些答案都说明要创建一个16x16的图标，但实际上是您应该同时创建一个16x16和32x32的图形，以便支持视网膜显示。没有一个在线生成器在此方面做得很好。

在Mac上，有一个功能出色的5美元应用程序，名为Icon Slate，它使您可以在单个ICO文件中轻松创建两种格式。

在Windows上，我使用Axialis IconWorkshop取得了巨大的成功，但是它是一种更重的工具，价格昂贵得多，约50欧元。

两者都将创建一个包含16x16和32x32图像的ico文件。

如果您正在使用资产管道，请使用app / assets / images文件夹而不是/ public。忽略该link标签的边缘浏览器的数量迅速接近零，因此，不值得一跳而过。

如其他答案中所述，在中使用head它来显示它：

<%= favicon_link_tag 'favicon.ico' %>

— 蒂姆·沙利文（Tim Sullivan）
source

4

realfavicongenerator.net是免费的并且很棒！不要浪费金钱；）

— MMachinegun

3

投资一流的工具永远不会浪费您的钱。虽然该站点比大多数站点要好，但它甚至无法与IconWorkshop之类的工具相提并论，也无法与Icon Slate一样令人愉悦的用户体验（也可以离线使用）。

— 蒂姆·沙利文 Tim Sullivan）2015年

5

我强烈建议您使用此选项。它易于使用且免费 http://converticon.com

— MFrazier
source

4

写在application.html.haml中：

= favicon_link_tag '/images/favicon.ico'

将文件favicon.ico放在目录中：

project/public/images

— Shilovk
source

2

您几乎需要一个名为favicon.ico的16x16像素图像文件，并且该文件必须在网站的根目录中公开可用。

您始终可以使用主图像编辑器将徽标或其他图像转换为.ico格式。有一些免费的选项，例如Gimp，可以使基于现有图像的出色图标比在线图标生成器更好。

— 法吉亚尼
source

1

我尝试了上面的链接，但这些服务的使用不是很简单。我在另一个站点上找到了此链接，并将它完美地复制到了我的.png文件中，并且非常易于使用。我认为我也将共享此链接，因为我认为这是一种更好的服务。

http://www.chami.com/html-kit/services/favicon/

— 马特
source

1

这不能为问题提供答案。要批评或要求作者澄清，请在其帖子下方发表评论。

— OneChillDude

将来会做。大提示。当我留下此评论时，我还是一个很大的菜鸟。

— 马特

1

多年没有这样做，但是Gimp能够保存具有多个具有不同大小的图像的.ico文件。您只需要导出为具有某些可见图层的.ico格式。

— 马克米切尔
source

1

要为所有平台（不仅是桌面浏览器）生成图标，可以使用RealFaviconGenerator和rails_real_favicon gem：

转到RealFaviconGenerator并提交您的图片。您可以设计图标，每个平台的平台：iOS，Android等。
准备好图标后，单击“ Rails”选项卡以获取在Rails项目中安装收藏夹图标的步骤。基本上，您会被要求：
- rails_real_favicon向您添加宝石Gemfile
- 创建一个名为 favicon.json。该文件描述了您刚刚设计的图标。
- 跑 rails generate favicon以实际创建图标和HTML代码。
- 添加render 'favicon'布局以在页面中插入HTML代码。

该方案的优点是，它的注入图标文件（favicon.ico，apple-touch-icon.png，也browserconfig.xml和manifest.json在资产管道）。

完全公开：我是RealFaviconGenerator的作者。

— philippe_b
source

0

我发现对我有用的解决方案是执行以下操作：

转到http://realfavicongenerator.net/favicon_checker并确认您有一个良好的图标。如果不这样做，请使用其工具创建一个（以及许多其他有用和相关的图标）。注意：这要求您有一个良好的图标（例如PNG）作为网站图标的基础。
利用http://realfavicongenerator.net建议使用?v=version选项来帮助克服浏览器缓存问题。这对我有帮助。
将favicon.ico复制到public和app/assets/images。您只需要一个，但是如果您不知道哪一个，那么复制到两个地方都不会受到伤害...或者您可以尝试查看哪个地方有用-利用?v=version进行测试。
<head></head>在app / views / layouts文件（例如，application.html.erb）的布局部分中添加以下行：

<%= favicon_link_tag 'favicon.ico' %>

希望这提供了一个简单的食谱。我敢肯定，如果我错过了任何事情，那么有人会并且会在这个答案上有所改善。

— 芯片罗伯森
source

我是RealFaviconGenerator的作者。感谢您的推荐！您应该再次检查RFG：与Rails的集成比以往任何时候都更简单:)并且不再需要版本控制，因为资产管道可以处理它。

— philippe_b 2015年

我正在考虑在项目中使用RealFaviconGenerator。我怎么会认为同一应用程序不同时支持不同的图标，对吗？问题是我的项目回答了几个域名，并且每个域名都呈现出不同的含义，其中必须包含一个不同的图标。RealFaviconGenerator有可能吗？

— David Revelo '17

0

将文件放入时遇到问题/public/favicon.ico，我正在使用AWS EBS。

我可以纠正错误。

对我来说更好的解决方案是将文件放入/app/assets/images/favicon.ico并使用= favicon_link_tag 'favicon.ico'

— 古兹曼
source