파비콘(favicon)은 웹사이트를 대표하는 아이콘을 말하며, 보통 인터넷 웹 브라우저의 주소창 혹은 즐겨찾기 이미지로 사용된다. 사파리 브라우저의 경우 파비콘이 있으면 그 이미지로 표시가 되지만, 파비콘이 없으면 웹사이트 정보를 활용하여 텍스트가 나오곤 한다. 파비콘이 있어줘야 웹사이트 다운 모습이 갖춰지는 듯 하다.
favicon 파일 설정하기
파비콘을 웹사이트에 설정하려면, favicon.ico 이름의 이미지파일이 필요하다. 확장자가 익숙치 않아서 다른 포맷도 되는지
구글링을 해보니 png 같은 일반적인 이미지 확장자도 가능하다해서, favicon.png 파일의 이미지를 하나 만들었다. 이런 정적인 파일은 hugo 프로젝트내에 static 폴더에 위치시켜야 한다. 그냥 넣기는 그래서 중간에 images 라는 중간 폴더도 만들었다. 최종 파일위치는 아래 그림과 같다.
favicon 파일을 어디서 셋팅하는가? 파비콘 정의하는 소스는 html <head> 태그내에 위치하기 때문에, /layouts/partials/head.html 파일에 관련 소스가 있을 것 같았다. 열어서 자세히 살펴보니 역시나 아래의 소스를 찾을 수 있었다. 결국 .Site.Params.favicon 값이 있을때 html 소스가 만들어지다보니, 해당 값을 셋팅해야 한다.
{{- with .Site.Params.favicon }}
<link href='{{ . | absURL }}' rel='icon' type='image/x-icon'/>
{{- end -}}
그 .Site.Params.favicon을 셋팅하려면, Hugo 에서 제일 중요한 설정파일인 config.toml 에 파비콘의 위치를 셋팅해야한다. 그 방법은 아래와 같다. [Params] 하위에 파비콘 경로를 셋팅만 하면 된다.
[Params]
favicon = "images/favicon.png"
이제 Hugo 프로젝트를 빌드하고 웹사이트에 적용하면 끝이다. 사파리 웹브라우저에서 탭별로 보통 웹사이트의 파비콘이 나오는 자리가 있는데, 내가 적용한 이미지가 잘 나오는 것을 확인했다.
ggplot2 로 파비콘 만들기
파비콘은 웹페이지 데스크톱바로가기, 즐겨찾기, 주소창 등 다양하게 활용되다보니, 그 사이즈를 여러가지버전을 만들어서 사용되도록 셋팅이 가능하다. 나는 가장 192x192 픽셀 사이즈로만 만들었는데, 3KB 정도의 용량이 되었다. 그리고 나는 파비콘을 ggplot2 를 이용해서 그래프 모양으로 만들었고, 아래의 ggsave 함수로 손쉽게 사이즈 조정해가면서 만들었다.
ggplot2::ggsave("./경로/favicon.png",
width = 192, height = 192, dpi = 120, units = "px")