WordPress Favicon을 추가 및 변경하는 방법 | WP 버프

게시 됨: 2022-01-20

사람들은 WordPress를 사용하여 개인과 기업을 위한 웹사이트를 만듭니다. 반복 방문자가 사이트가 귀하의 것임을 알리는 한 가지 방법은 사용자 정의 WordPress 파비콘을 사용하는 것입니다.

파비콘이란?

파비콘은 브라우저 탭이나 창과 특정 사이트와 관련된 책갈피 또는 즐겨찾기 목록에 표시되는 아이콘입니다. 브라우저가 사용자 정의 파비콘을 찾지 못하면 대신 기본 파비콘을 표시합니다.

WordPress 파비콘은 종종 사이트 로고의 작은 버전입니다. 로고를 파비콘 크기로 축소할 수도 있지만 일반적으로 원래 로고와 관련된 것을 만들어야 합니다.

브랜딩 및 로고 디자인은 컴퓨터에서 생성됩니다.
브랜딩 및 로고 디자인 제작 중

파비콘을 사용해야 하는 이유는 무엇입니까?

기업에는 친숙도를 높이고 잠재 고객의 신뢰를 얻을 수 있는 파비콘이 있어야 합니다. 브랜딩을 통해 방문자는 사이트를 즉시 인식할 수 있습니다. 연속성과 합법성을 추가합니다.

개인도 비슷한 이유로 파비콘을 사용할 수 있지만 대부분의 상황에서 구매보다는 재방문자가 목표입니다.

파비콘 사양

WordPress의 파비콘 크기는 16×16픽셀입니다. 그러나 일부 다른 브라우저 및 응용 프로그램은 16~195픽셀 정사각형 범위의 더 큰 크기를 사용합니다.

16×16 크기를 고수하는 경우 더 큰 크기를 사용하는 응용 프로그램은 일반적으로 크기를 확대하여 종종 픽셀화를 일으킵니다. 이 때문에 WordPress의 사이트 ID는 대신 512×512가 필요합니다.

몇 가지 일반적인 대체 크기는 다음과 같습니다.

  • 24픽셀 – Internet Explorer 9의 고정된 사이트 아이콘
  • 72픽셀 – iPad 홈 화면의 아이콘
  • 128픽셀 – Chrome 웹 스토어에서 사용되는 아이콘
  • 195픽셀 – Opera 단축 다이얼에 표시된 아이콘

파비콘 형식

잘못된 형식으로 저장하면 파비콘이 올바르게 표시되지 않습니다. 가장 일반적인 형식은 원래 요구 사항이었던 Windows ICO입니다. 여러 플랫폼에서 사용할 수 있도록 다양한 크기와 해상도를 유지할 수 있습니다. Internet Explorer에서 사용하는 유일한 형식입니다.

PNG는 거의 모든 그래픽 프로그램이 이 형식으로 저장하기 때문에 가장 사용자 친화적인 옵션이며 작은 파일 크기를 제공하고 원하는 경우 파비콘을 투명하게 할 수 있습니다.

Opera는 파비콘용 SVG 사용을 지원하지만 이것이 지원하는 유일한 브라우저입니다.

GIF, JPG 및 APNG는 옵션이지만 해상도가 더 낮고 주의가 산만해질 수 있기 때문에 덜 유용합니다. 산만함은 애니메이션 GIF 파일과 APNG 파일(애니메이션도 포함)에서 특히 발생할 수 있습니다.

파비콘 만들기

사이트에 인지도를 추가하기 위해 WordPress 파비콘을 디자인하는 것은 좋은 생각입니다. 컴퓨터의 그래픽 프로그램에서 디자인하거나 favicon-generator.org 또는 favicon.cc와 같은 무료 웹사이트를 온라인으로 사용할 수 있습니다.

Chrome 브라우저의 GMail, Slack, HubSpot, TeamWork 및 Google 드라이브에 대한 Favicon 예제
Chrome 브라우저의 Favicon 예제

파비콘의 가치를 높이려면 다음 요소를 고려하십시오.

신원

파비콘이 있는 가장 중요한 이유는 인식입니다. 제공하는 제품이나 서비스를 나타내는 디자인 또는 브랜드 로고와 일치하는 디자인을 만듭니다. 로고의 작은 버전이나 회사 이름의 주요 문자와 같이 브랜드와 직접적인 관련이 있는 이미지가 이상적입니다.

간단

크기가 작기 때문에 단순한 것이 가장 좋습니다. 기본적인 모양이나 글자는 가시성을 위해 좋은 선택입니다. 방문자가 한 눈에 알아볼 때 가장 효과적입니다. 포함하려는 세부 정보가 많을수록 방문자가 아이콘이 무엇인지 인식하기가 더 어려워집니다. 정확성, 대담함 및 명확성이 필수적입니다.

그림 물감

고대비를 사용하면 가독성이 향상되고 인식이 향상됩니다. NBC 및 Netflix와 같은 사이트의 파비콘을 고려하십시오. 그들의 사이트는 즉시 명백합니다. 명확한 색상 아이덴티티가 있는 사이트는 WordPress 파비콘에 해당 색상을 포함해야 합니다. 다시 말하지만, 간단하게 유지하십시오. 색상이 너무 많으면 이미지가 불분명해질 수 있습니다.

WordPress에 Favicon을 추가하는 방법

다음 방법 중 하나를 사용하여 WordPress 파비콘을 추가합니다.

1) WordPress에 내장된 사이트 아이콘 옵션을 사용합니다.

모양 위에 마우스를 놓고 사용자 지정을 선택한 다음 사이트 ID 탭을 선택합니다. 사이트 아이콘은 왼쪽 패널 하단에 있으며 512픽셀 또는 더 큰 정사각형 이미지를 선택할 수 있으며 필요에 따라 크기가 조정됩니다.

선택한 파일이 정사각형이 아닌 경우 WordPress는 이미지를 정사각형으로 자르는 인터페이스를 제공합니다.

새로운 WordPress 파비콘을 추가하기 위한 WP Buffs 편집기.
새 WordPress 파비콘을 추가하기 위한 WP Buffs 편집기

2) header.php 편집

현재 테마에서 header.php 파일을 편집하고 다음 코드를 추가합니다.

 <link rel=”icon” href=”https://www.yourdomain.com/favicon.ico” type=”image/x-icon” > <link rel=”shortcut icon” href=”https://www.yourdomain.com/favicon.ico” type=”image/x-icon” />

"yourdomain"을 사이트의 도메인 이름으로 바꾸고 파비콘을 웹 공간에 업로드해야 합니다.

워드프레스가 업데이트에서 변경 사항을 취소하지 못하게 하려면 수정하기 전에 하위 테마를 생성하고 메인 테마 파일 대신 하위 테마 파일을 수정합니다.

3) 워드프레스 플러그인을 사용합니다.

아래 나열된 플러그인 중 하나를 사용하십시오.

WordPress에서 파비콘을 변경하는 방법

WordPress 파비콘을 변경하는 것은 하나를 추가하는 것과 유사합니다. 동일한 방법으로 새 ​​파비콘을 업로드할 수 있습니다. 방문자가 캐시를 지우거나 하드 새로 고침을 수행하면 새 항목을 업로드하고 이전 항목을 덮어쓸 수도 있습니다.

프로세스가 혼란스럽다면 WP Buffs가 업그레이드 및 변경 사항을 처리하도록 하십시오. 이 팀은 연중무휴로 서비스와 지원을 제공합니다.

WordPress Favicon 플러그인으로 단순화

플러그인을 설치하여 WordPress 파비콘을 쉽게 추가하거나 변경하십시오.

  • 머리글 및 바닥글 삽입 플러그인을 사용하여 위의 코드를 쉽게 추가할 수 있습니다. 헤더 섹션에 코드를 붙여넣고 저장합니다.
  • 플러그인 올인원 파비콘은 파비콘 추가 과정을 쉽게 해주는 기능을 추가합니다.
  • RealFaviconGenerator는 브라우저의 요구 사항에 따라 아이콘을 생성하는 플러그인입니다.
  • 또 다른 인기 있는 플러그인은 업로드된 이미지 또는 이미 미디어 라이브러리에 있는 이미지에서 파비콘을 생성하는 Heroic Favicon Generator입니다. 이미지 파일을 업로드하기 위해 드래그 앤 드롭을 사용합니다.

내 WordPress Favicon이 표시되지 않는 이유는 무엇입니까?

사용자 오류에서 브라우저 특성에 이르기까지 파비콘 오류에 대한 몇 가지 가능한 이유가 있습니다.

은닉처

웹 사이트가 캐시되면 파비콘과 같은 요소의 변경 사항이 표시되는 데 시간이 걸립니다. 하드 새로 고침(Ctrl + F5)을 수행하거나 브라우저 캐시를 지우면 프로세스 속도를 높일 수 있습니다. 그래도 문제가 해결되지 않으면 파비콘 파일 형식을 확인하십시오. .ico 파일이 아닌 경우 브라우저와 호환되지 않을 수 있습니다.

오타

코드에 인쇄상의 오류가 있는 경우 파비콘이 표시되지 않고 오류가 발생할 수 있습니다. 인용 부호, 슬래시 또는 대괄호 누락과 같은 간단한 오류는 이미지와 전체 웹 페이지를 엉망으로 만드는 오류를 일으킵니다. 코드를 주의 깊게 확인하십시오.

워드프레스 파비콘 위치

파일 참조도 매우 구체적입니다. 링크(href 따옴표 안의 부분)가 존재하지 않는 이미지를 가리키는 경우 파비콘이 표시되지 않습니다. 주의해서 파비콘 파일을 업로드하고 정확한 링크를 복사하십시오. 이를 수행하는 가장 좋은 방법은 WordPress 내부의 미디어 라이브러리를 사용하는 것입니다.

로컬 뷰

인터넷 페이지를 로드하는 대신 로컬 컴퓨터에서 디스플레이를 확인하는 경우 대부분의 브라우저가 로컬에서 파비콘을 찾지 않기 때문에 WordPress 파비콘이 표시되지 않습니다. 인터넷에서 페이지가 방문자에게 표시되는지 확인하십시오.

잘못된 이미지 유형

파비콘 이미지의 기본 파일 형식은 .ico("이미지/ico")입니다. PNG 또는 SVG와 같은 다른 파일 형식이 사용되는 경우 테마 편집 방법을 사용할 때 코드에서 조정해야 합니다. 파일 형식은 이미지의 파일 형식과 일치해야 합니다. 예를 들어 PNG 파일은 "image/ico" 대신 "image/png"로 표시되어야 합니다.

모든 종류의 WordPress 관련 주제에 대한 자세한 내용은 WPBuffs 뉴스레터를 구독하십시오.

사람들은 또한 묻습니다.

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

WordPress 파비콘을 추가하는 가장 쉬운 방법은 사용자 정의의 사이트 ID 섹션을 사용하는 것입니다. 두 번째로 쉬운 방법은 플러그인을 사용하는 것입니다. 테마를 편집하여 수동으로 파비콘을 추가할 수도 있습니다.

WordPress의 파비콘은 어디에 있습니까?

아이콘 자체는 ​​탭이나 창 제목에 표시됩니다. 북마크 목록에도 표시됩니다. 설정은 사용자 정의 섹션의 모양 아래에 있습니다. 거기에서 사이트 ID를 클릭하면 왼쪽 창 하단에 있는 사이트 아이콘이 파비콘을 업로드하는 곳입니다.

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

16×16 픽셀이 기본 크기이지만 사이트 식별 방법을 사용하는 경우 이미지는 대신 512×512 픽셀이어야 합니다. 소프트웨어는 각 브라우저 또는 장치에 적합한 크기로 이미지를 축소합니다.

WordPress에서 파비콘을 어떻게 변경합니까?

파비콘을 추가하는 것과 같은 방식으로 파비콘을 변경합니다. 모양 → 사용자 정의 → 사이트 ID로 이동하여 플러그인에서 변경하거나 새 favicon.ico 파일을 업로드하여 이전 파일을 덮어씁니다.