파비콘에 대하여 들어보셨나요?

 

파비콘(Favicon)은 Favorite icon의 줄임말로 인터넷 주소창, 즐겨찾기 등에 웹 사이트를 추가 할때

나타나는 작은 아이콘을 말한다.

파비콘 예제
파비콘 예제

 

내 블로그나 사이트의 개성을 나타낼 수 있는 눈에 띄는 요소이다.

필수로 적용해주자.

(전 아직 안해서, 이제 정리하면서 적용해보려 합니다^^;)


- 파비콘 적용하기

포토샵 등의 툴로 16x16 사이즈(단위는 픽셀)의 페이지에 원하는 디자인 요소로 이미지 작업하여 PNG 파일로 저장 후에 해당 파일의 확장자를 ico로 변경 해주면 되겠습니다.

 

저의 경우에는 아이패드 프로로 그림을 그려(메디방 어플 사용) PNG파일로 저장 후 컴퓨터로 보내서 그림판으로 해당 파일을 열고 다른이름으로 저장시 .ico를 기입해서 만들었습니다.

 

참고로 그림판 작업시

그림판 작업시 나오는 팝업
그림판 작업시 나오는 팝업

위와 같은 팝업창이 나오는데, 무시하고 확인을 눌러주세요.

 

- 아이콘 적용하기

파비콘 만들기와 동일하게 진행하며 사이즈만 16이 아닌, 32x32 나 64x64로 페이지를 만들어 주시면 되겠습니다. 저는 64x64로 진행하였습니다.

 

아이콘 적용된 모습
아이콘 적용된 모습

 

 

블로그 관리 창의 세팅 상태
블로그 관리 창의 세팅 상태

 

 

- 홈페이지에 적용하기

FTP 접속 프로그램을 이용하여 서버에 업로드 후 <head>의 범위안에 아래와 같이 적용해주면,

<link rel="shortcut icon"href="/경로 및 파일 이름.ico">

 

 

반응형
  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기