3

I want to include a favicon in an ember-cli application. I have put the .ico image in /public/assests/img/, and am able to include that image in a page.

According to this question I'm on the right track, but ...

Where would I like to the favicon? Normally I would put:

<link rel="icon" href="/assets/img/favicon.ico">

in the head of a html file. What .hbs file should contain a head? I'm new to ember and ember-cli, but I thought that the hbs files were just partials of HTML files. I have tried to throw the link tag into the application.hbs file, but that doesn't work. What am I missing?

Community
  • 1
  • 1
Eric Wilson
  • 57,719
  • 77
  • 200
  • 270

2 Answers2

6

I would just add it to the app/index.html file, directly in the <head>. There might be a way to add it to {{content-for 'head'}} within the application initializer but I'm not entirely sure myself.

Panman
  • 1,157
  • 2
  • 8
  • 19
  • That was silly. I forgot there was an `index.html`, as I hadn't touched it. Thanks much. – Eric Wilson Dec 11 '14 at 15:30
  • 3
    I checked on the `{{content-for 'head'}}` option. You'd have to use an addon to gain access to the `contentFor` hook. Such as `ember generate in-repo-addon favicon`, then return it form the `contentFor` hook when the `type` is "head". http://www.ember-cli.com/#content So yeah, just adding it to your `app/index.html` file is easier. – Panman Dec 11 '14 at 16:00
2

You could use ember-cli-favicon.

It's an addon that takes your source public/favicon.png and automatically outputs all the different favicon formats and sizes for different devices, as well as injects the appropriate HTML into your index.html file as part of the build process.

Dave W.
  • 1,576
  • 2
  • 18
  • 29
  • 1
    But you probably don't want to do that, because it adds an additional web service dependency to your builds (no offline builds), and can add a significant amount of time to the build. – theazureshadow Aug 21 '15 at 20:21
  • @theazureshadow that's definitely true, and I tried calling that out in the readme. There are certainly tradeoffs. The reliance on a web service isn't great, but it does ensure you get the latest favicon specs for whatever new device format comes out tomorrow. And the significant build time should only happen when you actually change the favicon itself (which usually isn't that often). It may not be the right solution in all cases, but I know at least personally, I've found the benefits to outweigh the downsides. – Dave W. Aug 23 '15 at 16:20