77

I know new rails apps come with an empty favicon.ico file. I want to know how I go about adding a favicon. I know you can use the favicon_link_tag helper, but I am not sure how to populate the favicon.ico file. Do you use favicon generators? If so, which one is best?

I also want to be able to cache it, does rails do that automatically as well?

Thanks

Martijn Pieters
  • 1,048,767
  • 296
  • 4,058
  • 3,343
noob
  • 1,807
  • 2
  • 18
  • 34
  • 3
    http://stackoverflow.com/questions/6130593/adding-icon-to-rails-website This post will help you – Norto23 Mar 28 '12 at 06:07

12 Answers12

115

Simply add this to the <head></head> section of your layouts:

<%= favicon_link_tag 'favicon.ico' %>

Place the favicon.ico image in /app/assets/images/ if you are using the asset pipeline, and in /public/images/ if you are not.

Also, there is a bug if using Ruby 2.0 with Rails 3.0.20 (and maybe also 3.0.x), that will throws an exception when trying to render favicon.ico.

The fix is to place the following code into application_controller.rb:

  config.relative_url_root = ""
Dennis
  • 56,821
  • 26
  • 143
  • 139
Adrien Lamothe
  • 1,477
  • 1
  • 11
  • 14
  • I like this solution. I search this issue because I want to put clear identifiers in the favicon for dev/stage/prod tabs, and this is what I needed! – asfallows Jul 25 '13 at 18:47
  • hmm... I just had the weirdest expression of this bug, just having favicon.ico in my public directory (which works fine in development and on heroku) didn't work and weirdly trying to look at "myhostname.com/favicon.ico" would give me the nginx welcome screen (the one where you've just installed nginx, no idea why, which is why I'm posting this, because it is incredibly strange to my) then as soon as I added the favicon_link_tag everything was fine, the favicon showed up and looking at it directly worked. all of this from an otherwise perfectly fine app. – Mike H-R Feb 14 '14 at 03:39
70

generate your favicon for example here: http://www.favicon.cc/ and put in to public/ directory

UPDATE Favicon in public folder is not precompiled and it may be cached for a long time. It looks like it is better to use favicon_link_tag to avoid favicon updating problems. I do not know browsers needed favicon in root. According to favicon wiki all modern browsers maintains 

<link rel="shortcut icon" href="favicon path" /> (favicon_link_tag)
gayavat
  • 18,910
  • 11
  • 45
  • 55
  • Thanks. For some reason, I can see the favicon when it's `www.website.com`, but when I just go to `website.com`, it doesn't show? – noob Mar 28 '12 at 06:56
  • 26
    So the favicon does not go in the asset pipeline? – James Apr 20 '12 at 22:19
  • 4
    It is better/standard to have the favicon on http://yourdomain.com/favicon.ico as some browsers request for them directly (even when you do not use the meta tag for it). – yorch Sep 17 '12 at 21:23
9

While all these answers are saying to create a 16x16 icon, the reality is you should be creating both a 16x16 and 32x32, in order to support retina displays. None of the online generators did a very good job with this.

On Mac, there is a great $5 app called Icon Slate, which allows you to easily create both formats in a single ICO file.

On Windows, I've used Axialis IconWorkshop with great success, but it's a much heavier-duty tool, and is significantly more expensive at about €50.

Both will create an ico file with both 16x16 and 32x32 images within it.

If you're using the asset pipeline, use the app/assets/images folder rather than /public. The number of fringe browsers that ignore the link tag is rapidly approaching zero, so jumping through hoops to accommodate them isn't worth it.

As mentioned in other answers, use this in the head to display it:

<%= favicon_link_tag 'favicon.ico' %>
Tim Sullivan
  • 16,808
  • 11
  • 74
  • 120
  • 4
    [realfavicongenerator.net](http://realfavicongenerator.net) is free and great! don't waste your money ;) – MMachinegun Mar 27 '15 at 14:23
  • 3
    Investing in superb tools is never wasting your money. While that site is better than most, it is not even comparable to a tool like IconWorkshop, or the pleasant user experience of Icon Slate, which is also usable offline. – Tim Sullivan Mar 27 '15 at 18:25
5

I highly recommend this option. It was easy to use and free http://converticon.com

MFrazier
  • 400
  • 1
  • 5
  • 10
4

write in application.html.haml:

= favicon_link_tag '/images/favicon.ico'

place file favicon.ico in dir:

project/public/images
shilovk
  • 11,718
  • 17
  • 75
  • 74
2

You pretty much need a 16x16 pixel image file called favicon.ico and it must be available publically in the root of your site.

You can always use a major image editor to convert your logo or other image to the .ico format. There are free options like Gimp that can make such great icons based on existing image better than online icon generators.

fagiani
  • 2,293
  • 2
  • 24
  • 31
1

I tried the links above and the services were not very simple to use. I find this link on another site and it copied over my .png file flawlessly and was very simple to use. I thought I would share this link too, as I think it is a better service.

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

Matt
  • 381
  • 4
  • 13
  • 1
    This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. – OneChillDude Apr 24 '14 at 16:31
  • Will do in the future. Great tip. I was still a pretty big noob when I left this comment. – Matt Apr 25 '14 at 16:37
1

Haven't done it for years, but Gimp is capable of saving .ico files with multiple images having different sizes. You just need to export to .ico format with some visible layers.

marcpmichel
  • 33
  • 3
1

To generate a favicon for all platforms (not only for desktop browsers), you can use RealFaviconGenerator and the rails_real_favicon gem:

  • Go to RealFaviconGenerator and submit your picture. You can craft your icon, platform per platform: iOS, Android, etc.
  • Once your icon is ready, click the "Rails" tab to get the steps to install your favicon in your Rails project. Basically, you will be asked to:
    • Add the rails_real_favicon gem to you Gemfile
    • Create a new file named favicon.json. This file describes the icons you've just designed.
    • Run rails generate favicon to actually create the icons and HTML code.
    • Add render 'favicon' in your layouts to insert the HTML code in your pages.

The advantage of this solution is that it injects the favicon files (favicon.ico, apple-touch-icon.png, but also browserconfig.xml and manifest.json) in the asset pipeline.

Full disclosure: I'm the author of RealFaviconGenerator.

philippe_b
  • 38,730
  • 7
  • 57
  • 59
0

The solution I found that worked for me was to do the following:

  1. Go to http://realfavicongenerator.net/favicon_checker and confirm you have a good favicon. If you don't, then use their tool to create one (plus many other useful and related icons). Note: this requires that you have a good icon (e.g. PNG) to use as a basis for the favicon.
  2. Take advantage of http://realfavicongenerator.net suggestion to use ?v=version option to help defeat the browser caching issue. This helped me.
  3. Copy the favicon.ico to public and app/assets/images. You'll only need one but if you don't know which one, copying to both places doesn't hurt...or you can experiment to see which one works - take advantage of the ?v=version to perform your test.
  4. Add the following line in the <head></head> section of your layouts in app/views/layouts files (e.g. application.html.erb):

<%= favicon_link_tag 'favicon.ico' %>

Hopefully that provides a simple recipe. I'm sure if I missed anything, someone can and will improve on this answer.

Chip Roberson
  • 532
  • 3
  • 12
  • I'm the author of RealFaviconGenerator. Thanks for recommending it! You should check RFG again: integration with Rails is simpler than ever :) And there is no more need for versioning, as the asset pipeline handles it. – philippe_b Dec 09 '15 at 09:26
  • I was thinking about using RealFaviconGenerator in my project. How ever I think it does not support different favicons simultaneously for the same app, am I right? The issue is that my project answers to several domain names and present something different for each one, this has to include a different favicon. Is this possible with RealFaviconGenerator? – David Revelo Jul 07 '17 at 14:38
0

I had a problem when I put file into /public/favicon.ico, I am using AWS EBS.

I could fix the mistake.

The better solution for me was put the file into /app/assets/images/favicon.ico and to use = favicon_link_tag 'favicon.ico'

hguzman
  • 311
  • 5
  • 15
0

In rails 6, simply place it inside the public folder and reload the page.

vidur punj
  • 5,019
  • 4
  • 46
  • 65