티스토리 간편하게 파비콘(Favicon) 만들기

티스토리 간편하게 파비콘(Favicon) 만들기

파비콘은 이전에는 PC에만 사용하는 전유물처럼 여겨져서 PC환경의 파비콘만 생성을 하면 되었지만, 요즘은 PC를 비롯하여 아이패드와 같은 태블릿, 아이폰, 갤럭시와 같은 스마트폰에서도 파비콘을 사용하게 되었습니다. 

파비콘은 Favorite + icon 의 합성어로 좋아하는 아이콘이라는 의미로 인터넷 주소 앞의 이미지, 즐겨찾기 등에서 이미지를 사용하여 자신의 사이트, 블로그등 알아보기 쉽게 할수 있습니다.

파비콘의 경우 일반적으로는 ico 라는 확장자를 가지지만 사용하는 기기에 따라서 ico, png 등도 사용하고 있으며, 개인이 직접 이미지 툴을 이용하여 만들수도 있지만, 파비콘을 만들어주는 사이트를 이용하시면 더욱 더 편리하고 간편하게 만들수 있습니다.

파비콘을 만들어 주는 사이트

1. Genfavicon 

사이트 주소 : http://genfavicon.com/

2. Favicon Generator

사이트 주소 : http://favicon-generator.org/

파비콘 제너레이터에서는 원하는 디자인으로 생성도 가능합니다.

3. Real Favicon Generator

사이트 주소 : http://realfavicongenerator.net/

위의 사이트 이외에도 파비콘을 만들어 주는 사이트가 많이 있습니다. 이 중 요즘시대에 발맞춘 일반 PC용 파비콘을 비롯하여 태블릿 등 다양한 스마트 기기에서도 사용할 수 있도록 다양한 사이즈를 한번에 만들어 주는 사이트가 Real Favicon Generator 입니다.

리얼 파비콘 제너레이터를 이용하여 파비콘 만들기

1. 리얼 파비콘 제너레이터 사이트에 접속하기.

http://realfavicongenerator.net/ 로 접속을 합니다.

2. Check your favicon 에 자신의 사이트 주소 또는 블로그 주소를 입력하여 파비콘 사용 유무를 확인 합니다.

저의 블로그 사이트를 입력해 보았습니다. Overview 아래에 Desktop PC, Android, iOS, Windows 8에서의 파비콘 사용 현황을 보여줍니다. 현재는 데스크톱 피씨만 티스토리 기본 파비콘을 사용하고 있습니다.

3.  첫페이지로 돌아와서 Select your Favicon picture 를 클릭하여, 사용할 파비콘 원본 이미지를 선택합니다.

여기서 주의 할 사항은 데스크탑 PC 용 파비콘만 생성을 하는 것이 아니라, 안드로이드, iOS,  Windows 8 용 파비콘도 생성을 하기 때문에 가로, 세로 사이즈가 260픽셀 이상의 이미지를 업로드 하여야 합니다.

4. 업로드가 진행되며, 파비콘을 생성하고 있습니다. 

5. 파비콘이 생성이 되면, iOS, Windows 8 에서 보여질 파비콘을 보여줍니다.

6. 아래를 보시면, Generate your Favicons and HTML code 를 클릭합니다.

옵션 사항으로 파비콘 이미지의 경로를 설정을 할 수도 있습니다. 자신의 패스에 맞게 설정도 가능합니다. 여기서는 기본 옵션으로 진행을 합니다.

7. 생성된 파비콘 파일을 다운로드 합니다.

기본적으로 파일의 패스만 정확하다면, 함께 제공표시되는 소스 코드도 함께 복사를 하셔서 사용하시면 됩니다.

파비콘 파일은 zip 형식의 압축 파일이며, zip 파일을 해제하면, 많은 파비콘이 만들어진것을 볼 수 있습니다. 

일반적으로 파비콘 파일의 입력 HTML 코드 형식은 아래와 같습니다.

<link rel="shortcut icon" href="파비콘 이미지 주소">

그러나 요즘은 사용하는 스마트 기기에 따라서 조금씩 다릅며, 코딩하기도 귀찮지만, 리얼 파비콘에서는 이미지와 동시에 소스코드도 만들어 주기 때문에 사용하기 편리하네요.

자신의 티스토리에 파비콘 등록하기

티스토리에 로그인 후 환경 설정 → 기본 설정을 클릭합니다.

중간쯤 보시면 아이콘, 파비콘이 보입니다. 아이콘 부분에는 jpg, png 파일을 선택하여 등록을 하며, 파비콘 부분에는 ico 형식의 파비콘을 선택하고 저장합니다.

브라우저에 파비콘이 나타난 것을 확인 할 수 있습니다.