파비콘 만들기 홈페이지와 티스토리에 즐겨찾기 아이콘 이미지를 넣는 방법(ICO변환하기)

"파비콘이 뭐예요?"

'파비콘'이 뭐예요? 라고 묻는다면 웹사이트 홈페이지를 대표하는 아이콘 이미지를 말합니다. 즐겨찾기(favorites)와 아이콘(icon)을 합성하여 파비콘(favicon)이라고 부르는 거죠. 일반적으로 회사를 대표하는 로고를 픽셀아트화 해서 사용하죠. 이런 아이콘을 등록하지 않아서 로고 이미지가 없는 상태로 즐겨찾기에 등록되는 웹사이트를 보신적 있으실거예요.

 

이렇게 파비콘을 사용하려면 ICO파일이 있어야 합니다. ICO파일은 16*16 사이즈로 만들어지죠. 사실 이 파비콘은 직접 도트를 찍어서 만들어야 하지만, JPG와 PNG 파일을 변환해서 쉽게 만드는 방법이 있습니다. 오늘은 파비콘을 쉽게 만드는 방법을 알려드리겠습니다.

 

https://www.favicon.cc/

favicon.ico Generator

 

favicon.cc 사이트로 이동을하면 이미지를 파비콘으로 만들어주는 창이 나타납니다. 원래는 저기 컬러 파레트에서 색을 골라서 마우스로 일일히 클릭해서 만들어야 하지만, 우리는 이미지로 만드는 방법을 해보려고 해요. 왼쪽 상단에 Import Image를 클릭하시면 사진을 고를 수 있는 창이 나오게 됩니다. 아래처럼요.

파일 선택을 클릭해서 이미지를 불러오면 됩니다. 불러오는 이미지는 배경이 투명인 이미지를 불러오는게 좋습니다. 흰배경의 로고를 불러오게 된다면 웹사이트에 즐겨찾기를 등록했을 때 흰 바탕이 그대로 저장이 되죠. 만약 배경이 흰색으로 된 로고파일밖에 없다면 배경을 지워줘야 합니다.

 

흰 배경의 로고를 불러왔습니다. 아래 Preview를 보면 어떻게 뜨는지 확인할 수 있습니다. 그럼 흰색으로 표시된 영역을 모두 투명하게 지워주도록 하겠습니다.

 

지우개 도구를 선택해서 흰색 부분을 지워줍니다. 노란색과 회색의 빗살픽셀이 투명배경이 적용이 된 상태입니다. 일반적인 편집프로그램은 실수로 클릭을 하게 되면 ctrl+z 로 다시 할 수 있지만, 여기서는 클릭 한번 잘 못하면 스포이드로 주변 색상을 추출해서 수정해줘야하니 신중한 클릭이 필요합니다.

배경을 모두 투명으로 바꿔줬습니다. 그러면 하단에 있는 다운로드 파비콘 메뉴를 클릭해서 파비콘을 다운로드 해줍니다. 그러면 ICO 파일을 다운로드 받게 됩니다.

만들어진 ICO 파비콘 파일입니다. 이제 이 파비콘을 홈페이지에 적용하면 되는데요. 저는 티스토리에 적용해봤습니다. 티스토리에 적용하는 방법도 알려드릴게요.

티스토리 설정에서 최하단에 관리-블로그를 클릭하면 소개부분 아래에 아이콘과 파비콘 부분이 있습니다. 여기서 파비콘 불러오기를 클릭해서 만들어둔 파일을 등록하면 끝!

그럼 첫 이미지처럼 이렇게 적용이 되게 됩니다. 아직 파비콘을 적용하지 않은 사이트가 있다면 이번 기회에 한번 적용해보면 어떠실까요? 

 

---

추천 포스팅

동영상 자르기와 동영상 확장자 변환을 간편하게, Avidemux 다운로드

---

사회복지 정보채널 복지꿀팁 welfaretip.com

---

 

↓ 정보가 유용하셨다면 공감과 공유하기 부탁드립니다.