Wiki.js - favicon 설정

requarks/wiki:2

Container

CLI

개요

---

• Wiki.js의 favicon 변경을 하고 싶어 알아봤다.

favicon 수정 또는 Admin 페이지를 통해 변경

---

직접 파일을 넣고 HTML 코드를 추가 및 변경을 통하여 바꿔 주는 방법과 Admin 페이지를 통하여 변경하는 방법이 있다.
둘 중에 하나를 선택하여 진행하면 된다.

1. favicon을 직접 넣어 수정하는 방법

해당 방법은 버전 변경이 있을 시 적용이 안될 수 있음

파일 자체를 docker volume mount를 통하여 처리 가능

Wiki.js 코드에 따르면 favicon 부분은 assets/ 디렉토리 안에 들어있다.
Wiki.js 코드는 아래와 같다.
https://github.com/Requarks/wiki/blob/5ba36ee421a1ec1bc95b72e76b7185672355899b/server/master.js#L55
favicon 파일을 docker cp를 통하여 파일을 넣어 줄 수 있다.

docker cp ./favion.ico <container_name>:/wiki/assets/favicon.ico

Wiki.js의 template 파일 Rewrite

master.pug template file에 HTML 코드를 추가 해준다.
경로 : /wiki/server/views/master.pug (vim, nano 등의 에디터를 통하여 수정)

$ docker exec -it <container_name> vi /wiki/server/views/master.pug

//- Favicon이하에 favicon line을 추가 해준다.

link(rel='icon', type='image/vnd.microsoft.icon', sizes='256x256', href='https://<URL>/favicon.ico')

favicon.ico만 보일 수 있도록 default favicon 은 주석 처리

// link(rel='apple-touch-icon', sizes='180x180', href='/_assets/favicons/apple-touch-icon.png')
// link(rel='icon', type='image/png', sizes='192x192', href='/_assets/favicons/android-chrome-192x192.png')
// link(rel='icon', type='image/png', sizes='32x32', href='/_assets/favicons/favicon-32x32.png')
// link(rel='icon', type='image/png', sizes='16x16', href='/_assets/favicons/favicon-16x16.png')
// link(rel='mask-icon', href='/_assets/favicons/safari-pinned-tab.svg', color='#1976d2')

2. Admin 페이지를 통하여 변경하는 방법

Admin 페이지에서 테마 > 소스 코드 삽입 > Head에 넣기 HTML 코드를 추가 해준다.

link(rel='icon', href='https://<URL>/favicon.ico')

이후 Brower의 cache를 제거 후 Refresh 해주면 새로운 favicon이 보이게 된다.