10

I put favicon.ico into /public/ folder and include the following code into layout page

<%= favicon_link_tag %>

But inspite of it, the icon doesn't display. What should I do?

Andrew Marshall
  • 95,083
  • 20
  • 220
  • 214
Alexandre
  • 13,030
  • 35
  • 114
  • 173
  • 2
    If it's located at `/favicon.ico`, browsers will automatically pick it up; no need for anything in the HTML. If it's not working, either your ICO file is not valid or the browser has cached an old one, try clearing your cache and try again. – Andrew Marshall Jun 17 '12 at 14:15

2 Answers2

26

I have struggled with the same. This is what worked for me:

<%= favicon_link_tag 'favicon.ico' %>

and moving the favicon.ico to the /public/images directory.

Good luck!

Anil
  • 3,899
  • 1
  • 20
  • 28
1

I don't know what favicon_link_tag is in your app but in general, there are two ways to create a favicon.

  1. Put your icon file in your app root directory (/public). In this case, you don't have to do anything in your code. (does not work in seamonkey, works in all other browsers I know)

  2. Place a link element in the code of your master view:

     <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/relative/path/to/file.ico" />
toniedzwiedz
  • 17,895
  • 9
  • 86
  • 131
  • [`favicon_link_tag`](http://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html#method-i-favicon_link_tag) is part of Rails. IE doesn't support PNG favicons. – Andrew Marshall Jun 17 '12 at 14:16
  • @AndrewMarshall gotta love IE. Please check out the edit. The link type in particular. – toniedzwiedz Jun 17 '12 at 14:20
  • 2
    It really is ridiculous, I know. I actually use conditional comments to serve up a PNG favicon to "real" browsers, and then an ICO to IE. Also you might want to clarify "root directory", in Rails the app root is different than the public root, which is `/public` and files in there are accessed from HTTP at `/`. – Andrew Marshall Jun 17 '12 at 14:26
  • @AndrewMarshall good point. I clarified the answer. Thanks for your valuable input. – toniedzwiedz Jun 17 '12 at 14:31
  • 1
    Which one is the root one in this case (rails application): /public/ or exactly the root directory? – Alexandre Jun 17 '12 at 14:35
  • 1
    @AlexMaslakov `/public` which is the HTTP root. – Andrew Marshall Jun 17 '12 at 14:43
  • 1
    it's best to serve multilayer .ico's to account for retina displays. .ico has the added benefit of you not having to worry about different formats across browsers - http://www.xiconeditor.com/ – Larry Jun 25 '14 at 12:43
  • @AndrewMarshall could you share the code of how to you deliver .ICO to IE and .PNG to other browsers – Mauricio Gracia Gutierrez Feb 18 '15 at 16:05
  • @MauricioGracia Just use [IE’s conditional comments](https://msdn.microsoft.com/library/ms537512.aspx) to appropriately wrap the PNG `` tag with a “if not IE” and the ICO one with a “if IE”. Note though that IE10 no longer supports these comments, but PNG favicons are not supported until IE11 `:/`. – Andrew Marshall Feb 18 '15 at 18:49