Changing Favicon (Using Docker)

[anhuntz]

We are running Wiki.js through a docker container. How can the favicon be changed? I don't want to risk changing it manually by going into the docker container files, and I can't seem to find an option to change it within the site itself. Help!

Host Info:
OS: Ubuntu 18.04, Docker
Wiki.js version: Latest

[Smankusors]

Just bind mount the /wiki/assets/favicon.ico file and /wiki/assets/favicons/ folder. You don't manually "change" the docker container files, but "override" them.

[nideKer]

It's better make via docker-compose.yaml
in your wiki image config remap folder from container to the host and put favico (favicon-32x32.png) to this folder

volumes:
      - /path/to/your/host/folder/favicons:/wiki/assets/favicons

Regards!

[BBBosp]

have you actually tried this, or just supposition? because I added this to my docker-compose.yaml and it didn't do anything for me. favicon stayed the same whether I mapped the favicon dir or the specific image as mentioned in another example you gave.

[nideKer]

@BBBosp yes it's forks for me fine

My part of docker-compose.yaml
- /var/www/my-wiki-js/favicons:/wiki/assets/favicons

check for the ownership of the favicon folder and files. (In my case it's 'www-data' )

[jord8on]

Just bind mount the /wiki/assets/favicon.ico file and /wiki/assets/favicons/ folder. You don't manually "change" the docker container files, but "override" them.

It's better make via docker-compose.yaml
in your wiki image config remap folder from container to the host and put favico to this folder

volumes:
      - /path/to/your/host/folder/favicons:/wiki/assets/favicons

Regards!

I'm also using Docker via DigitalOcean droplet and I'm not super familiar with how to get to a folder in the app, from Linux.

I am able to login to my wiki.js instance via SSH following these instructions. I just don't know what to do next.

Can someone provide the commands I should enter to get to this /wiki/assets/favicons/ folder, and how to substitute the default favicon with our new one?

[nideKer]

I'm also using Docker via DigitalOcean droplet and I'm not super familiar with how to get to a folder in the app, from Linux.

@jord8on You need to know how your container is started - via docker-compose or docker run command - there is different commands to solve it.

[nethoncho]

@jord8on This works with the Digital Ocean droplet. Skip the line with -e LETSENCRYPT_DOMAIN if you are not using ssl. Note that this will NOT erase any of your content. The wiki docker us just the front end.

docker stop wiki
docker rm wiki
docker create --name=wiki \
-e LETSENCRYPT_DOMAIN=YOUR_HOST_NAME -e LETSENCRYPT_EMAIL=YOUR_EMAIL_ADDRESS -e SSL_ACTIVE=1 \
-e DB_TYPE=postgres -e DB_HOST=db -e DB_PORT=5432 -e DB_PASS_FILE=/etc/wiki/.db-secret \
-v /etc/wiki/.db-secret:/etc/wiki/.db-secret:ro -e DB_USER=wiki -e DB_NAME=wiki -e UPGRADE_COMPANION=1 \
-v /etc/wiki/custom-assets/favicons:/wiki/assets/favicons \
-v /etc/wiki/custom-assets/favicon.ico:/wiki/assets/favicon.ico \
--restart=unless-stopped -h wiki --network=wikinet -p 80:3000 -p 443:3443 requarks/wiki:2
docker start wiki
docker logs wiki

[bubnivevg]

@jord8on This works with the Digital Ocean droplet. Skip the line with -e LETSENCRYPT_DOMAIN if you are not using ssl. Note that this will NOT erase any of your content. The wiki docker us just the front end.

docker stop wiki
docker rm wiki
docker create --name=wiki \
-e LETSENCRYPT_DOMAIN=YOUR_HOST_NAME -e LETSENCRYPT_EMAIL=YOUR_EMAIL_ADDRESS -e SSL_ACTIVE=1 \
-e DB_TYPE=postgres -e DB_HOST=db -e DB_PORT=5432 -e DB_PASS_FILE=/etc/wiki/.db-secret \
-v /etc/wiki/.db-secret:/etc/wiki/.db-secret:ro -e DB_USER=wiki -e DB_NAME=wiki -e UPGRADE_COMPANION=1 \
-v /etc/wiki/custom-assets/favicons:/wiki/assets/favicons \
-v /etc/wiki/custom-assets/favicon.ico:/wiki/assets/favicon.ico \
--restart=unless-stopped -h wiki --network=wikinet -p 80:3000 -p 443:3443 requarks/wiki:2
docker start wiki
docker logs wiki

My Wiki broke after I followed your instructions. Now I don't know how to fix it ...

Error response from daemon: OCI runtime create failed: container_linux.go:349: starting container process caused "process_linux.go:449: container init caused "rootfs_linux.go:58: mounting \"/etc/wiki/custom-assets/favicon.ico\" to rootfs \"/var/lib/docker/overlay2/6c1b1197c22e691ef7ed9d3823042171f8f73fe7397ca4807b956de9b8e51111/merged\" at \"/var/lib/docker/overlay2/6c1b1197c22e691ef7ed9d3823042171f8f73fe7397ca4807b956de9b8e51111/merged/wiki/assets/favicon.ico\" caused \"not a directory\""": unknown: Are you trying to mount a directory onto a file (or vice-versa)? Check if the specified host path exists and is the expected type
Error: failed to start containers: wiki

[nideKer]

@bubnivevg you trying to bind favico to system folder /etc - you need to bind it in /var/www/... or /opt... folders with proper rights.

by the way could you show your run script?

[jeffshead]

I can't get this to work, either. I'm using docker-compose/Portainer and Wiki.js 2.5.294.

I have tried adding both...

volumes:
      - /path/to/your/host/folder/favicons:/wiki/assets/favicons

and

volumes:
      - /path/to/your/host/folder/favicons:/wiki/assets/favicons
      - /path/to/your/host/folder/favicons/favicon.ico:/wiki/assets/favicon.ico

Have the favicon(s) and/or path changed?

[nideKer]

I can't get this to work, either. I'm using docker-compose/Portainer and Wiki.js 2.5.294.

Hi,
I've checked my settings, - You should put in favicons folder a PNG image with name favicon-32x32.png for web.

So, this parameter should works properly
#3371 (comment)

[jeffshead]

Thanks! Working now. Had a typo in my path.

[liunnn1994]

In 2.5.295 ,overwrite files didn't work for me. Here is my docker-compose.yml

  db:
    image: postgres:11-alpine
    environment:
      POSTGRES_DB: wiki
      POSTGRES_PASSWORD: ******
      POSTGRES_USER: wikijs
    logging:
      driver: "none"
    restart: unless-stopped
    volumes:
      - db-data:/var/lib/postgresql/data

  wiki:
    image: ghcr.io/requarks/wiki:2
    depends_on:
      - db
    environment:
      DB_TYPE: postgres
      DB_HOST: db
      DB_PORT: 5432
      DB_USER: wikijs
      DB_PASS: ******
      DB_NAME: wiki
    restart: unless-stopped
    ports:
      - "3000:3000"
    volumes:
      - /www/wwwroot/wiki/favicons:/wiki/assets/favicons
      - /www/wwwroot/wiki/favicon.ico:/wiki/assets/favicon.ico
volumes:
  db-data:

I have already create all icon files in my host. And chown to 1000:1000, but didn't work.
When i open icon url in browser I get strange response:
myhost/_assets/favicons/favicon-32x32.png ❌ (wiki.js icon)
myhost/_assets/favicons/android-chrome-192x192.png ❌ (wiki.js icon)
myhost/_assets/favicons/favicon-16x16.png ✅ (my own icon)
myhost/_assets/favicons/safari-pinned-tab.svg ✅ (my own icon)

I try Edge/Chrome/Firefox and open in Incognito Window, still not working.
Can someone help me 😭.

[liunnn1994]

My Nginx error, sorry

[Astorek86]

Hello, can you please elaborate what exactly did you do? I have exactly the same error; 32x32 and 192x192 won't work, 16x16 and pinned-tab work. What am I doing wrong? Would really appreciate it^^.

EDIT: Of course, I'm hanging for ~45 Minutes of Trial&Error, finally allow myself to ask someone to help, and 2 minutes later everything works. I have no idea why it's working all of a sudden...

[liunnn1994]

Me too, I only restart my nginx a few times.

[stanleyondrus]

I found an easy workaround until this feature gets implemented in V3:

1. Go to Administration > Theme
2. In the Head HTML Injection field, paste the following code:
3. Replace <YOUR_LINK> with the full link to your favicon, then click Apply.

<script>
  document.querySelectorAll('link[rel=icon],link[rel=apple-touch-icon],link[rel=mask-icon],meta[name=msapplication-TileImage]').forEach(function(node) {
    node.setAttribute(node.hasAttribute("content")?'content':'href', '<YOUR_LINK>');
  });
</script>