본문 바로가기
IT 인터넷 이야기

크롬 북마크 아이콘(파비콘) 변경하는 방법

by 나꽁이 2021. 2. 15.

크롬 북마크 아이콘(파비콘) 변경하는 방법

 

 

크롬 북마크(즐겨찾기)를 사용하다 보면 가끔 파비콘이 등록되어 있지만 표시가 제대로 안되거나 해당 페이지에 파비콘이 등록되어 있지 않은 경우 북마크에 아래와 같이 나타나게 됩니다.

 

 

파비콘이 뜨지 않아도 자주 사용하는 페이지라면 어떤 사이트인지 기억하기 때문에 사용에는 문제가 없을 수도 있겠지만 가끔 사용하거나 완벽함을 추구하신다면 북마크 파비콘을 바꾸고 싶다는 생각을 하게 됩니다.

 

이런 경우에 크롬의 확장프로그램으로 원하는 파비콘을 설정해서 변경 할 수 있습니다.

 

그럼 크롬 확장프로그램 설치부터 파비콘으로 사용할 아이콘을 정하고 그것을 설정하는 방법까지 알아보도록 하겠습니다.

 

이전에 티스토리 파비콘 등록 포스팅에서 파비콘 등록하는 과정을 설명했던 적이 있는데 파비콘의 경우 보통 16x16 pixel 의 크기로 제작됩니다.

 

아래 방법으로 파비콘을 개인적인 등록할 경우에는 크기와 상관없이 적용되기는 하지만 선명하지 않을 수 있으니 가급적이면 낮은 픽셀로 변환하시거나 낮은 픽셀로 된 파일을 다운로드 받아 사용하시길 추천드립니다.

 


 1. 크롬 확장프로그램 설치 

 

1. 크롬을 실행하고 도구 더보기 - 확장 프로그램으로 진입합니다.

 

 

2. 왼쪽 상단에 햄버거 모양으로 된 메뉴 버튼을 클릭하고, 아래쪽에 Chrome 웹 스토어 열기를 클릭합니다.

 

 

3. [파비콘]으로 검색해서 Bookmark Favicon Changer 라는 확장 프로그램을 클릭합니다.

 

 

4. 설치 버튼을 클릭해서 설치합니다.(아래 사진에서는 이미 설치되어서 Chrome에서 삭제라는 버튼이 나오고 있습니다.)

 

 


 

 2. 아이콘(파비콘) 이미지 얻기 

 

아이콘을 정하는 방법에는 2가지 정도가 있습니다.

 

  • 해당 사이트나 페이지를 대표하는 로고 또는 이미지를 이용하는 방법
  • 아이콘을 다운로드 받는 사이트에서 원하는 아이콘을 다운로드 하는 방법

 

 

1) 사이트를 대표하는 로고 이미지 이용

 

유명한 사이트라면 크롬에 검색하여 이미지 탭에서 사진을 다운로드 받아서 사용합니다.

 

파비콘 사이즈가 위에서 말씀드렸듯이 16x16 pixel 정도면 되기 때문에 크기는 중요하지 않고 가급적 정사각형 형태로 다운로드 받으시는 것이 좋으며,개인 용도의 사용이기 때문에 저작권은 크게 신경쓰지 않으셔도 되겠습니다.

 

예를 들어 '지메일'로 검색해 보겠습니다.

 

검색을 하실 때 아래와 같이 [검색 - 이미지 탭 - 도구 - 아이콘]으로 검색하시면 정사각형 이미지가 나오므로 결과값을 얻는데 도움이 될 수 있습니다.

 

 

위 사진 중에서 표시된 사진을 마우스 우클릭을 이용해서 다운로드 합니다.

 

 

검색하실 때 [도구-색상]에서 투명을 선택하시고 검색하시면 배경이 없는 파보콘으로 설정 할 수도 있습니다.

 

 

2) 아이콘 다운로드 받아서 이용

 

파비콘으로 사용하기 위해서는 사진과 같이 복잡한 이미지보다는 단순한 아이콘과 같은 형태가 좋습니다.

 

아이콘을 다운로드 받을 수 있는 사이트에서 원하는 아이콘을 선택하시고 다운로드 받으셔서 설정 하실 수 있습니다.

 

제가 추천하는 사이트는 flaticon이라는 사이트이며 정리도 잘 되어있고 한글 검색도 가능해서 제가 아이콘이 필요할 때 항상 사용하는 사이트입니다.

 

아래 링크를 통해 바로 이동하실 수 있습니다.

 

 

Flaticon, the largest database of free vector icons

Download all icons in SVG, PSD, PNG, EPS format or as webfonts

www.flaticon.com

 

원하는 검색어로 검색합니다.

 

 

결과 값에서 마음에 드는 아이콘을 클릭합니다.

 

그럼 다음과 같이 어떻게 다운로드 받을 것인지 설정하는 화면이 나옵니다.

 

 

여기서 PNG 옆에 있는 pixel을 16px로 줄여주고 PNG를 클릭해서 다운로드를 받아줍니다.

 

16px로 수정하는 이유는 파비콘으로 사용하는 아이콘은 512px보다 16px이 더 선명하기 때문입니다.
한 마디로 클 수록 좋은게 아닙니다. 아래는 그 예시입니다.

512px 파비콘과 16px 파비콘 비교

 

flaticon에서 무료로 다운로드를 받아서 사용하는 경우에는 출처를 표시해야 합니다.

 

기본적으로 이 사이트에서는 위 사진에도 나와있듯이 저작자 표시가 있는 개인 및 상업적 목적으로 무료이고, 저작권 표시를 하게 되어 있습니다.

 

다운로드 받으실 때 링크 복사 버튼이 있는데 그것을 클릭하면 아래와 같이 코드를 복사 할 수 있습니다.

 

 

하지만 복사되는 것이 HTML 코드이기  때문에 HTML이 복잡하시다면 아래와 같은 형식으로 저작권자가 누구인지(빨간부분)만 변경하시고 적어주시면 되겠습니다.(다운로드 받으실 때 저작자를 확인하실 수 있습니다.)

 

"Icon made by Freepik from www.flaticon.com"

 

flaticon 사이트 검색시 위 사진에서처럼 왕관 모양이 그려져 있는 것은 유료 콘텐츠입니다.
필터에서 라이센스-무료를 선택하시고 검색하시면 무료로 이용가능한 아이콘만 검색하실 수 있습니다.

 


 

 3. 아이콘(파비콘) 설정하는 방법 

 

위에서 스크린샷 등으로 이미지를 따오거나 아이콘 사이트를 방문해서 파비콘으로 사용할 이미지가 준비되었다면 설정하는 방법은 다음과 같습니다.

 

 

1.설치하신 확장 프로그램을 클릭 후 옵션을 선택하면 등록되어 있는 북마크가 전부 표시됩니다.

 

 

2. 변경할 북마크를 찾으시고 그 위에 마우스를 올려두시고 우클릭을 하고 Change Favicon을 클릭합니다.

 

 

3. 준비한 이미지를 선택하고 열기 버튼을 눌러 설정을 완료합니다.

 

4. 아래와 같은 팝업이 뜨지만 무시하시고 닫기 버튼을 눌러줍니다.

 

 

5. 다음과 같이 북마크가 변경되었습니다.

 

 


지금까지 크롬 북마크 아이콘(파비콘)이 없거나 안나올 경우에 크롬 확장프로그램을 이용하여 원하는 이미지로 대체하는 방법에 대해 알아보았습니다.


 

함께보면 좋은 글

 

 

2021/02/06 - [IT 인터넷 이야기] - 윈도우 10 날짜 요일 표시하는 방법

2021/01/31 - [IT 인터넷 이야기] - 워드(word) 새문서 바로 여는 방법

2021/01/29 - [IT 인터넷 이야기] - magicline4nx / magicline4npiz 정체와 삭제하는 방법

2021/01/29 - [IT 인터넷 이야기] - 유튜브 화면끄고 음악 듣기 방법(백그라운드 재생)

2021/01/06 - [IT 인터넷 이야기] - CPU-Z로 컴퓨터 사양 확인하는 방법

 

 

 

반응형

댓글