Flask 블로그 제작기 (5) - 파비콘(Favicon)

플라스크로 서비스되던 구버전 블로그에서 옮겨왔습니다.

---

매 주 Flask로 블로그 제작에 대한 글을 쓰며 구글에 블로그를 노출시키려 애쓰고 있지만, 사실 블로그 운영을 해보신 분들은 아시겠지만 매우 귀찮습니다... 그래도 꾸준히 하나씩 올릴 때마다 구글 검색에 개선이 있음을 구글서치콘솔을 통해 보고 있기 때문에, 오늘 같은 날은 가벼운 마음으로 파비콘(favicon)을 어떻게 플라스크 블로그에 띄웠는지를 보여드리고자 합니다.

파비콘이란?

파비콘(favicon)은 위키백과에 따르면, favorites와 icon의 합성어로, 웹사이트를 대표하는 아이콘이라고 합니다. 우리가 자주 보는, 브라우저의 탭에 있는 아이콘, 예를 들면 위키백과의 "W" 모양과 같은 것이 파비콘인데요, 보통 16 x 16 픽셀의, .ico 확장자를 갖는 작은 이미지입니다.

플라스크에 파비콘 띄우기

플라스크로 만든 웹페이지에 파비콘을 띄우는 것은 어렵지 않습니다. 저도 플라스크 공식문서를 통해 쉽게 배울 수 있었는데요, 바로 다음과 같은 세 단계입니다.

1. 16 x 16 픽셀의 .ico 확장자 아이콘 이미지를 준비한다.
2. 플라스크 프로젝트에 static 폴더를 만들고, 여기에 이미지를 넣는다. 아마 저처럼 플라스크 튜토리얼을 잘 따라오신 분들은 static/style.css 라는 파일이 이미 static 폴더에 있을 것입니다. static 폴더는 이미지나 스타일 등 정적 페이지를 구성하는 데에 필요한 파일들, 예를 들면 이미지나 .css 파일들을 넣어두는 곳이죠.
3. base.html 상단부분에 아래와 같은 코드를 추가한다. favicon.ico에는 파비콘 파일 이름을 넣는다.

<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">

끝입니다. 쉽죠?

html의 link 태그는 다른 사이트에 링크를 거는 a 태그와 달리, 문서에서 다른 문서로 링크를 거는 태그입니다. link 태그의 rel에 쓰이는 shortcut icon 어트리뷰트는 이 링크가 아이콘을 가리킨다는 것이고, {{ url_for('static', filename='favicon.ico') }}라는 주소는 플라스크 사용자라면 이제는 알 수 있는, 특정 폴더(static)의 특정 파일(favicon.ico)을 가리키는 Jinja2 구문이죠.

추가) 그럼 파비콘은 어떻게 만들지?

그러면 대체 파비콘 .ico 그림은 어떻게 만드냐? 하면 당연히 포토샵으로 하거나, 그림판으로도 가능합니다. 저 같은 경우는 예전에 게임 만들던 때에 쓰던 도트, 또는 픽셀 아트(pixel art) 찍는 프로그램 Aesprite로 도트를 찍었습니다. 플라스크 속 난쟁이를 테라리움처럼 표현해봤는데, 좀 괜찮은가요?

한 줄 코드(와 몇 시간의 도트 노가다)면 괜찮으니, 여러분도 플라스크 웹사이트에 괜찮은 파비콘 하나 놓아보면 좋을 것 같습니다.