투명배경 파비콘 쉽게 만드는 방법, 티스토리 적용 하기

 

투명배경으로 파비콘 만들기, 티스토리 적용 하기

 

파비콘이란?

티스토리 블로그를 시작하면서 이런저런 설정을 건드리다 보니 '파비콘'이라는 것이 눈에 띄더라고요.

경로 : 블로그 관리 홈 → 관리 → 블로그 → 블로그 설정

처음엔 저게 뭘 말하는 걸까 싶어서 찾아봤는데 웹사이트의 아이콘이더군요. 예전엔 다른 이름으로 들은 적이 있었는데 기억이 잘 안 나네요;

이것이 favicon (파비콘, 패비콘)

 

---

Favicon = Favorie + Icon의 합성어.
(웹 브라우저의 즐겨찾기 또는 주소 창에 뜨는 웹사이트의 아이콘을 말한다. 파비콘 또는 패비콘이라고 읽는다.)

---

 

 

제가 알게 된 파비콘 만드는 방법에는 두 가지 방법이 있습니다.

• 사이트를 이용하는 방법
• 포토샵을 이용하는 방법

---

1. 사이트를 이용하는 방법

검색을 통해 파비콘을 제작하는 방법을 찾아봤는데, 이미지 파일을 업로드해서 아이콘 파일 *. ico로 변환해주는 사이트들이 많이 있더군요.

저는 아래의 사이트가 가장 괜찮았습니다. 다른 사이트에서는 용량이 너무 큰 ico 파일이 생성돼서 티스토리 등록 제한 용량 100KB에 걸리더군요.

---

https://www.favicon-generator.org/

Favicon & App Icon Generator

---

파일 선택으로 업로드 후, 아래 라디오 버튼을 체크하고 Create Favicon 클릭

 

변환 완료 후 넘어간 페이지에서 다운로드 버튼 클릭

 

 

2. 포토샵을 이용하는 방법

저는 포토샵을 이용했지만 다른 이미지 편집 툴로도 이미지를 제작이 가능할 것으로 생각됩니다. 

배경을 투명하게 만든 뒤 PNG 확장자로 저장!

 

저장할 때 확장자 선택

저장 옵션은 위와 같이 했습니다.

 

중요한 점은 *. PNG 확장자로 저장하는 부분이었습니다. JPG로 저장하게 되면 투명 배경 부분이 하얀색으로 나옵니다. 아래의 예시를 보실까요?

1번 파일은 배경이 꽉찬 하얀색

2번 파일은 배경이 없는 이미지

3번 파일은 오브젝트 뒤에 하얀 원이 있는 이미지

 

어쩌다 보니 물음표를 이미지로 사용하게 되었는데, 좋은 이미지를 찾으면 아마 변경할 것 같습니다. 

파비콘이라는 게 너무 작아서 배경이 없으면 흐릿해지더군요. 아래 이미지는 다운로드지만 보이는 크기가 비슷해서 이렇게 확인해봐도 무리가 없을 것 같습니다. 

3가지 파일이 적용되었을 때를 비교

 

2-1. 파일 확장자명 변경하기

포토샵을 이용해서 이미지를 가공한 뒤 PNG로 저장하면 의도대로 배경이 삭제된 이미지가 생성됩니다. 여기서 별도로 사이트를 이용해 ico 파일로 변환시켜줘도 좋지만, 그냥 확장자명을 ico로 변경하는 것만으로도 사용이 가능합니다. 저도 이렇게 해서 티스토리 파비콘을 등록했어요.

확장자명만 png → ico로 변경해서 사용가능

 

2-2. 파일 확장자명이 보이지 않는다면?

기본적으로 윈도 OS에서 확장자명이 숨김 처리되어 있을 텐데요, 아래와 같은 방법으로 확장자명을 숨김 해제할 수 있습니다. 윈도 10에서 방법 설명입니다.

파일 탐색기 → 보기 → 옵션 클릭

보기 → "알려진 파일 형식의 파일 확장명 숨기기" 체크 해제

정리

편하신 방법으로 파비콘을 만드셨다면 이제 티스토리 블로그 관리자 페이지에서 등록해 주시면 됩니다. 파비콘을 만들 때 주로 사이트를 이용하시는 것으로 검색되던데, 이렇게 정리하고 보니 포토샵만으로 끝나네요. 저는 이 방법을 추천드립니다!