본문으로 바로가기

 

 

 

 

 

안녕하세요~! 유디입니다^^

오늘은 파비콘을 쉽게 적용하는 방법을 알려드리려고 합니다.

우선 파비콘이란 즐겨찾기 아이콘이라는 뜻으로 즐겨찾기(favorites)와 아이콘(icon)의 합성어입니다. 인터넷 창을 열었을 때 주소창에 조그만 아이콘으로 표시됩니다. 아래 이미지를 보시면 사이트마다 앞에 아이콘이 있는데 그게 바로 파비콘입니다. 해당 사이트의 얼굴이라고 생각하시면 되겠죠?^^
가장 앞에 있는 디자인 놀이터 블로그에는 파비콘을 등록하지 않아서 티스토리 블로그의 파비콘이 나타나고 있습니다. 이제 등록해 보겠습니다.

 

 

 

우선 티스토리 블로그 관리자 화면에 프로필 이미지 부분(T)을 클릭하시면 블로그 설정 페이지가 나옵니다. 아래 이미지를 보시면 제 블로그 관리자 화면인데요. 
프로필 이미지, 블로그 이름, 닉네임 수식어, 블로그 설명, 아이콘, 파비콘을 설정할 수 있습니다. 
저는 프로필 이미지와 아이콘, 파비콘을 같은 이미지로 등록하였습니다. 프로필 이미지와 아이콘은 원하는 이미지만 있으면 불러오기로 등록할 수 있습니다.

 

 

 

업로드할 이미지를 준비해 주세요.
포토샵이나 이미지 변환 프로그램을 열어서 사용할 이미지를 불러옵니다. 참고로 저는 포토샵을 이용하였는데 그림판으로도 가능하더라고요. 그래서 포토샵과 그림판 두 가지 방법 모두 알려드리겠습니다.

 

 

 

 

 

먼저 포토샵입니다. 


가로 세로 같은 비율의 업로드할 이미지를 불러옵니다. 포토샵 메뉴에서 이미지>이미지 사이즈를 선택합니다.

 

 

가로 세로 16픽셀로 바꿔줍니다.

 

 

 

그리고 다른이름으로 저장을 합니다. png 확장자로 저장해주세요.

 

 

 

저장된 파일을 찾아서 확장자 png를 ico로 수정합니다. 그럼 아래처럼 경고창이 뜨는데요. 그냥 "예"를 누르면 됩니다. 

 

이렇게 이미지가 깨지거나 안 나오는데 신경 쓰지 않으셔도 됩니다. 바로 블로그 관리자 페이지로 가서 불러오기로 등록하고 저장해주면 끝입니다~! 너무 쉽죠?^^

 

 

이젠 그림판에서 해볼까요?


그림판에서도 똑같습니다. 파일 불러오기로 업로드할 이미지를 불러옵니다. 마찬가지로 이미지는 가로 세로 비율은 같아야 하구요. 이미지 메뉴에 보시면 크기 조정이 있습니다. 픽셀로 바꾸고 16으로 변경합니다.

 

 

 

 

파일 > 다른 이름으로 저장 > png로 저장합니다. 

 

 

이후 과정은 포토샵과 마찬가지로 저장된 파일을 찾아서 확장자를 png에서 ico로 변경해주면 됩니다. 

정말 쉽죠? 누구나 할 수 있습니다~!!

 

 

 

드뎌~ 디자인 놀이터 블로그에도 파비콘이 생겼습니다~ㅎㅎ 자주자주 방문해 주세요~^^