카페24 ) 파비콘 만드는 방법 & 등록 방법

 

 

 

 

이번 포스팅에서는 파비콘 만드는 방법과 카페24 쇼핑몰에서 등록하는 방법을 알아보겠습니다.

 

 

 

 

 

 

 

#1 파비콘이란?

 

파비콘은 즐겨찾기(favorites)의 'fav'와 아이콘(icon)의 합성어로 브라우저 주소창 왼쪽 노출되는 16px X 16px의 작은 아이콘입니다.

 

 

 

또한 브라우저의 열린 탭 목록 및 북마크 목록에서 사이트 이름 옆에 표시되는 경우가 많기 때문에 사용자가 사이트를 쉽게 식별할 수 있습니다.

파비콘의 확장자는 ico 인데, 이 ico 는 포토샵에서는 저장할 수 없는 파일 형식이기 때문에 png나 gif 등의 이미지로 제작한 다음, 파비콘 변환 사이트를 통하여 확장자 변환을 해주어야 합니다.

 

 

 

 

 

 

 

#2 파비콘 예비 이미지 만들기

먼저 포토샵에서 png 이미지를 만들어 보겠습니다.

파비콘은 16px X 16px 로 노출됩니다.

포토샵에서 동일 사이즈의 png 이미지로 제작하였습니다.

 

 

 

 

 

 

 

#3 ico 확장자 파일 만들기

일반 이미지 편집 프로그램에서는 ico 파일을 제작할 수가 없기 때문에 제작한 이미지 파일을 무료 확장자 변환 사이트에서 ico 파일로 변환해주어야 합니다.

 

구글에서 'favicon generator' 라고 검색하면 여러 무료 변환 사이트를 확인할 수 있습니다.

이런 변환사이트는 그 사용 방법이 파일 등록 > 변환 > 다운로드로 아주 간단하고 사이트마다 거의 비슷하기 때문에 저는 제일 위에 보이는 사이트에서 변환을 해보겠습니다.

 

 

 

이 사이트는 파비콘 뿐만 아니라 앱/웹용 아이콘 변환도 제공하고 있습니다.

기본으로 선택되어 있는 'Generate icons for Web, Android, Microsoft, and iOS (iPhone and iPad) Apps' 가 바로 그 기능입니다.

 

 

 

 1  저희는 파비콘을 만들 것이기 때문에 그 아래의 Generate only 16x16 favicon.ico 을 선택하겠습니다.

 2  파일선택 버튼을 클릭해 png 이미지를 선택한 다음

 3  'Create Favicon' 버튼을 클릭하면 파비콘 생성이 완료됩니다.

 

 

 

 4  완료 페이지에서 'Download the generated favicon' 버튼을 클릭하면 생성한 파비콘을 다운로드할 수 있습니다.

 

그 아래 What's next? 는 일반적으로 파비콘을 등록하는 html 작성 방법에 대해 안내되어 있습니다.

저희는 카페24 쇼핑몰에서 파비콘 등록 페이지를 통해 클릭 몇 번 만으로 간단하게 등록해보도록 하겠습니다.

 

 

 

 

 

 

 

#4 카페24 쇼핑몰에 파비콘 등록하기

ico 확장자로 만든 파일을 내 쇼핑몰에 노출될 수 있도록 등록해보겠습니다.

 

 

 

쇼핑몰 관리자페이지 > 디자인관리 > 디자인 기능설정 > 쇼핑몰 알리미 > 파비콘 설정 탭에서 파일 선택 버튼을 클릭 > ico 파일을 등록한 후 저장 버튼을 클릭합니다.

 

 

 

등록한 쇼핑몰에서 적용된 모습을 확인할 수 있습니다.

이상 ico 파비콘 파일 만드는 방법과 카페24 관리자 페이지에서 등록하는 방법을 알아보았습니다.