워드프레스에 블로그를 개설하고 파비콘을 등록한 후 한동안은 검색 결과에 파비콘이 표시되었습니다. 그런데 어느 날부터 인지 모르겠지만 구글 검색 결과에 파비콘이 표시되지 않더군요. 이 글에서는 구글 검색 결과에 파비콘이 표시되지 않을 경우 처리 방법에 대해 알아보겠습니다.
구글 검색 결과에 파비콘이 표시되지 않을 경우 처리 방법
1. 워드프레스에 등록한 파비콘이 보이지 않는 문제
워드프레스에서 블로그를 개설한 후 파비콘을 등록하는 것은 매우 쉽습니다. 워드프레스 관리자 화면에서 ‘디자인’ → ‘사용자 정의하기’ → ‘사이트 아이덴티티’로 이동한 후, ‘사이트 아이콘’ 아래에 있는 ‘이미지 변경’ 버튼을 클릭한 후 512×512 크기의 PNG 또는 JPG 파일을 등록하면 됩니다.
그런데 이렇게 등록하더라도 간혹 저와 같이 어느 순간부터 파비콘이 보이지 않는 문제가 생기는 것 같습니다. 정확히 원인이 무엇인지 알지 못하기 때문에 시간이 해결해 줄 것이라 믿고 기다리는 경우가 많습니다.
아래는 구글 검색 결과에서 제 블로그의 파비콘이 표시되지 않는 화면입니다. 파비콘이 정상적으로 표시되는 다른 사이트들과 달리 왠지 모를 부족함이 느껴지는 게 기분 탓일까요?
2. 구글, 네이버의 파비콘 설정 가이드 확인
① 구글의 파비콘 설정 가이드 확인
구글의 파비콘 설정 가이드를 확인하면, <link> 태그를 사용하여, 가로x세로가 48px의 배수인 정사각형 이미지를 사용하여야 하며, URL을 자주 변경하지 말아야 한다고 합니다. 그리고 파비콘의 주소는 상대 경로와 절대 경로 두 가지 모두 사용할 수 있으며, 해당 도메인의 루트 디렉토리에 위치시키는 것이 좋습니다.
② 네이버의 파비콘 설정 가이드 확인
네이버는 구글과 다르게 48px의 배수가 아니더라도 가로x세로가 정사각형 이미지이면 사용 가능하며, URL은 절대 경로만 사용할 수 있습니다. 그 외에는 특별한 조건은 없는 것 같습니다.
3. 파비콘용 이미지 준비 및 설정하기
① 파비콘용 이미지 준비하기
파비콘으로 사용할 이미지는 여러분이 직접 만들거나, 아래 글을 참고하여 만들 수 있습니다.
워드프레스 블로그 개설을 위한 모든 것 – 파비콘 등록
512×512의 파비콘용 이미지 파일이 준비되었다면, 16×16, 32×32, 48×48, 96×96 사이즈의 이미지 파일과 48×48 사이즈의 ICO 파일을 만들도록 하겠습니다.
윈도우의 ‘그림판’ 프로그램을 실행한 후, 512×512 이미지를 열고 아래와 같이 사이즈를 변경합니다. 이후 상단 메뉴에서 ‘이미지’ → ‘크기 조정’을 선택하여 96×96 픽셀 크기로 조정한 다음, ‘파일’ → ‘다른 이름으로 저장’을 클릭하여 ‘favicon-96×96.png’로 저장합니다. 같은 방식으로 48×48, 32×32, 16×16 픽셀 크기로 이미지 크기를 조정하고, 각각의 크기에 맞는 파일명으로 저장합니다.
다음으로 48×48 사이즈의 ICO 파일을 만들도록 하겠습니다. ICO 파일은 아래 링크를 통해 쉽게 만들 수 있습니다.
Convertio 사이트에 접속한 후, 위에서 저장했던 favicon-48×48.jpg 파일을 업로드하고 파일 포맷을 ‘ICO’로 선택한 후 ‘변환’을 클릭합니다.
잠시 후, 변환이 완료되면 ‘다운로드’ 버튼을 클릭하여 저장합니다. 이때 저장되는 파일명은 ‘favicon-48×48.ico’입니다.
아래와 같이 필요한 6개의 이미지 파일이 모두 준비되었습니다.
준비된 파일 중 JPG 파일은 워드프레스 관리자 화면에서 ‘미디어’ → ‘새 미디어 파일 추가하기’에서 업로드합니다. 업로드한 파일을 ‘미디어’ → ‘라이브러리’에서 찾아 클릭하면 해당 파일의 URL을 확인할 수 있으며, 노트패트 등에 확인한 URL를 복사하여 붙여넣기 합니다. 다른 파일들도 모두 동일한 방식으로 업로드하고 URL을 확인하여 복사합니다.
JPG 파일은 위와 같이 업로드가 가능하지만, ‘favicon-48×48.ico’ 파일은 위와 같이 업로드가 되지 않습니다. 그래서 FTP를 사용하여 업로드 해줘야 합니다. FTP로 업로드하기 전에 파일명 ‘favicon-48×48.ico’를 ‘favicon.ico’로 변경합니다.
FTP를 사용하여 업로드하는 방법은 아래 글을 참고하시기 바랍니다.
FTP로 AWS Lightsail 서버에 파일 업로드하기
ICO 파일의 업로드가 완료되면 워드프레스의 루트 디렉토리로 옮겨주어야 하는데요. AWS Lightsail을 사용하는 경우, SSH 터미널을 열고 다음 명령어를 입력하여 ICO 파일을 루트 디렉토리로 이동시킬 수 있습니다:
mv favicon.ico ./stack/wordpress
ICO 파일의 이동이 제대로 됐는지 확인하기 위해, cd ./stack/wordpress 명령을 실행하여 해당 디렉토리로 이동한 다음, ls 명령어로 확인하니 아래와 같이 ICO 파일이 잘 이동되었습니다.
지금까지 파비콘 등록을 위한 준비를 모두 완료하였습니다. 다음으로 파비콘 설정을 해 보도록 하겠습니다.
② 파비콘 설정하기
파비콘은 어렵지 않게 설정할 수 있으며, 아래 코드를 여러분의 <head></head> 사이에 추가하기만 하면 됩니다. 한가지 주의할 점은, 구글은 절대 경로와 상대 경로 모두 사용 가능하지만, 네이버는 절대 경로만 사용 가능하다는 것입니다. 구글과 네이버 모두 파비콘이 적용되야 하기 때문에 주소는 절대 경로로 설정해야 합니다.
<link rel="shortcut icon" href="https://여러분의 블로그 주소/favicon.ico" type="image/x-icon">
<link rel="icon" type="image/png" sizes="48x48" href="위에서 복사한 이미지파일의 URL/favicon-48x48-1.png">
<link rel="icon" type="image/png" sizes="16x16" href="위에서 복사한 이미지파일의 URL/favicon-16x16-1.png">
<link rel="icon" type="image/png" sizes="32x32" href="위에서 복사한 이미지파일의 URL/favicon-32x32-1.png">
<link rel="icon" type="image/png" sizes="96x96" href="위에서 복사한 이미지파일의 URL/favicon-96x96-1.png">![](https://www.zisikbug.com/wp-content/uploads/2024/06/favicon-96x96-1.png">){kind=link}
위의 코드를 워드프레스 관리자 화면에서 ‘도구’ → ‘Head & Footer Code’로 이동한 후, 아래 화면과 같이 ‘HEAD Code’에 붙여넣고 화면을 아래로 스크롤하여 ‘변경사항 저장’ 버튼을 클릭하면 파비콘 설정이 완료됩니다.
만약 ‘Head & Footer Code’ 플러그인을 사용하지 않는다면, 사용하시는 다른 플러그인에서 HEAD 섹션에 동일한 코드를 추가하시면 됩니다.
아래 화면에서 href에 설정되어 있는 주소는 저의 블로그 주소이기 때문에 여러분의 블로그 주소 및 이미지 파일의 URL로 변경하셔야 합니다.
지금까지 구글 검색 결과에 파비콘이 표시되지 않을 경우 처리 방법에 대해 알아보았습니다. 제 경우에는 파비콘 설정을 변경한 후 약 5일이 지나자 아래와 같이 파비콘이 정상적으로 표시되기 시작했습니다.
오늘은 구글 검색 결과에 파비콘이 표시되지 않을 경우 처리 방법에 대해 알아보았습니다. 구글이나 네이버 검색 결과에 파비콘이 표시되면 사용자들에게 신뢰감을 주기 때문에, 가능한 표시되도록 하는 것이 좋습니다. 저처럼 구글 검색 결과에 파비콘이 표시되지 않는 분들은 이 글을 참고하여 설정을 변경해 보시기 바랍니다.