Docz: Favicon

[albinekb]

What's the best way to add a favicon? Maybe we should add this to the docs too.

[renatorib]

You can follow docz.site example https://github.com/pedronauck/docz-website/blob/0fb96228e4ed2f7f3be1ad17cd7a0c1541002988/doczrc.js#L16-L21

It uses FaviconsWebpackPlugin.

// doczrc.js
import FaviconsWebpackPlugin from 'favicons-webpack-plugin'

const PUBLIC = path.resolve(__dirname, 'public')

export default {
  modifyBundlerConfig: config => {
    config.plugins.push(
      new FaviconsWebpackPlugin({
        logo: `${PUBLIC}/images/favicon.png`,
        inject: true,
      })
    )

    return config
  }
}

OR you can add directly in a custom html

// doczrc.js
export default {
  indexHtml: 'src/index.html',
}

example: https://github.com/pedronauck/docz-website/blob/0fb96228e4ed2f7f3be1ad17cd7a0c1541002988/src/index.html

---

It would be really cool to have some guide on docz.site

[renatorib]

If you want a documentation improvement, you can open a issue in https://github.com/pedronauck/docz-website or add a pull request!

[inje]

Hey @renatorib, I tried to add an favicon based on your instructions and they didn't work for me. I found a solution that works in the meantime by adding an external link in the doczrc.js for the favicon.

External favicon link

// doczrc.js
export default {
  htmlContext: {
    favicon: 'https://s3-us-west-1.amazonaws.com/set-protocol/favicon.ico',
  },
}

I added this and reran yarn dev which showed the favicon for me. This is mostly a bandaid solution to unblock some folks who are running into the same issue.

Following your recommendation, I opened an issue on the docz-website repo about adding documentation for favicons since I'm sure others are having the same issue by looking down the list of projects using docz who are missing favicons.

Testing Other Repos

I tested the docz-website and island-wars repos, both of which have working deployed favicons. When running both of them locally, I didn't see working favicons.

docz-site

When running the docz-website locally, and saw that the favicon for the site wasn't working for me. It's confusing because the doczrc.js leads to an .ico file, but the path doesn't match up to anything inside of the public folder. The only favicon I see is a favicon in the public/images folder which is a .png file. When looking in the source code on docz.site, the favicon link doesn't lead to anything. Would be useful to get clarification on how it works.

island-wars

I saw one repo in the list above that had a working favicon, and running that locally also didn't show a favicon. I did see a useful commit from there that I followed and didn't get me working favicon using that method. Their site does link to the proper favicon.

Production Builds

I questioned whether it was because I wasn't using a production build, so I deployed to Netlify, but also didn't see a working favicon.

I'll move this to the Github issues page, adding it here since I think this will be useful for anyone who is struggling to add a favicon to their docs, knowing that these steps have been tried.

[Grsmto]

Would be useful to get clarification on how it works.

That's the thing, the favicon on https://www.docz.site/ does not work.

[renatorib]

@pedronauck

[danielbayerlein]

With the latest version of docz you can configure the public folder and the favicon. For example:

export default {
  public: 'config/docz/public',
  htmlContext: {
    favicon: 'public/favicon.ico'
  }
}

[rossmoody]

With the latest version of docz you can configure the public folder and the favicon. For example:

export default {
  public: 'config/docz/public',
  htmlContext: {
    favicon: 'public/favicon.ico'
  }
}

This worked for me as well, just be sure to rebuild to see the updated favicon (not just refresh).