티스토리에 파비콘 쉽게 넣어보자!🍓

파비콘은 브라우저에 작은 이미지를 넣어 고유 웹페이지를 표시하는 기능으로 사용됩니다.
파비콘으로 변환해주는 사이트로 간단하게 만들 수 있습니다.
만드는 방법은 포토샵을 이용하거나 미리캔버스를 이용할 수 있습니다.

 

 

• 파비콘 사이즈
• 파비콘 해상도
• 파비콘 만들때 배경 투명하게 만들기
• 파비콘 미리캔버스로 만들기
• 파비콘 포토샵으로 만들기
• 티스토리에 파비콘 넣기

티스토리 파비콘 추가

 

  파비콘의 사이즈와 해상도

파비콘의 기본 사이즈는 16x16 픽셀입니다.
파비콘의 해상도는 72 dpi로 만들어주면 됩니다.
색상모드는 RGB입니다.

 

 

  파비콘 배경 투명하게 만들기

 

파비콘 만들때 배경을 투명하게 만들려면 파일 확장자가 png이여야 합니다.
jpg로 저장하면 배경이 흰색으로 들어갑니다.
아래 설명에 미리캔버스와 포토샵에서 배경이 투명한 png 파일로 저장하는 방법이 있습니다.

 

 

  파비콘 미리캔버스로 만들기

1. 디자인 만들기에서 웹용 >  가로 32픽셀, 세로 32픽셀로 입력하고 새 디자인 만들기를 클릭해서 캔버스를 만듭니다.

 

 

 

2. 저는 이렇게 파비콘 이미지를 그렸습니다.

 

 

 

3. 흰색배경이 투명하도록 저장하려면 png 파일로 저장해야합니다.
① 우측 상단에 있는 다운로드 버튼을 클릭하고 웹용을 선택하세요.
② 그리고 PNG 네모그림을 선택해줍니다.
③ PNG 옵션에서 투명한 배경 앞에 체크를 해주고 빠른 다운로드 버튼을 클릭합니다.

 

 

 

4. 파비콘으로 만들 이미지가 배경이 투명한 상태 PNG 파일로 다운로드 받아졌습니다.
여기까지 파비콘을 만들 png 파일 이미지가 만들어졌습니다.
다운로드 받은 png 파일은 영문으로 변경해주세요.
다음으로는 파비콘을 만들어주는 사이트를 이용해야 합니다.

 

아래 포토샵으로 파비콘 만들어주는 내용를 지나서 밑에 파비콘 만들어주는 사이트 이용방법이 있습니다.
그 내용을 보세요.

 

  

 

 

 

  파비콘을 만들때 포토샵을 이용하기

1. 포토샵에서 File > New를 선택하여 새창을 만듭니다.

 

 

 

 

2. 새창의 이름을 아무거나 적어주고 가로와 세로 사이즈를 16 픽셀로 입력합니다.
파비콘 배경이 투명하게 하려면 Background contents에서 Transparent를 선택하고 OK를 클릭합니다.

 

 

 

3. 여기에 파비콘으로 쓰일 이미지를 만듭니다.
딸기를 그렸습니다.
배경에 색을 넣고 싶다면 레이어를 추가해서 배경을 만들 수 있습니다.

 

 

 

4. 저장할 때는 Save for Web...을 클릭해 저장합니다.

 

 

 

5. 저장하기 화면에서 Preset은 PNG-24로 선택하고 Transparency에 체크가 되어 있어야 합니다.
그리고 Save...를 클릭해서 저장하세요.

 

 

 

이렇게 png 파일로 파비콘이 될 이미지를 내 컴퓨터에 저장했습니다.
이제는 파비콘 만들어주는 사이트에 접속합니다.

 

 

 

  파비콘 만들어주는 사이트

 

파비콘을 만들어주는 사이트에 접속하면 아래와 같은 화면이 나옵니다.
여기에서 숫자가 씌여진 차례대로 클릭하면 됩니다.

 

Favicon & App Icon Generator

1. 파일 선택을 클릭해서 아까 저장해 놓은 png 파일을 불러옵니다.
2. Generate only 16x16 favicon.ico를 선택해서 파비콘 16x16 ico 파일을 만들다고 선택합니다.
3. Create Favicon을 클릭하여 ico 파비콘 파일을 만듭니다.

 

 

위의 선택사항에 대해서 더 자세히 보고 싶다면 아래 페이지에서 내용을 확인한세요.👇

파비콘 만들기 사이트, ico 파일 생성 사이트

 

 

만들어진 파비콘을 다운로드 합니다.
파비콘 이미지 옆에 있는 Download the generated favicon을 클릭하면 다운로드 받아집니다.

 

 

 

아래와 같이 파비콘 ico가 다운로드 되었습니다.
png 파일과 헛갈리지 마세요.
파비콘 ico는 png 파일보다 크게 보입니다.

여기까지 파비콘이 완성되었습니다.
다음으로는 티스토리에 파비콘을 넣어보겠습니다.

 

 

  티스토리에 파비콘 넣기

 

1. 티스토리 관리창으로 들어가서 제일 하단에 있는 블로그를 클릭합니다.

 

 

 

블로그 관리창에서 파비콘 항목이 있습니다.
불러오기 버튼을 클릭해서 아까 저장해 놓았던 파비콘 ico를 불러옵니다.

 

 

 

불러오기해서 파비콘 미리보기 창에 보여지는 것을 볼 수 있습니다.
변경사항 저장 버튼을 클릭하세요. 그래야 적용됩니다.

 

 

키보드 F5키를 눌러서 새로고침하니 티스토리에 파비콘이 적용된 것을 볼 수 있습니다.
티스토리에 파비콘 넣기가 완성되었습니다.

 

 

나의 티스토리에 파비콘을 넣어서 표시해보세요.

 

티스토리에 애드센스 코드 자동으로 넣기

티스토리 댓글아이콘 나오게 하는 방법

티스토리에 sns 공유할 수 있는 아이콘 넣기(티스토리 플러그인 이용 : 아주 쉬움)