본문 바로가기
IT 이야기

파비콘(favicon)이란? 파비콘 ico 만드는 방법

by 일상행복 주식회사 2024. 10. 4.
반응형

파비콘(favicon)이란? 파비콘 ico 만드는 방법

 

 

파비콘(favicon)이란 무엇일까요?

키스토리 블로그 하면서 블로그 설정하는 곳에 아이콘과 파비콘을 설정하는 부분이 있는데, 지금까지 관심을 두지 않다가 문득 궁금해서 설정을 해 봤습니다.

 

파비콘(favicon)은 즐겨찾기 아이콘(favorites icon)의 줄임말로, 특정 웹사이트에 방문했을 때 웹사이트 주소 옆이나 브라우저 탭에 나타나는 작은 아이콘을 가리킵니다.

 

티스토리 블로그에 등록할 파비콘을 이미지를 이용하여 간단하게 만드는 방법을 정리했습니다.

 

파비콘은 웹사이트를 대표하는 아이콘을 의미하며 확장자는 .ico를 갖고 있습니다.

특정 웹사이트에 방문했을 때 웹사이트 주소 옆이나 브라우저 탭에 나타나는 작은 로고가 바로 파비콘인 것입니다.

 

파비콘 크기는 보통 16x16픽셀인데, 32x32, 48x48, 64x64도 가능하며, 크롬은 물론 인터넷 익스플로러, 파이어폭스, 엣지 등의 브라우저에서 모두 지원합니다.

 

티스토리 블로그 관리자 페이지 제일 하단 메뉴 중 [관리] - [블로그]에 들어가면 블로그 설정하는 다양한 내용들이 있습니다.

블로그 이름, 블로그 닉네임, 블로그 설명 등이 있고, 그 아래에 아이콘과 파비콘 등록하는 게 있습니다.

 

아이콘은 일반 이미지 사이즈를 줄여서 정사각형 크기의 32x32, 64x64 픽셀로 만들어서 넣으면 되고요.

파비콘은 이미지형식이 아닌 아이콘(.ico) 형식이라 별도로 만들어 사용해야 합니다.

 

 

인터넷 브라우저를 열어 보면 다음이나 네이버 등 앞에 작은 이미지로 나타나는 것이 바로 파비콘입니다.

이렇게 보면 파비콘이 무엇인지 파악이 될 것입니다.

 

가장 간단하게 가지고 있는 이미지를 파비콘 아이콘(.ico)으로 만드는 방법을 알아 보겠습니다.

 

원하는 이미지를 준비하시면 되는데요.

파비콘은 다른 사이트의 파비콘처럼 영문자 이니셜을 디자인해서 만들거나 저처럼 튤립 이미지를 그냥 파비콘으로 변경해서 사용해도 됩니다.

 

새로 만든다면 포토샵이나 그림판에서 간단하게 만들 수 있습니다.

 

 

 

이미지파일을 파비콘으로 자동 변환시켜 주는 사이트가 있습니다.

 

파비콘 변환하러 바로가기

 

이곳에 들어가서 [Image]의 [파일 선택]을 해서 파비콘으로 변환하고자 하는 이미지를 불러옵니다.

 

파비콘으로 변환하고자 하는 이미지를 불러왔으면, 바로 우측의 [Create Favicon]을 선택합니다.

 

그럼 파비콘 이미지가 만들어지고, 보이는데요.

그 옆의 [Download the generated favicon]을 클릭합니다.

 

파비콘으로 바꾸고자 하는 원본 이미지와 다운로드한 파비콘 이미지

압축을 풀어 줍니다.

 

압축을 풀면 각기 다른 사이즈로 만들어진 많은 이미지가 생성이 되는데요.

우리가 필요한 파비콘 이미지는 확장자가 ico인 [favicon.ico]입니다.

 

이제 이 파일을 티스토리 블로그 설정에서 파비콘으로 등록하면 됩니다.

각자 원하는 파비콘이 있다면 이미지로 만들어서 위의 파비콘 변환 홈페이지에서 변환해 사용하면 되겠습니다.

 

 

반응형

댓글