logo标签列表

如何在Rails 3.2中添加网站图标？

ruby-on-railsfavicon
77

我知道新的Rails应用程序带有一个空的favicon.ico文件。 我想知道如何添加一个favicon。 我知道你可以使用favicon_link_tag辅助工具，但我不确定如何填充favicon.ico文件。 你会使用favicon生成器吗？ 如果是这样，哪一个是最好的？

我也想能够缓存它，Rails会自动处理吗？

谢谢

3
这篇文章将帮助你。它讲解如何向Rails网站添加图标。 - Norto23
12个回答
115

只需将以下代码添加到您的布局文件的 <head></head> 部分：

<%= favicon_link_tag 'favicon.ico' %>

如果您使用资产管道，请将favicon.ico图像放置在/app/assets/images/中；如果不使用，请将其放置在/public/images/中。

另外，如果在Rails 3.0.20（也许还包括3.0.x）中使用Ruby 2.0，则会出现错误，尝试呈现favicon.ico时会抛出异常。

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

  config.relative_url_root = ""
我喜欢这个解决方案。我搜索这个问题是因为我想在开发/阶段/生产标签的网站图标中放置清晰的标识符，而这正是我所需要的！ - asfallows
嗯...我刚刚遇到了这个错误的最奇怪表现，只是将favicon.ico放在我的公共目录中（在开发和Heroku上都正常工作），但尝试查看“myhostname.com/favicon.ico”会给我Nginx欢迎屏幕（刚安装Nginx时的那个屏幕，不知道为什么，这就是我发布这篇文章的原因，因为这对我来说非常奇怪），然后当我添加了favicon_link_tag后一切都正常了，favicon出现了，并且直接查看它也可以。所有这些都来自一个否则完全正常的应用程序。 - Mike H-R
70

你可以在这里生成你的网站图标： http://www.favicon.cc/，然后将其放置在public/目录下。

更新： 公共文件夹中的网站图标没有预编译，且可能被长时间缓存。因此最好使用favicon_link_tag避免图标更新问题。我不确定浏览器是否需要在根目录下的网站图标。根据网站图标维基上的说明，所有现代浏览器都支持。 

<link rel="shortcut icon" href="favicon path" /> (favicon_link_tag)
谢谢。不知为何，当我访问www.website.com时，可以看到网站的favicon图标，但是当我只访问website.com时，它就不显示了？ - noob
26
网站图标不应该放在资产管道中吗？ - James
4
为了更好/符合标准，建议将网站的favicon放置在http://yourdomain.com/favicon.ico上，因为有些浏览器会直接请求该文件（即使您没有使用meta标签）。 - yorch
9
虽然所有这些答案都建议创建一个16x16的图标，但事实上您应该创建16x16和32x32两种尺寸，以支持视网膜显示屏。在线生成器都没有很好地完成这项任务。
在Mac上，有一款名为Icon Slate的5美元优秀应用程序，可以让您轻松地在单个ICO文件中创建两种格式。
在Windows上，我使用过Axialis IconWorkshop，取得了巨大的成功，但它是一个功能更加强大的工具，并且价格昂贵，约为50欧元。
两者都将在ico文件中创建包含16x16和32x32图像的图标。
如果您正在使用资源管道，请使用app/assets/images文件夹，而不是/public。忽略link标签的边缘浏览器数量已经接近零，因此为了适应它们而跳跃并不值得。
如其他答案所述，请在head中使用以下内容来显示它：
<%= favicon_link_tag 'favicon.ico' %>
4
realfavicongenerator.net 是免费且非常好用的！别浪费你的钱 ;) - MMachinegun
3
投资于优秀的工具永远不是浪费金钱。虽然那个网站比大多数网站都要好，但它甚至不能与像 IconWorkshop 这样的工具或者可离线使用的用户体验愉悦的 Icon Slate 相比较。 - Tim Sullivan
5
4

在application.html.haml中编写：

= favicon_link_tag '/images/favicon.ico'

请将文件 favicon.ico 放置在以下目录中：

project/public/images
2

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

您可以使用主要的图像编辑器将您的标志或其他图像转换为 .ico 格式。还有免费选项，如 Gimp，可以基于现有图像制作出更好的图标，比在线图标生成器更好。

1

要为所有平台（不仅限于桌面浏览器）生成网站图标，您可以使用RealFaviconGenerator和rails_real_favicon宝石：

  • 前往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的作者。
1

我尝试了上面的链接和服务，但它们并不是很简单易用。我在另一个网站上找到了这个链接，它完美地复制了我的 .png 文件，并且非常容易使用。我想分享这个链接，因为我认为它是更好的服务。

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

1
这并没有提供问题的答案。如果您想对作者进行批评或请求澄清，请在他们的帖子下留言。 - OneChillDude
将来会做的。好建议。当我留下这个评论时，我还是一个相当大的新手。 - Matt
1
多年没用过，但是Gimp可以保存具有不同尺寸的多个图像的.ico文件。您只需要使用一些可见层导出为.ico格式即可。
0
我找到的解决方法是按照以下步骤进行：
  1. 前往http://realfavicongenerator.net/favicon_checker，确认您有一个好的网站图标。如果没有，使用他们的工具创建一个（以及许多其他有用的和相关的图标）。注意：这需要您有一个好的图标（例如PNG）作为网站图标的基础。
  2. 利用http://realfavicongenerator.net建议使用?v=version选项来帮助解决浏览器缓存问题。这对我很有帮助。
  3. 将favicon.ico复制到public和app/assets/images中。您只需要一个，但如果您不知道哪个，将其复制到两个位置不会有影响...或者您可以尝试一下哪个有效 - 利用?v=version进行测试。
  4. 在app/views/layouts文件夹中的布局的<head></head>部分添加以下行（例如application.html.erb）：

<%= favicon_link_tag 'favicon.ico' %>

希望这提供了一个简单的方法。如果我漏掉了什么，相信会有人改进这个答案。

我是RealFaviconGenerator的作者。感谢您的推荐！您应该再次检查RFG：与Rails的集成比以往任何时候都更简单 :) 而且不再需要版本控制，因为资产管道会处理它。 - philippe_b
我在考虑在我的项目中使用RealFaviconGenerator。然而，我认为它不支持同时为同一应用程序使用不同的favicon，我是对的吗？ 问题在于我的项目响应多个域名，并为每个域名呈现不同的内容，这必须包括不同的favicon。使用RealFaviconGenerator可以实现吗？ - David Revelo
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接