워드프레스에 파비콘 추가하기(사이트 아이콘)

Last Updated: 2024년 04월 15일 10개 댓글

파비콘(favicon: 'favorites + icon')이란 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘을 일컫는 것입니다. 가령 다음 그림과 같이 인터넷 브라우저에 표시되는 각 사이트에 해당 아이콘이 표시되는 데, 이것을 파비콘(사이트 아이콘)이라고 합니다.

워드프레스 파비콘

파비콘을 추가하면 해당 사이트만의 아이덴티티를 나타내는 데 도움이 됩니다. 이 글에서는 워드프레스 사이트에 파비콘을 추가하는 방법에 대해 살펴보겠습니다.

워드프레스가 업데이트되면서 기존 방법 대신 설정에서 간단히 파비콘(사이트 아이콘)을 업로드할 수 있도록 바뀌었습니다.

[ 이 글은 2024년 4월 4일에 마지막으로 업데이트되었습니다. ]

2024년 4월 업데이트: 설정에서 사이트 아이콘 업로드하기 (워드프레스 6.5 버전 이상)

워드프레스 6.5 업데이트에서 사이트 아이콘을 설정에서 업로드하도록 바뀌었습니다.

워드프레스 사이트 아이콘 업로드하기

설정 » 일반 » 사이트 아이콘 섹션에서 사이트 아이콘을 업로드할 수 있습니다. 아이콘은 정사각형이어야 하고 최소 512x512픽셀 이상이어야 합니다.

워드프레스가 6.5 버전으로 업데이트하면서 일부 설정 위치가 바뀌었고, 메뉴 번역도 일부 변경되었습니다(예: 외모 디자인).

사이트 아이덴티티에서 사이트 아이콘 설정하기 (워드프레스 6.5 미만 버전)

워드프레스가 업데이트되면서 이제는 플러그인을 사용하거나 아래의 방법으로 파비콘을 설정할 필요가 없이 사용자 정의하기 내에서 파비콘을 설정할 수 있게 되었습니다.

워드프레스 관리자 페이지에서 외모 » 사용자 정의하기 » 사이트 아이덴티티 (Site Identity)로 이동한 다음, 사이트 아이콘 섹션의 사이트 아이콘 선택 버튼을 클릭하여 미디어 라이브러리에서 이미지를 선택하거나 그래픽 파일을 업로드하여 지정할 수 있습니다.

사이트 아이덴티티에서 사이트 아이콘 설정하기

사이트 아이콘은 브라우저 탭, 북마크 바, 워드프레스 모바일 앱에 표시되며, 사이트 아이콘은 정사각형이고 최소 512 × 512 픽셀이어야 합니다.

이 방법으로 파비콘(사이트 아이콘)이 올바르게 지정되면 아래의 내용은 무시하시기 바랍니다. 아래는 '사이트 아이콘' 업로드 기능이 제공되기 전의 워드프레스 버전에 적용되는 내용입니다. 파비콘 관련 플러그인을 사용하고 있다면 제거하고 사용자 정의하기 내에서 파비콘을 업로드하시기 바랍니다.

구글과 네이버 검색 결과에 사이트 아이콘 노출

네이버 카페에 종종 구글이나 네이버 등 검색엔진에 사이트가 노출될 때 워드프레스 로고가 표시되고 사이트 아이콘에서 지정한 아이콘(썸네일)이 표시되지 않는다고 질문하시는 분들이 계십니다.

이 워드프레스 블로그를 살펴보니 네이버와 구글 모두 사이트 아이콘 섹션에서 지정한 파비콘이 표시되고 있습니다.

구글 검색 결과 페이지에 파비콘 노출:

구글 검색 결과 관련 썸네일

네이버 검색 결과 결과 페이지에 파비콘 노출:

네이버 검색 결과 관련 썸네일

사용자가 지정한 아이콘이 표시되도록 하는 어떤 특별한 방법이 있는지 질문하시는 분들이 계시지만, 특별한 방법은 없는 것 같습니다. 시간이 지나면서 검색엔진에서 알아서 노출시켜 주는 것 같습니다.

오랫동안 노출되지 않으면 아래에서 소개하는 Favicon by RealFaviconGenerator 플러그인을 사용하거나 직접 업로드하는 방법을 고려해보시기 바랍니다.

파비콘 만들기

온라인에서 이미지 파일을 파비콘으로 변환하는 서비스를 제공하는 다양한 사이트가 있습니다. 예를 들어, RealFaviconGenerator.net 사이트에서 편리하게 파비콘을 만들 수 있습니다. Favic-o-Matic 사이트에서는 모든 플랫폼용 아이콘을 무료로 생성하거나 32x32 및 16x16픽셀 .ico 파일을 만들 수 있습니다.

워드프레스에 파비콘 추가하기

파비콘 파일을 만들었다면 몇 가지 방법을 통해 워드프레스에서 파비콘을 추가할 수 있습니다.

  1. 테마 옵션에서 추가하기(해당 테마에서 파비콘을 추가하는 기능이 있는 경우)
  2. 수동으로 파비콘을 업로드하고 추가하기
  3. 플러그인 사용하기

테마 옵션을 통해 파비콘 추가하기

일부 워드프레스 테마(특히 유료 테마)에서 파비콘을 업로드하는 기능을 제공할 수 있습니다. 이 경우 직접 아이콘을 업로드하면 간단히 파비콘을 워드프레스 블로그에 추가할 수 있습니다.

예를 들어, 베스트셀링 워드프레스 테마인 아바다 (Avada)에서는 테마 옵션 페이지에서 'favicon'으로 검색하면 파이콘과 애플 아이폰 및 애플 아이패드용 아이콘을 업로드할 수 있습니다.

워드프레스 아바다 테마 파비콘 추가하기

플러그인 사용하기

테마에서 파비콘 업로드 기능을 제공하지 않는 경우 플러그인이나 수동으로 파비콘을 업로드해야 합니다. 플러그인을 사용하려면 워드프레스 관리자 페이지(대시보드)에서 "플러그인 > 플러그인 추가하기"로 이동하여 "Favicon"으로 검색하여 원하는 기능의 플러그인을 설치하여 사용하도록 합니다.

워드프레스 파비콘 플러그인 설치

예를 들어, 10만 개 이상 사이트에 설치되어 사용되고 있는 Favion by RealFaviconGenerator 플러그인을 설치할 경우, 외모 (워드프레스 버전에 따라 "테마 디자인") » Favicon에서 이미지 파일을 선택하여 Generate favicon 버튼을 누르면 파비콘이 생성됩니다.

워드프레스 파비콘 플러그인

하지만 워드프레스에서 플러그인의 설치는 최소화하는 것이 바람직하므로 수동으로 직접 추가하는 방법을 권장합니다. 코드 1줄을 입력하는 것으로 파비콘을 추가할 수 있습니다.

수동으로 파비콘 추가하기

WordPress Codex의 Creating a Favicon(파비콘 만들기) 페이지의 내용을 참조하여 파비콘을 등록할 수 있습니다. 내용을 정리해보면 다음과 같은 순서로 수동으로 파비콘을 워드프레스 블로그에 추가할 수 있습니다.

  1. 아이콘 그림 파일을 준비합니다.
  2. 아이콘을 파비콘 파일(*.ico)로 변환합니다. 다양한 인터넷 사이트에서 아이콘을 파비콘으로 변환해주는 서비스를 제공합니다. 사용자가 준비한 아이콘을 업로드하면 변환된 파비콘 파일을 다운로드할 수 있습니다. 크기는 16x16픽셀로 설정하라고 WordPress Codex 페이지에 나오네요. 다소 흐리게 나오는 것 같아서 32x32픽셀로 지정해도 워드프레스 사이트에서 잘 표시됩니다. (실제로 32x32픽셀로 적용되어 표시되는지는 모르겠습니다.)
  3. 파비콘 파일의 이름을 favicon.ico로 지정합니다.
  4. FTP를 사용하여 현재 사용 중인 테마의 폴더에 favicon.ico 파일을 업로드합니다. 차일드 테마를 만들어서 차일드 테마 내의 디렉터리로 업로드하세요.
  5. 테마(자식 테마를 사용하는 경우 자식 테마)의 헤더 파일(header.php)에 다음 라인을 추가합니다.
    <link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />

또는, 차일드 테마 내의 함수 파일에 다음과 같은 코드를 추가할 수 있습니다.

// 워드프레스 훅으로 파비콘 추가하기
// Adding Favicon with WordPress Hook 

add_action( 'wp_head', 'ilc_favicon');
function ilc_favicon(){
    echo "<link rel='shortcut icon' href='" . get_stylesheet_directory_uri() . "/favicon.ico' />" . "\n";
}

이제 브라우저에서 워드프레스 블로그를 방문하면 방금 추가한 파비콘이 표시될 것입니다. 만약 표시되지 않는다면 쿠키를 삭제하거나 여러 번 "새로 고침"해 보시기 바랍니다. (그래도 안 될 경우에는 캐시를 삭제해 보시기 바랍니다.)

SFTP/FTP 사용 방법은 다음 글을 참고해보세요.

투명 배경 파비콘 사용하기

배경색이 투명인 파비콘을 추가하는 방법은 위의 방법과 동일하지만 파비콘 이름이 favicon.png 또는 favicon.gif가 되어야 합니다. 그리고 <link rel="shortcut icon" ... 부분에서도 파비콘의 파일 이름을 수정해주도록 합니다.

<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.png" />

참고:


10 개 댓글

Leave a Comment

  1. 안녕하세요,
    이제 시작하는 초보인데 제너레이트프레스 테마 사용중입니다.
    사이트에 로고와 파비콘을 넣고 이상없이 잘되었는데
    사이트를 로그아웃한 상태에서 다시 들어가보면
    홈화면에서만 보이고 포스팅화면에서는 사라져요..
    다시 로그인해서 들어가면 모든 페이지에서 잘 보이는데 이상합니다.
    이게 정상은 아닌것 같은데 해결방법이 있을까요?

    응답