사이트 이용해서 파비콘(favicon) 만들기
목차
1. 파비콘(favicon)이란 무엇인가?
2. 파비콘(favicon) 변환하기
3. 적용 모습
1. 파비콘(favicon)이란 무엇인가?
파비콘이란 Favorite과 Icon의 합성어로 웹 브라우저의 즐겨찾기나 주소 창에 뜨는 웹사이트 아이콘을 말합니다. 아래와 같이 각 사이트별로 파비콘이 설정되어 있는 것을 볼 수 있습니다.
사진 파비콘은 크기가 16×16 [px]로 작기 때문에 최대한 간단하게 자신의 홈페이지를 나타낼 수 있게 만드는 것이 포인트입니다.
위 사진의 파비콘들도 최대한 간단하게 작성되어 있는 것을 확인할 수 있습니다.
파비콘이 홈페이지 등을 운영하는 데에 필수요소는 아니지만 자신의 홈페이지를 표현하고 각인시킬 수 있기 때문에 가능하다면 넣어주시는 것이 좋습니다.
2. 파비콘(favicon) 변환하기
파비콘을 생성하기 위해서는 PNG 또는 JPG(JPEG) 등의 정사각형의 이미지 파일이 준비되어야 합니다.
파일의 크기는 50MB 이하이면 되기 때문에 크게 문제 되지 않고, 이미지도 정사각형이 아니더라도 만드는 과정에서 정사각형으로 자를 수 있기 때문에 신경 쓰지 않으셔도 됩니다.
하지만 이미지 파일명을 한글로 했을 경우에는 업로드가 제대로 되지 않는 오류가 발생할 수 있기 때문에 파일명은 영문 또는 숫자로 지정해주시기 바랍니다.
파비콘의 확장자는 ICO로 이와 같은 파일로 변환하기 위해서는 여러 가지 방법이 있지만 가장 간단한 방법인 사이트를 이용하는 방법을 설명드리도록 하겠습니다.
사이트도 여러 가지가 있지만 일반적으로 파비콘을 만들 때 무난하게 사용할 수 있는 icoconvert에서 진행하도록 하겠습니다.
아래 링크를 남겨두도록 하겠습니다.
https://icoconvert.com/ICO Convert – Create Icons From PNG & JPG Images OnlineICO Convert is a free online icon maker and favicon generator, with it you can make icons from png or jpg images, just upload a photo of yourself, resize and crop it, convert to a shape you like, add borders and shadows, and save it as a PNG image or Windoicoconvert.com
링크로 들어가시면 제일 처음에 나오는 화면입니다.
아래로 내려가면서 하나씩 살펴보도록 하겠습니다.
Step 1
그 아래에서 [파일 선택]을 클릭하여 준비된 파일을 올려주고 [Upload] 버튼을 눌러줍니다.
그렇게 되면 아래에 [Successfully uploaded]와 같이 성공적으로 업로드되었다는 문구가 나옵니다.
Step2
업로드됨과 동시에 자신이 업로드 한 파일이 아래에 나타나게 되며 여기서 원하는 부분을 드래그하여 크롭(자르기)이 가능합니다. 원하는 부분을 클릭하여 드래그하면 자동으로 정사각형으로 크롭 되기 때문에 원본 사진이 직사각형이어도 상관은 없지만 중요 부분은 정사각형 안에 들어올 수 있는 이미지를 선택해주셔야 합니다.
Step 3
액자형 식이나 기울기, 하트 모양 등의 스타일을 적용할 수 있는 부분입니다. 원하시는 스타일이 있다면 선택해주셔도 되지만 원형을 제외하고는 그다지 추천할만한 것은 아닌 것 같습니다. 참고로 구글도 원형으로 된 파비콘을 사용하고 있습니다.
저는 선택하지 않고 진행하도록 하겠습니다.
Step 4
아이콘 포맷을 정하라고 하지만 아래쪽에 변환하는 부분이 있기에 여기에서는 사이즈를 설정했습니다.
티스토리에서 원하는 파비콘의 크기는 16×16이므로 그것을 선택하고 넘어가도록 하겠습니다.
Step5
변환과 다운로드를 하는 마지막 단계입니다.
파비콘은 ICO확장자를 가지므로 ICO파일로 변환하기 위해 [Convert ICO]를 클릭해줍니다.
그럼 다음과 같이 아래쪽에 다운로드할 수 있는 버튼이 생성되고, 클릭하여 다운로드를 하여줍니다.
다운로드한 파비콘을 등록하면 다음과 같이 나타나게 됩니다.
파비콘은 간결하게 작성해야 하는 것이 포인트라는 것을 꼭 기억해주시기 바랍니다.
출처 naggong.tistory.com