콘텐츠로 건너뛰기

워드프레스 파비콘 설정하기 (feat. 파비콘 만드는 사이트)

  • 네이버 블로그 공유하기
  • 카카오톡 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
워드프레스 파비콘 설정하기 (feat. 파비콘 만드는 사이트)

안녕하세요. 애드센스 스쿨 인돈사 입니다. 오늘은 플러그인에서 살짝 물러나 워드프레스 파비콘 설정 방법을 안내해 드리려고 합니다. 워드프레스 뿐만 아니라 모든 웹사이트에는 ‘파비콘’ 이라는것이 있습니다. 그게 뭐냐면 홈페이지 들어가면 주소창에 떠 있는 작은 그림을 파비콘이라고 합니다.

지금 워드프레스 따라오세요를 나타내는 주소창에는 위처럼 빨강색 워드프레스 마크가 떠 있지요. 이것이 파비콘 입니다. 그리고 네이버에 워드프레스 따라오세요를 검색해 보면

위처럼 나오는데 화살표로 표시한 곳이 파비콘입니다. 그러면 워드프레스 파비콘 설정 방법을 알아 보도록 할까요?

워드프레스 만들기

당연하게도 워드프레스를 만들어야겠죠. 워드프레스가 아직 없으신 분들은 워드프레스 파비콘 설정을 당연히 할 수가 없으니까요. 예전에는 워드프레스를 만드는게 정말 번거롭고 어려웠었는데 요즘 정말 편해진것 같습니다. 워드프레스 따라오세요를 활용해 워드프레스를 만들고 오세요!

📌 워드프레스 따라오세요 (feat. 클라우드 웨이즈)

파비콘 생성하기

웹사이트에 나타나는 파비콘을 만들려면 먼저 파비콘을 생성해야 합니다. 내가 가진 사진을 조그맣게 만들어서 파비콘으로 생성 할수도 있고, 파비콘 만드는 사이트를 가면 이것 저것 기본적인 파비콘 만들어 져 있는것을 워드프레스에 적용할 수도 있습니다. 저는 한곳을 정해놓고 이용하는 편이 아니고 그냥 그때 그때 구글에서 파비콘만들기라고 검색해서 들어갑니다. 오늘은 파비콘제네레이터라는 홈페이지에 들어가 보도록 하겠습니다.

📌 파비콘 만드는 사이트 favicon.io (새창)

위 링크를 클링하면 파비콘 만드는 사이트로 들어가게 됩니다.

첫번째는 내 컴퓨터에 있는 PNG 파일을 ico 파일로 만드는 것이고 두번째 파일은 텍스트를 ICO로 만들어 주는것입니다. 3번째 것은 이모지를 ICO 파일로 만들어서 파비콘 설정을 할 수 있게 도와주는 단계 입니다. 저는 개인적으로 텍스트를 파비콘으로 설정해 보고 싶었습니다. 그래서 두번쨰 것을 선택했습니다.

  1. 파비콘 설정할 글자를 입력합니다. 저는 $ 라고 입력했습니다. 그 아래는 텍스트와 관련된 설정들입니다. 둥그렇게 할거냐 폰트는 뭘로 할꺼냐 등등
  2. 글자 색상입니다. 저는 흰색으로 해 봅니다.
  3. 배경색입니다.
  4. 왼쪽 상단에 보시면 Preview 라고 해서 미리보기가 있습니다. 우측상단에 DOWNLOAD를 눌러서 다운로드 해 줍니다.

여러가지 파비콘을 만들어 압축되어 있는 파일이 나옵니다. 압축을 풀어 주세요.

여러가지 다양한 크기의 파비콘이 나옵니다. 안드로이드 스마트폰이나 태블릿pc 등 다양한 환경에서 다양하게 쓰일 수 있는 파비콘이기 때문에 그런것 같습니다. 워드프레스에 코드를 추가해서 파비콘 설정을 할 수 있긴 하지만 저는 워드프레스에서 바로 업로드 하는것을 선호합니다.

워드프레스 파비콘 설정방법

먼저 내 워드프레스 관리자 페이지에 로그인 합니다. 이후 외모>사용자 정의하기를 눌러주세요

사용자 정의하기를 눌러보면 테마마다 조금씩 메뉴가 차이가 있습니다. 그래도 파비콘을 등록하는곳은 비슷비슷하니… 센스껏 찾아주시면 되겠습니다. (저는 GP 프리미엄 기준으로 설명 드리도록 하겠습니다)

왼쪽 상단에 있는 사이트 아이덴티티를 눌러줍니다.

윗부분에는 워드프레스 이름과 설명이 있고, 그 아래에는 로고가, 맨 아래에는 사이트 아이콘이 있습니다. 워드프레스 파비콘 설정을 할 수 있는 위치는 테마마다 다른데, 경험상 보통은 사이트 아이덴티티에서 설정할 수 있습니다. 어떤 테마는 파비콘이라고 표현되어 있기도 합니다. 아무튼 사이트아이콘을 선택해서 파비콘을 설정 해 보도록 하겠습니다.

파일선택을 누르시고 아까 워드프레스 파비콘 설정을 위해서 생성하고 다운로드 받았던 파일을 업로드 해 주겠습니다. 16×16 으로 하면 너무 작아서 조금 큰 기기에서는 깨질것 같으니 192×192 사이즈를 가진 파일을 업로드 해 보겠습니다.

파일이 업로드 되었고 우측 하단에 선택 버튼을 눌러줍니다.

마음에 듭니다. 이미지를 잘라도 되고 안잘라도 됩니다. 자르기를 눌러보겠습니다. 다시 사용자 정의 화면으로 돌아오는데 브라우저를 한번 보시죠

오… 꽤 마음에 듭니다. 이것으로 워드프레스 파비콘 만들어 설정하기는 끝났습니다. 네이버 웹마스터도구나 구글 서치콘솔 등에 나의 워드프레스를 등록하면 검색결과에 파비콘이 적용될 것입니다. 고생하셨습니다.!

더 많은 팁 보기

📌 워드프레스 네이버 노출을 위한 기본셋팅(feat. 웹마스터도구)

📌 워드프레스 구글노출을 위한 서치콘솔 등록 (feat. 줌 & 빙)

📌 워드프레스 광고관리 플러그인 ad inserter (feat. 애드센스 광고 넣는법)

📌 구글 애널리틱스(GA4)와 애드센스 연결하기 (2023년)

'WP 따라오세요'에는 쿠팡파트너스 등 제휴링크가 포함되어 있으며 수수료를 제공받을 수 있습니다.