본문 바로가기

iOS 앱 개발 :: APP DEVELOPMENT/제로보드 XE

파비콘(favicon) 초간단 쉽게 만드는 방법

반응형
홈페이지 또는 블로그에 파비콘(Favicon) 등록을 위해서 ICO 초간단 쉽게 만드는 방법

블로그, 혹은 제로보드 등을 이용해서 홈페이지를 운영하시는 분들은 파비콘(Favicon)에 대해서 한 번쯤은 들어보았을 것입니다. 포털이나 기타 유명한 웹사이트들을 방문할 경우 웹브라우저 주소창 앞에 보여지는 자신들의 홈페이지 또는 블로그 아이콘이 바로 파비콘(favicon) 입니다. 아래의 이미지속 주소창 마크가 바로 본 홈페이지 파비콘이 적용된 모습입니다.

파비콘(favicon)



이 파비콘(favicon)은 이름에서 알수 있듯이 영어단어 합성어 입니다. 즐겨찾기를 의미하는 'favorites' 와 아이콘을 의미하는 'icon'의 합성어가 바로 파비콘(favicon) 입니다. 이번 시간에는 이 파비콘을 아주 손쉽게 관련 프로그램이나 앱 없이도 만드는 방법에 대한 팁을 알려 드립니다.

먼저, 준비하실 것은 정사각형 사이즈(16x16, 32x32, 64x64 등의 규격)로 파비콘으로 만들 jpg, png, gif 등의 이미지 파일포맷을 우선 만들어 줍니다. 그리고 파비콘을 등록하기 위한 아이콘 파일 규격인 'ico' 확장자 파일로 변환을 해 줄 것입니다. 웹브라우저 파비콘으로 만들 이미지가 준비되었으면 파비콘 ico 이미지 파일 포맷으로 변환할 수 있는 이 웹사이트로 접속합니다.

그리고, 아래와 같이 준비된 이미지 파일을 파비콘 ico 파일로 변환하기 위한 과정을 진행합니다.

파비콘 만들기


위와 같이 해당 웹사이트에 접속하면 나타나는 파비콘(favicon)을 만들기 위한 플래시가 나타납니다. 여기서, 'Get Started' 버튼을 클릭해서 위에서 준비한 파비콘으로 만들 이미지를 자신의 컴퓨터 디렉토리에서 선택한 후 다음 단계로 진행합니다.

파비콘 만들기 favicon size


위와 같이 파비콘으로 만들 ICO  파일의 크기를 정하는 단계가 나타나는데요. 여기서, 우리는 웹브라우저 주소창에 사용될 ICO 파일이 필요하므로 가장 작은 적당한 사이즈인 16x16을 선택해 줍니다. 그리고 다음단계를 진행하면 자신의 컴퓨터 디렉토리에 변환된 파비콘으로 등록이 가능한 ICO 파일이 저장되어 있을 것입니다.

이 파비콘 ICO 아이콘 파일을 웹서버에 올려주고 다음과 같이 HTML 태그를 HEAD 태그 사이에 입력해 주면 됩니다.

<link rel="shortcut icon" href="./파비콘의 이름.ico">

위의 파비콘 태그에서 파비콘의 이름은 경로를 포함해서 적어주시면 됩니다. 절대경로든 상대경로든 상관없이 저장한 서버상의 ICO 주소를 입력해 주시면 됩니다. 제로보드 XE 에서는 관리자 페이지 설정에 바로 파비콘(favicon) 등록하는 란에서 입력과 업로드를 해주시면 되구요. 티스토리 블로그의 경우도 관리자 페이지에서 설정 및 업로드 해주시면 됩니다.

이상으로, 파비콘(favicon) 초간단 쉽게 만드는 방법과 등록방법에 대한 팁이였습니다.

반응형