Chrome中Rails应用页面跳转时Favicon消失问题求助

算力阿峰

2026-5-19

解决Chrome v64中Rails Turbolinks跳转时Favicon消失的问题

嘿，这个Chrome 64和Turbolinks搭配的favicon bug我之前踩过坑！当时折腾了好一阵才找到靠谱的解决办法，给你分享几个有效的方案：

强制Turbolinks触发favicon重新加载
Chrome 64在Turbolinks页面切换时，会跳过对head里favicon标签的重新解析，哪怕标签存在也不加载。我们可以在application.js里加一段回调，每次页面加载完成后手动重置favicon的href属性，逼Chrome重新识别：
```
document.addEventListener('turbolinks:load', function() {
  const faviconLink = document.querySelector('link[rel="icon"]');
  if (faviconLink) {
    const tempHref = faviconLink.href;
    faviconLink.href = '';
    faviconLink.href = tempHref;
  }
});
```
这个方法不会影响Turbolinks的正常性能，只是做了个小触发动作。
改用绝对路径指向public文件夹的favicon
如果你之前用的是asset_path生成的动态路径，试试直接指定public下的绝对路径，避免Turbolinks切换时的路径解析问题。在layouts/application.html.erb里修改favicon标签：
```
<%= favicon_link_tag '/favicon.ico', rel: 'icon', type: 'image/x-icon' %>
```
这样Chrome每次切换页面都能直接定位到public里的图标文件，不会因为路径变化找不到。
临时禁用特定页面的Turbolinks（不推荐长期用）
如果只是个别页面出问题，你可以给对应链接加上data-turbolinks="false"，让页面强制刷新：
```
<%= link_to '目标页面', target_path, data: { turbolinks: false } %>
```
不过这个办法会丢掉Turbolinks的性能优势，所以优先用前两个方案。