파비콘 만들고 적용하는 방법

블로그/블로그 꾸미기
파비콘 만들고 적용하는 방법

파비콘(Favicon)이란?

파비콘은 즐겨찾기(favorites)와 아이콘(icon)의 합성어로 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘이다. 아이콘 크기는 16x16, 32x32, 48x48, 64x64 픽셀이 될 수 있고, 8비트, 24비트, 32비트 색상이 가능하다.

다음 포맷은 브라우저에 상관없이 호환되며 인터넷 익스플로러, 파이어폭스, 크롬, 오페라에서 모두 지원한다.
<link rel="shortcut icon" href="http://www.example.com/myicon.ico"/>

다음도 허용된다.
<link rel="shortcut icon" href="/somepath/myicon.ico"/>

위키백과, 패비콘

파비콘 만들기

파비콘을 만들기 위해 적당한 크기의 이미지(GIF, JPEG 또는 PNG)를 준비합니다. 필자는 블로그의 타이틀이 "블로마리 노트(Blomari Note)"이므로 타이틀의 첫 글자인 알파벳 B를 아래와 같이 32x32 크기의 png 이미지로 준비했습니다.

이미지 준비가 끝났으면 다음 사이트로 이동 합니다.
Favicon Generator : http://favicon-generator.org/

Favicon Generator

Favicon Generator-2

찾아보기를 클릭한 다음 준비한 이미지를 선택하고 파비콘을 생성합니다. 파비콘이 만들어지면 다운로드 링크를 클릭하여 컴퓨터로 저장합니다.

티스토리 블로그에 적용하기

#1. 관리자 > 환경설정 > 기본정보 > 아이콘 > 찾아보기 클릭 > 다운받은 파비콘 선택 > 기본정보 저장

티스토리 파비콘 설정

#2. 관리자 > 플러그인 > 플로그인 설정 > 상단메뉴 꾸미기 > 아래 그림처럼 블로그 아이콘 표시는 활성화하고, 홈페이지 아이콘 표시(파비콘)는 비활성화 합니다. 이렇게 설정하는 이유는 댓글창에 아이콘이 두개가 표시되는 것을 방지하기 위해서입니다.

티스토리 플러그인 설정

#3. HTML 문서 확인하기
티스토리 관리자 > HTML/CSS 편집 > skin.html 문서의 상단 <head>~</head> 헤드 태그 내에 아래와 같은 코드가 있는지 확인하고 없다면 추가해 주세요.

<link rel="shortcut icon" href="[##_blog_link_##]favicon.ico" />

이상으로 파비콘을 만들고 적용하는 방법을 마치겠습니다. 파비콘은 사이트의 명함이나 마찬가지이므로 지금 바로 설치하셔서 멋지게 꾸며보시기 바랍니다.

움직이는 파비콘이나 다양한 크기로 만들고 싶다면 다음 사이트를 이용하세요.
Favicon from Pics : http://favicon.htmlkit.com/favicon/

+ 댓글은 큰 힘이 됩니다. 1