<문제> 파비콘(Favicon) 만드는 방법.

  티스토리, 네이버 등 사이트를 불문하고 웹페이지를 본격적으로 운영하려 할 때 아이콘 이미지를 정하곤 한다. 그런데.. 웹 브라우저에 뜨는 이미지는 '파비콘'이라고 하여 별도의 .ico 확장자 파일이 필요하다.^{[각주:1][각주:2]}

빨간 펜으로 동그라미 친 요거!

  잡설이 길었네, 본론으로 바로 들어가자. 아마 이 페이지에 들어오신 분들께선 파비콘을 어떻게 만들어야 할 지 고민이실텐데, 2가지 방법이 있다. 그리고 각각의 장단점을 정리해보겠다.

1. 웹사이트에서 변환

https://www.convertico.com/favicon/

위의 사이트 들어가서 에서 변환할 수 있다.

① browse 버튼 눌러 대상 이미지파일 업로드 (gif, jpg, png 파일 가능)

 ② size 선택. 보통 16x16을 많이 쓴다지만, 32로 해도 무방할 듯? 마음가는대로 하면 되겠다.

 ③ create 버튼을 클릭하면 페이지 오른쪽에 ico 파일이 생성되며, 다운로드 받으면 된다.

  이렇게 생성된 ico파일의 퀄리티는 괜찮은 편. 하지만 외부 사이트에 내 파일을 올린다는 게 껄끄럽기도 한데다 번거롭다. 그래서 더 간단한 방법을 소개해드리자면..

2. png 파일 확장자 강제변환

  간단하다. 그냥 기존에 있던 이미지 파일의 확장자를 ico로 강제 변환시키면 된다. 먼저 16x16(혹은 32x32) 크기의 이미지 파일을^[각주:3] 만든 다음..

노란색으로 강조된 부분을 요렇게 바꿔주면 된다.

예.

끝. 이게 전부다.

  다만, 이미지 크기를 자체적으로 리사이징한 경우, 이미지 품질이 조금 떨어져보이더라. 이 점은 감안해야 할 듯..

  위의 2가지 방법 중 자유롭게 선택하셔서 파비콘을 손쉽게 만드시길 바란다. 이번에 아이콘을 새로 만들면서 직접 경험한 것인데, 이 글을 보시는 분들께 도움이 되었으면 한다.

위 예제파일의 원본으로 포스팅 마무리!

1. 파일 이름은 보통 favicon.ico 로 정하는 편이지만 다른 이름으로 지정해도 무방하다. [본문으로]
2. 단, 일반 웹페이지에서 파비콘 파일 이름을 다른 이름으로 지정한 경우엔 해당 페이지에 의 html 태그를 삽입해야 한다. 그러니 그냥 favicon.ico로 정하는 게 속편하다. [본문으로]
3. 개인적으론 gif나 png 확장자가 좋더라. jpg는 투명색 배경이 안되기 때문. [본문으로]