파비콘(Favicon)이란 favorite icon 의 줄임말로, 사이트를 대표하는 아이콘을 말합니다.
이런거죠.
사이트에 이걸 넣어보려 합니다.
일단 아이콘을 만들어야 합니다!
파비콘을 만들 수 있는 사이트는 정말 많으니 그 중 하나를 이용해 보려 합니다.
일단 위 사이트에 접속해서 이용하고 하는 이미지를 업로드 하면 바로 다운로드가 됩니다.
주의할 점은 한글 이름은 안된다는 것!
그렇게 만든 파일은 압축된 상태로 다운이 되는데 그 중에서 favicon.ico파일을 이용하면 됩니다.
16x16 크기와 32x32 크기가 합쳐져서 만들어진 아이콘 파일입니다.
물론 PNG 나 GIF, SVG와 같은 형태도 파비콘으로 이용 가능합니다만, ico 파일이 간단하고 괜찮은 듯 합니다.
(지원이 안되는 브라우저도 있고 합니다. 지원하는 파일 포멧은 위키백과 에서 확인을! https://en.wikipedia.org/wiki/Favicon)
참고! 위 방법을 이용하지 않고 ico 파일 편집을 지원하는 이미지 에디터로도 작업이 가능합니다. 대표적으로 GIMP 를 이용하면 아주 편하게 만들 수 있습니다.
GIMP 이용해서 만들 때는 2개의 레이어를 이용해 16x16, 32x32 를 차례로 넣어서 저장하면 됩니다.
GMIP 를 이용해 저장할 땐 이런 식으로
사이트에 적용시키기!
일단! favicon.ico 라는 파일 이름으로 루트에 넣으면 별다른 작업 없이 바로 뜹니다.
일단 이 기능은 현재 사용하는 대부분의 브라우저에서 지원하기 때문에 가장 편하고 쉽게 사용할 수 있는 방법이 되겠네요.
그게 아니면 <link /> 태그를 이용해서 넣어주면 됩니다.
한 사이트에서 두개 이상의 파비콘을 이용하거나 ico 파일을 별도의 디렉토리에 넣을 경우에 사용하면 되겠습니다.
<link rel="shortcut icon" href="http://www.example.com/favicon.ico"/>
이런 식으로!
