WordPress 사이트에 Favicon을 추가하는 방법

파비콘(Favicon) 또는 즐겨찾기 아이콘은 브라우저 탭의 페이지 제목 옆에 있는 작은 이미지입니다. 이 사이트 아이콘은 웹사이트 아이덴티티를 구축하는 데 필수적인 역할을 합니다.

전문 웹사이트를 소유하고 있다면 파비콘을 아직 사용하지 않았다면 사용해 보십시오. 여기에서는 그 중요성과 준비할 때 고려해야 할 사항에 대해 논의합니다. 또한 WordPress 웹 사이트에 파비콘 을 추가하는 방법에 대한 세 가지 방법을 보여줍니다.

파비콘을 사용해야 하는 이유

파비콘의 중요성을 보여주기 위해 아래 스크린샷을 보십시오.

보시다시피 각 탭에는 방문하는 웹 페이지를 구분하는 다른 아이콘이 있습니다. 브라우저에 여러 탭이 있는 경우 파비콘을 사용하여 이러한 페이지를 식별할 수 있습니다. 결과적으로 더 나은 사용자 경험을 제공합니다.

파비콘은 브라우저 탭에서만 유용하지 않습니다. 사용자가 모바일 홈 화면이나 바탕 화면에 페이지 바로 가기를 추가하면 화면에 파비콘이 표시됩니다. 또한 파비콘은 로고와 유사하게 작동할 수 있습니다. 사람들이 그것을 볼 때 그들은 즉시 귀하의 웹사이트와 브랜드를 알아볼 것입니다.

파비콘 준비하기

파비콘 을 만드는 가장 빠르고 쉬운 방법은 파비콘 생성기를 사용하는 것입니다. 대부분은 약간만 조정하면 바로 사용할 수 있는 이미지를 제공하므로 기술 지식이 필요하지 않습니다.

브랜드 로고도 사용하는 것을 고려하되 정사각형 아이콘으로 잘릴 수 있는지 확인하십시오. 또한 작은 크기에도 명확하게 볼 수 있을 만큼 단순해 보여야 합니다. Photoshop, DesignWizard 또는 GIMP와 같은 이미지 편집 프로그램을 사용하여 로고를 수정하고 크기를 조정합니다.

이미지 형식은 대부분의 브라우저에서 지원하므로 ICO 파일 사용을 권장합니다. 그러나 모든 사진 편집 소프트웨어에서 ICO 파일을 생성할 수 있는 것은 아닙니다. 따라서 옵션을 제공하는 온라인 파비콘 생성기를 사용하는 것이 좋습니다. 또는 이미지를 PNG로 저장하고 온라인 ICO 변환기를 사용하십시오. 일반적으로 크기는 16 x 16픽셀이어야 합니다.

워드프레스 4.3의 사이트 아이콘 기능을 사용한다면 미리 사진을 변환하는 것에 대해 걱정할 필요가 없습니다. 이제 모든 이미지 파일을 파비콘 으로 업로드할 수 있습니다. 그럼에도 불구하고 업로드한 후에는 모든 브라우저에서 볼 수 있는지 항상 확인하십시오.

WordPress 사이트에 파비콘을 추가하는 3가지 방법

웹사이트에 파비콘 을 추가 할 수 있는 세 가지 방법이 있습니다. 원하는 옵션을 선택하세요.

옵션 1: 워드프레스 커스터마이저

WordPress 4.3 사용자의 경우 사이트 아이콘 기능을 사용하는 것이 파비콘을 추가하는 가장 편리하고 권장되는 방법입니다.

높이와 너비가 모두 512픽셀 이상인 정사각형 이미지를 준비합니다. 파일은 128MB를 초과할 수 없습니다. 직사각형 이미지가 있는 경우 파비콘 을 업로드할 때 이미지를 자를 수 있습니다.

이미지가 준비되면 다음 단계를 따르세요.

1. WordPress 대시보드를 열고 모양으로 이동한 다음 사용자 지정을 선택합니다.

2. 사이트 아이콘이 포함된 탭을 찾습니다. 대부분의 테마는 사이트 ID에 있지만 일부는 탭 이름을 사이트 제목, 브랜드 이름, 사이트 로고 및 헤더 등으로 바꿉니다.

3. 사이트 아이콘을 선택하고 미디어 라이브러리에서 이미지를 선택하거나 새 파일을 업로드합니다.

4. 이미지 자르기 편집기로 이동합니다. 원하는 대로 위치와 비율을 조정합니다.

5. 축하합니다! 새 파비콘이 있어야 합니다. 아직 나타나지 않은 경우 WordPress는 캐시를 지우고 브라우저를 다시 시작할 것을 권장합니다.

옵션 2: 플러그인 사용

WordPress를 업데이트하지 않은 경우 플러그인을 사용 하여 파비콘 을 추가 할 수 있습니다.

일부 플러그인은 데스크탑이 아닌 장치에서 파비콘 이 표시되는 방식에 대한 더 많은 제어를 제공합니다. 예를 들어, RealFaviconGenerator의 Favicon은 다양한 운영 체제에서 아이콘 모양을 사용자 정의할 수 있는 옵션을 제공합니다.

플러그인을 사용하려면 다음 단계를 따르세요.

1. 플러그인으로 이동하여 WordPress 대시보드에서 새로 추가를 클릭합니다.
2. RealFaviconGenerator로 Favicon을 검색한 다음 플러그인을 설치 및 활성화합니다.
3. 모양을 선택하고 대시보드에서 Favicon 을 클릭합니다. 70 x 70픽셀보다 큰 정사각형 이미지를 업로드하세요. 이상적으로 그림은 260 x 260픽셀 이상이어야 합니다.
4. iOS, Android Chrome, Windows 및 Safari에서 파비콘 모양을 설정할 수 있는 페이지로 리디렉션됩니다. 그런 다음 파비콘 및 HTML 코드 생성을 클릭합니다.

해당 플러그인 외에 All in One Favicon을 사용할 수 있습니다. 플러그인을 사용하면 백 엔드와 프런트 엔드에 대해 다른 파비콘을 설정할 수 있습니다. 이렇게 하면 웹 사이트와 대시보드가 ​​모두 열려 있을 때 혼동되지 않습니다.

옵션 3: FTP 클라이언트를 통한 수동 설치

또 다른 방법은 파비콘을 WordPress 웹사이트에 수동으로 업로드하는 것입니다. 이를 위해서는 웹사이트를 FileZilla와 같은 FTP 클라이언트에 연결해야 합니다. 아이콘은 ICO 또는 PNG 형식일 수 있으며 이름은 favicon이어야 합니다.

또한 이 방법을 사용하려면 자식 테마를 만드는 것이 좋습니다. 그렇게 하면 새 테마 업데이트가 있을 때 코드 변경 사항이 제거되지 않습니다.

사이트가 연결되면 다음 단계를 따르세요.

1. FTP 클라이언트를 통해 파비콘 파일 을 현재 테마 폴더에 업로드합니다. 하위 테마를 사용하는 경우 해당 폴더에 업로드하세요.
2. 동일한 파일을 루트 디렉토리에 추가하십시오. wp-content 및 wp-admin과 동일한 폴더에 있어야 합니다. 이는 피드 리더에서 파비콘을 볼 수 있도록 하기 위한 것입니다.
3. WordPress 대시보드에서 모양으로 이동하고 테마 편집기를 클릭합니다.
4. 이제 테마 헤더 파일을 선택하고 ICO 파일이 있는 경우 태그 안에 아래 코드를 추가합니다.

<link rel=”바로 가기 아이콘” href=”<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico” />

/favicon.ico까지 href= 이후 부분을 루트 디렉토리 경로로 교체하십시오. 다음과 같이 보일 것입니다.

<link rel=”바로 가기 아이콘” href=”<http://www.yourdomainname.com/favicon.ico” />

PNG 파일이 있는 경우 파일 형식을 바꾸면 됩니다. 그런 다음 파일 업데이트.

5. 웹사이트를 새로고침합니다. 작동한다면 지금쯤 새 파비콘이 있어야 합니다.

모든 방법에 대해 모바일 장치에서 파비콘의 모양을 확인하는 것을 잊지 마십시오. 모바일 브라우저에서 웹사이트를 열고 홈 화면에 사이트를 추가합니다.

파비콘은 작지만 브랜드 인지도를 높이고 더 나은 사용자 경험을 제공할 수 있습니다. 온라인 파비콘 생성기 또는 선택한 이미지 편집 소프트웨어를 사용하여 자신만의 파비콘을 만들 수 있습니다. 이미 있는 경우 위의 세 가지 방법 중 하나를 사용하여 WordPress 웹사이트에 추가하기만 하면 됩니다. 행운을 빕니다!

WordPress LMS 웹사이트용 인기 플러그인 및 테마 자세히 보기