Search code examples
webpackaureliafavicon

Favicon.ico works locally, but not on test-server

I do have a issue when trying to set the favicon.ico on my test server, locally everything works fine.. To reach my test-server i use the following URL:

http://app-server/company/companyproject%20test/client/

I have the following project structure and I am using webpack.

Project structure

Does somebody have any idea how this works?

If u need more information, feel free to comment.

Thanks in advance.

Solution

  • It is possible that the favicon is simply not available in the dist folder once your app is built. Try copying it to the dist folder using copy-webpack-plugin (npm i --save-dev copy-webpack-plugin)

    Import it in your webpack.config.js as

    const CopyWebpackPlugin = require("copy-webpack-plugin")

    and finally add it to plugins as below

    new CopyWebpackPlugin([{ from: "favicon.ico", to: "favicon.ico" }])

    Personally, i would mainain such assets in a folder and copy over the entire folder to the build folder (dist) to prevent having to copy individual files.

    new CopyWebpackPlugin([{ from: "icons", to: "icons" }])

    thereby making it possible to do

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

    <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-icon-180x180.png">

    in your index.ejs