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

워드프레스 파비콘

파비콘(favicon: 'favorites + icon')이란 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘을 일컫는 것입니다. 가령 다음 그림과 같이 인터넷 브라우저에 표시되는 각 사이트에 해당 아이콘이 표시되는 데, 이것을 파비콘이라고 합니다. 파비콘을 추가하면 해당 사이트만의 아이덴티티(Identity)를 나타내는 데 도움이 됩니다. 이 글에서는 워드프레스 사이트에 파비콘을 추가하는 방법에 대해 살펴보겠습니다.

파비콘 만들기

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

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

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

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

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

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

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

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

플러그인 사용하기

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

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

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

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

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

수동으로 파비콘 추가하기

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

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

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

투명 배경 파비콘 사용하기

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

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

참고:


4 개 댓글

  1. 정말 신기한 것이... 제 경우에는 파비콘을 테마에서 지원합니다. 그런데 관리화면에서는 나타나는데 정작 메인에서는 나타나지 않아요.

    응답
    • 열매맺는 나무님 저도 그런 현상이 생겼습니다;;
      관리자 페이지에서는 나오는데 사이트에서는 안나오네요

      응답
      • 안녕하세요, 이상종님.

        캐시 플러그인이 설치되어 있으면 캐시 플러그인의 캐시를 삭제하고, 브라우저의 캐시도 삭제한 후에 테스트해보시기 바랍니다.

댓글 남기기