웹 사이트에 WordPress Favicon을 추가하는 방법은 무엇입니까? (3가지 방법)

게시 됨: 2022-04-08

웹 사이트를 탐색하는 동안 WordPress 웹 사이트 제목 옆에 나타나는 작은 이미지를 보았을 것입니다. 이 작은 이미지는 일반적으로 WordPress Favicon으로 알려져 있습니다. Internet Explorer 5에 새로 추가된 기능인 "즐겨찾기" 탭과 함께 1999년 3월에 Microsoft에서 처음 도입했습니다.

Microsoft는 Internet Explorer 5 버전에서 책갈피 이름을 즐겨찾기로 변경하고 URL 바로 옆에 즐겨찾기 아이콘을 포함하는 옵션을 제공했습니다. 이 즐겨찾기 아이콘은 이제 " Favicon "으로 표시됩니다.

그러나 이러한 WordPress Favicon은 웹 브라우저의 책갈피와 브라우저의 홈 화면에 바로 가기 버튼으로 있습니다.

이러한 워드프레스 파비콘은 보기에 아름답기만 한 것이 아니라 사용자 경험을 향상하고 브랜드 인지도를 높이며 신뢰를 구축하는 데 도움이 됩니다. 따라서 이 기사에서는 WordPress Favicon의 모든 측면과 웹 사이트를 쉽게 만들고 추가하는 방법을 다루려고 합니다.

그러나 먼저 WordPress Favicon의 정확한 정의가 무엇인지 알아야 합니다. 시작합시다!

목차
워드프레스 파비콘이란?
워드프레스 파비콘 사용의 장점은 무엇인가요?
WordPress Favicon을 만드는 방법은 무엇입니까?
사이트에 WordPress Favicon을 업로드하는 방법은 무엇입니까?
WordPress Favicon이 표시되지 않으면 어떻게 합니까?
요약
자주 묻는 질문

워드프레스 파비콘이란?

WordPress 파비콘은 일반적으로 브랜드를 나타내는 16×16 픽셀 크기의 작은 아이콘으로 브라우저 탭에서 쉽게 볼 수 있는 페이지 근처에 있습니다.

이전에는 Google Analytics 가 없었을 때 Favicon이 웹 트래픽을 결정하는 도구로 사용되었습니다. 하지만 지금은 UX와 브랜드 인지도를 높이는 것으로 잘 알려져 있습니다.

그 외에도 WordPress Favicon을 사용하면 브랜드 인지도에 도움이 됩니다. 브라우저 탭, 책갈피, 기록 아카이브 등에서 쉽게 볼 수 있기 때문입니다. 스마트폰이나 탭과 같은 소형 기기에서 웹사이트 바로가기로도 사용할 수 있습니다. 그것은 사용자의 시간을 절약하는 데 도움이되며 어려움없이 탐색 할 웹 사이트를 쉽게 식별 할 수 있습니다.

워드프레스 파비콘 사용의 장점은 무엇인가요?

브랜드 인지도 및 사용자 경험 향상 외에도 WordPress Favicon 사용의 이점에 대해 이미 논의했습니다. 방문자가 올바른 웹사이트를 탐색하고 있으며 올바른 페이지에 있다는 것을 확신할 수 있다는 것입니다.

브라우저에서 많은 탭을 연 경우 탭 수가 증가하면 아래와 같이 웹사이트 제목이 숨겨집니다.

WordPress Favicon

이 시점에서 Favicon은 웹 사이트를 빠르게 식별하여 쉽게 전환할 수 있도록 도와줍니다. 또한 방문자에게 웹 사이트에 쉽고 빠르게 액세스할 수 있도록 브라우저 홈 화면이나 스마트폰과 같은 작은 장치에 웹 사이트 바로 가기를 추가하도록 요청할 수도 있습니다.

결국 모든 웹 사이트의 주요 목표 중 하나는 방문자가 웹 사이트를 계속해서 쉽게 방문할 수 있도록 고유한 사용자 경험을 제공하는 것입니다. 이것이 WordPress Favicon이 WordPress 웹 사이트에서 도움이 되는 것이며 강력한 브랜드 인지도를 구축하고 사용자 경험을 한 단계 향상시키는 데 도움이 됩니다.

이제 웹 사이트를 위한 아름다운 WordPress Favicon을 만드는 방법을 살펴보겠습니다.

WordPress Favicon을 만드는 방법은 무엇입니까?

WordPress Favicon을 만들려면 가장 먼저 해야 할 일은 WordPress Favicon의 크기와 지원해야 하는 장치를 결정하는 것입니다. 그러나 다양한 브라우저와 플랫폼을 지원하는 Favicon의 다양한 해상도의 전체 목록이 있습니다.

그러나 이 게시물에서는 가장 권장되고 널리 사용되는 해상도를 사용하여 혼란 없이 쉽게 웹 사이트용 WordPress Favicon을 쉽게 만들 수 있습니다.

워드프레스 파비콘을 만들기 위한 몇 가지 최고의 팁

  • Favicon의 가장 권장되는 해상도는 512×512 픽셀입니다.
  • 16×16 픽셀 해상도로 축소되어도 멋지게 보여야 하는 이미지를 선택하십시오.
  • 검색 결과 옆에 파비콘을 표시하려면 항상 Google에서 제공하는 가이드라인을 따르세요.
  • 직사각형 또는 정사각형 이미지를 선택할 수 있습니다. WordPress에 업로드한 후 또는 전에 사용자 정의할 수 있는 옵션이 제공되기 때문입니다.

WordPress Favicon을 만드는 방법에는 여러 가지가 있습니다. 브랜드를 더 잘 이해하고 전문적인 파비콘을 디자인할 수 있는 디자이너를 고용할 수 있습니다. WordPress Favicon 플러그인을 사용하여 Favicon을 만들 수 있습니다. Adobe Photoshop을 사용할 줄 안다면 혼자서도 디자인할 수 있습니다.

이 외에도 Favicon 생성기 및 Favicon.cc와 같은 다양한 온라인 도구를 사용할 수 있으므로 Favicon을 쉽게 만들 수 있습니다.

귀하의 웹사이트인 xyz.com에 대한 파비콘을 생성한다고 가정해 보겠습니다. 어도비 포토샵을 사용할 줄도 모르고 전문 디자이너를 고용할 예산도 부족합니다. 이 경우 Favicon 생성기를 사용합니다.

먼저 웹사이트를 방문하여 아래 그림과 같이 웹사이트 파비콘으로 변환할 이미지를 업로드해야 합니다.

Screenshot 4 1 How to Add a WordPress Favicon to Your Website? (3 Methods)

다음과 같은 적절한 설정을 선택합니다.

  • 웹, Android, Microsoft 및 iOS 앱용 아이콘 생성
  • 16×16 WordPress용 아이콘 생성 Favicon.ico

확인란을 선택하고 파비콘 만들기 버튼을 클릭합니다. 웹 페이지는 아래와 같이 Favicon zip 파일을 쉽게 다운로드할 수 있는 다운로드 페이지로 다시 로드됩니다.

WordPress Favicon generator

그러나 위에 표시된 대로 코드를 복사하고 HTML 문서의 헤드에 붙여넣어 웹사이트에 Favicon을 수동으로 추가할 수도 있습니다.

파비콘을 디자인할 도구를 선택하지 않고 직접 디자인하기로 선택한 경우 디자인을 시작하기 전에 염두에 두어야 할 몇 가지 사항이 있습니다.

  • 다른 사람들보다 줄어들 수 있으므로 세부 사항을 잃을 수 있으므로 디자인을 단순하고 깨끗하게 유지하십시오.
  • 파비콘 디자인은 웹사이트 메인 로고와 동일한 색상, 그래픽 또는 글꼴이어야 하거나 브랜드를 나타내야 합니다.
  • 먼저 Favicon을 더 큰 해상도로 디자인한 다음 요구 사항에 따라 크기를 조정합니다.

Favicon 디자인을 완료한 후 지원되는 파일 형식으로 파일을 저장해야 합니다. 이전에는 특정 WordPress Favicon 파일 형식 "WordPress Favicon.ico"가 널리 사용되었습니다. 그러나 지금은 상황이 바뀌었고 오늘날 모든 최신 웹 브라우저는 이제 PNG, GIF 및 ICO 파일 형식을 지원합니다.

그러나 JPEG 파일 형식도 사용할 수 있으며 Favicon 파일을 저장하는 데 널리 사용되는 형식입니다. 그러나 지원하지 않는 Internet Explorer의 일부 이전 버전이 있습니다. 따라서 보편적인 지지를 받는 사람들에게만 충실하는 것이 좋습니다.

사이트에 WordPress Favicon을 업로드하는 방법은 무엇입니까?

Favicon을 성공적으로 디자인하고 저장했으면 이제 WordPress 사이트에 Favicon을 업로드하거나 추가할 차례입니다. 세 가지 방법으로 할 수 있습니다.

  1. 워드프레스 커스터마이저를 통해
  2. 플러그인을 사용하여 Favicon 추가
  3. 수동으로 파비콘 추가하기

WordPress Customizer를 사용하여 Favicon 추가

WordPress 4.3 버전 릴리스 이후에 Favicon으로 사용할 이미지를 업로드하고 자르는 가장 쉽고 빠른 방법이 되는 새로운 옵션이 도입되었습니다.

당신이해야 할 유일한 일은 512X512 해상도의 고품질 선명한 이미지를 업로드하는 것입니다. 먼저 아래와 같이 WordPress 대시보드 > 모양 > 사용자 정의 에 로그인합니다.

customizing WordPress Favicon

페이지는 아래와 같이 사이트 ID 탭을 클릭해야 하는 페이지를 사용자 정의하기 위해 로드됩니다.

WordPress Site identity

사이트 ID 탭을 클릭한 후 그림과 같이 "사이트 아이콘 선택" 버튼을 찾아야 합니다.

Screenshot 5 2 How to Add a WordPress Favicon to Your Website? (3 Methods)

그런 다음 이미지를 업로드하거나 미디어 라이브러리의 기존 이미지를 사용하여 Favicon을 만들 수 있는 WordPress 미디어 인터페이스가 나타납니다. 이제 오른쪽 하단에 있는 "선택" 버튼을 클릭합니다.

Screenshot 9 1 How to Add a WordPress Favicon to Your Website? (3 Methods)

그런 다음 선택한 이미지를 자르거나 크기를 조정하여 Favicon에 완벽하게 맞도록 할 수 있습니다. 이미지 자르기 버튼을 클릭하여 마무리합니다.

Screenshot 8 1 How to Add a WordPress Favicon to Your Website? (3 Methods)

위의 모든 단계를 완료한 후 모든 변경 사항을 저장하고 게시 버튼을 눌러 적용할 차례입니다. 그러나 언제든지 Favicon이 만족스럽지 않다면 WordPress Favicon 변경을 위해 위의 단계를 반복해야 합니다.

사이트에 Favicon을 추가하기 위해 WordPress Favicon 플러그인 사용

기본 WordPress 사이트 아이콘 기능 이외의 더 많은 옵션을 찾고 있다면 WordPress Favicon 플러그인의 도움을 받을 수 있습니다. 동일한 쉬운 기능을 가지고 있지만 훨씬 더 많은 호환성 옵션과 더 맞춤화된 경험을 제공하는 다양한 무료 및 인기 있는 Favicon 플러그인을 사용할 수 있습니다.

가장 인기 있고 널리 사용되는 WordPress Favicon 플러그인 중 하나는 RealFaviconGenerator의 Favicon입니다.

Favicon by RealFaviconGenerator
지금 다운로드

이 플러그인은 호환성을 너무 심각하게 생각하여 대부분의 인기 있는 웹 브라우저와 호환되는 반응형 Favicon을 설정할 수 있습니다.

먼저 워드프레스 대시보드 > 플러그인 > 신규 추가 를 통해 ReavFaviconGenerator 플러그인을 설치해야 합니다.

Screenshot 11 How to Add a WordPress Favicon to Your Website? (3 Methods)

그런 다음 설치 버튼을 클릭하고 활성화합니다. 이제 모양 > 파비콘 으로 이동하고 미디어 라이브러리에서 최소 70×70이어야 하는 사진을 선택하고 아래와 같이 파비콘 생성 버튼을 클릭합니다.

Screenshot 12 How to Add a WordPress Favicon to Your Website? (3 Methods)

파비콘 생성을 클릭하는 순간 아래로 스크롤하여 " 파비콘 및 HTML 코드 생성 " 버튼을 클릭해야 하는 플러그인 웹사이트로 리디렉션됩니다.

Screenshot 13 How to Add a WordPress Favicon to Your Website? (3 Methods)

도구가 백그라운드에서 작동하는 동안 WordPress 대시보드로 다시 리디렉션됩니다. 이제 파비콘이 준비되었습니다.

Screenshot 14 How to Add a WordPress Favicon to Your Website? (3 Methods)

수동으로 WordPress Favicon 추가

루트 디렉토리에 액세스하는 방법을 모르는 경우 위의 두 가지 쉬운 방법을 고수하는 것이 좋습니다. 그러나 여전히 수동 방법을 사용하는 것을 선호하는 경우 FTP 클라이언트 또는 웹 호스팅 공급자 가 제공하는 cPanel을 통해 수행해야 합니다.

1단계: 하지만 그 전에 Realfavicongenrator 웹사이트로 이동해야 합니다. ' Favicon 이미지 선택 ' 버튼을 클릭하여 Favicon을 생성하십시오.

Screenshot 15 How to Add a WordPress Favicon to Your Website? (3 Methods)

이미지를 업로드하면 RealFaviconGenerator Plugin을 사용할 때와 동일한 사용자 인터페이스를 확인할 수 있습니다. 원하는 경우 사용자 정의하거나 변경하고 웹 페이지를 아래로 스크롤한 다음 아래와 같이 " Favicon 및 HTML 코드 생성 " 버튼을 클릭합니다.

Screenshot 13 1 How to Add a WordPress Favicon to Your Website? (3 Methods)

2단계: Favicon 및 HTML 코드 생성 버튼을 클릭하면 페이지가 Favicon 패키지 를 다운로드할 수 있는 다음 페이지로 이동합니다.

Screenshot 16 How to Add a WordPress Favicon to Your Website? (3 Methods)

다운로드한 Favicon 패키지를 추출하고 호스팅 클라이언트에서 제공하는 FTP 클라이언트 또는 cPanel을 통해 웹사이트 루트 디렉토리에 업로드합니다.

WPOven 에서는 사용자에게 독특한 경험을 제공하기 위해 노력하며 사용자의 편의를 최우선으로 생각합니다. 따라서 사이트 파일 및 폴더를 쉽게 관리할 수 있는 새 파일 관리자를 제공합니다.

새로운 사이트 도구인 파일 관리자를 소개합니다.

WPOven의 파일 관리자를 사용하면 사이트의 파일 및 폴더를 쉽게 관리할 수 있습니다. 다음과 같은 다양한 작업을 쉽게 수행할 수 있습니다.

  • WordPress 플러그인 및 테마 설치
  • 파일 및 폴더 생성, 편집, 삭제, 이름 변경, 이동 및 추가
  • zip으로 아카이브를 만들거나 파일의 압축을 풀고 압축을 풉니다.
  • 파일 정렬
  • 파일 및 폴더 검색
  • 파일 업로드하다

파일 관리자 도구를 통해 사이트의 파일 및 폴더에 액세스하려면 먼저 WPOven 대시보드에 로그인해야 합니다. 그런 다음 작업할 사이트를 선택합니다.

clone0

그런 다음 " 도구 " 하위 메뉴를 선택하고 " 파일 관리자 시작 " 버튼을 클릭합니다.

file_manager

이제 파일 관리자에서 사이트의 파일과 폴더를 볼 수 있습니다.

file_manager1
file_manager2

"파일 추가" 버튼을 클릭하고 업로드할 압축을 푼 파일을 선택합니다.

그러나 넣을 파일은 루트 폴더에 있어야 하며 그렇지 않으면 작동하지 않습니다.

3단계: 전체 프로세스를 완료하고 제대로 작동하도록 하려면 RealFaviconGenerator에서 생성된 코드 조각을 WordPress 테마의 헤드 섹션에 추가해야 합니다.

Screenshot 17 How to Add a WordPress Favicon to Your Website? (3 Methods)

헤더 섹션에 다음 코드 스니펫을 추가하려면 헤더 및 푸터 플러그인을 설치하고 활성화해야 합니다. 그런 다음 설정 > 머리글 및 바닥글 삽입 으로 이동하여 아래 그림과 같이 머리글 섹션에 코드 조각을 붙여넣고 저장을 클릭합니다.

Screenshot 18 How to Add a WordPress Favicon to Your Website? (3 Methods)

모든 단계를 마치면 파비콘이 나타나기 시작해야 합니다.

WordPress Favicon이 표시되지 않으면 어떻게 합니까?

WordPress Favicon이 표시되지 않으면 위에서 언급한 모든 단계를 따랐음에도 다음과 같은 이유 때문일 수 있습니다.

  1. 잘못된 WordPress Favicon 파일 형식 사용 – PNG, GIF 및 JPEG는 현재 Favicon용 최신 브라우저에서 지원되는 일부 이미지 파일 형식입니다. 그러나 이전 브라우저에서는 지원되지 않습니다. 또한 대다수의 웹 브라우저에서도 WordPress Favicon.ico 파일 형식을 선호하므로 사용하는 것이 좋습니다. 호환성 문제를 피하기 위한 Ico 형식.
  2. 적절한 파비콘 크기를 구성할 수 없음 – 웹사이트에 파비콘을 표시하지 않는 또 다른 이유는 파비콘 이미지 크기와 장치 화면 크기가 호환되지 않기 때문일 수 있습니다. 이것은 다양한 크기와 해상도로 이미지의 여러 버전을 저장하는 favicon.ico 파일 형식을 사용하여 제거할 수 있습니다. 따라서 파비콘은 모든 화면 크기에서 쉽게 볼 수 있습니다.
  3. 테마와 호환되지 않는 WordPress Favicon 플러그인 – WordPress Favicon 생성기 플러그인을 사용하는 경우 현재 사용 중인 테마와 호환되지 않는 문제가 표시될 수도 있습니다. 따라서 플러그인 업데이트를 확인하고 현재 테마 및 WordPress 버전과의 호환성을 확인하는 것이 좋습니다.

요약

이제 WordPress Favicon이 브랜드 인지도와 사용자 경험 향상에 도움이 되는 방법을 알게 되었습니다. 그리고 가장 좋은 점은 모든 지침과 다음의 간단한 단계를 따르면 누구나 웹사이트에서 Favicon을 쉽게 만들고 구현할 수 있다는 것입니다.

  1. 온라인 Favicon 생성기 도구, 플러그인 사용 및 전문가의 도움과 같은 다양한 옵션을 사용하여 Favicon을 쉽게 만들 수 있습니다.
  2. WordPress 사용자 정의 옵션을 통해 웹 사이트에 쉽게 추가하거나 플러그인을 사용하거나 수동으로 수행할 수도 있습니다.

마지막으로, 이 게시물에서 언급하지 못한 가치 있는 추가 사항이 있으면 아래 댓글 섹션에 알려주십시오.

자주 묻는 질문

WordPress에 파비콘을 어떻게 추가합니까?

워드프레스 사이트에 파비콘을 추가하는 방법은 크게 세 가지가 있습니다.
1. WordPress 사용자 정의 옵션 사용
2. WordPress Favicon 플러그인의 도움을 받을 수 있습니다.
3. FTP 클라이언트를 사용하여 수동으로 추가할 수 있습니다.

WordPress 파비콘의 크기는 얼마입니까?

권장되는 WordPress Favicon 크기는 512×512픽셀입니다.

파비콘을 잘 만들려면 어떻게 해야 하나요?

다음 팁을 따라 좋은 Favicon을 만들 수 있습니다.
1. 브랜드를 보여주는 디자인을 만듭니다.
2. 파비콘은 웹사이트 로고와 유사해야 합니다.
3. 전면, 색상, 디자인은 웹사이트 테마와 일치해야 합니다.
4. 디자인은 깨끗하고 독특해야 합니다.
5. 그리고 크기와 해상도가 다른 여러 버전의 파비콘을 포함하도록 파일을 Ico 형식으로 저장합니다.