Angular-cli: favicon not being deployed/displayed

Created on 19 Sep 2016 · 11Comments · Source: angular/angular-cli

C:\UsersPeter Ennis>ng version
angular-cli: 1.0.0-beta.14
node: 6.6.0
os: win32 x64

I have tried a number of options in the index.html file to get
the favicon showing but without success.

The localhost site and direct github link show the favicon.

The site is a masked redirect from godaddy to github gh-pages
using the ng github-pages:deploy

Some examples of favicon testing that fail, but have worked in the past
with other deploy methods:

<head>
  <meta charset="utf-8">
  <title>Adaept</title>
  <base href="/adaept/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="https://adaept.github.io/adaept/favicon.ico">
  <!-- <link rel="icon" sizes="16x16 32x32" href="favicon.ico?v=2">
       <link rel="icon" type="image/x-icon" href="favicon.ico"> -->

When I look in the dist folder and parent there is no favicon.ico file available to be deployed.

Does the file have to be manually copied? I would expect deploy to take care of this.

capture68

Source

peterennis

Most helpful comment

I had to put mine in the assets folder and change the path in the index.html

jbeckton on 20 Sep 2016

👍31 ❤7 🎉4 😄4

All 11 comments

I had to put mine in the assets folder and change the path in the index.html

jbeckton on 20 Sep 2016

👍31 ❤7 🎉4 😄4

I could not find any assets folder in the system. Starting with new ...
Here: https://github.com/angular/angular-cli/issues/713
is another reference from @ustaDAH

peterennis on 20 Sep 2016

This also seems related: https://github.com/angular/angular-cli/issues/2202

peterennis on 20 Sep 2016

You have to create an assets folder in your src folder. By convention the CLI will copy it for you to /dist.

The webpack version of the CLI replaced the public folder for one named assets

jbeckton on 20 Sep 2016

@jbeckton @peterennis yes that (creation of /src/assets) worked.

ustaDAH on 21 Sep 2016

How do we find out if the team still wants to have the favicon.ico file copied during build?
It appears this might have been lost in Pull Request 2056

If it should still do this, I think the following will fix it...

In packagesangular-cli\models\webpack-build-common.ts update the plugins object to include a copy of the favicon.ico file:

      new CopyWebpackPlugin([
        {
          context: path.resolve(appRoot, appConfig.assets),
          from: { glob: '**/*', dot: true },
          ignore: [ '.gitkeep' ],
          to: path.resolve(projectRoot, appConfig.outDir, appConfig.assets)
        }, {
>>        from: path.resolve(projectRoot, appConfig.root, 'favicon.ico'),
>>        to: path.resolve(projectRoot, appConfig.outDir)
        }
      ])

If someone wants to do a pull request to fix this, please go ahead. There is too much overhead for me to follow the developers guidelines just for this simple fix. I don't have the time right now. Thanks!

Paul

pauldubois777 on 21 Sep 2016

This works! Thanks

nmorado on 21 Sep 2016

Dupe of https://github.com/angular/angular-cli/issues/2137

filipesilva on 22 Sep 2016

I'd be tempted to rather have favicon.ico in the assets folder and change the url in the index.html accordingly. (And of course also change ng new ... to generate seed sources as such).

ustaDAH on 22 Sep 2016

It Works! Thanks!