파비콘 (favicon) 뜻과 중요성, 무료 파비콘 만들기 및 설치 방법

오늘은 홈페이지 아이콘이죠? 파비콘(favicon)에 대하여 알아보고, 왜 특별한 작업이 필요한지, 어떻게 만들고, 설정해야 하는지 알아보도록 하겠습니다. 제대로 된 파비콘 만들기! 시작합니다.

파비콘(Favicon) 이란?

시작하기에 앞서, 파비콘이란 무엇인지에 대하여 알아보도록 하겠습니다. 파비콘의 정의는 다음과 같습니다.

파비콘(Favicon), 줄임말로 ‘Favorites Icon’을 의미하며, 웹사이트의 시각적 식별자로 사용되는 작은 그래픽 아이콘입니다.

홈페이지 아이콘, 파비콘의 중요성

여러분, 특정 웹사이트에 들어가면 크롬 탭 왼쪽에 작은 이모티콘 같은 것 보셨죠? 이게 바로 홈페이지 아이콘 역할을 하는 파비콘입니다.

• 파비콘은 웹 브라우저의 주소창, 북마크 목록, 탭 제목 옆에 표시되어 사용자가 여러 웹사이트를 쉽게 구별할 수 있도록 돕습니다.

이 작은 파비콘은 우리가 인터넷에서 많은 페이지들 사이에서 특정 웹사이트를 쉽게 찾을 수 있도록 도와주죠. 마치, 학교에서 친구의 가방이나 모자를 보고 “아, 저기 내 친구 있어!” 하고 알아보는 것처럼요!

이렇듯, 파비콘은 사용자에게 브랜드 인식을 강화하고, 웹사이트의 전문성을 높이는 중요한 역할을 합니다.

자주 사용되는 파비콘 사이즈와 ico 확장자

파비콘은 대개 웹사이트의 로고나 주요 그래픽 요소를 기반으로 하여, 16×16, 32×32, 또는 48×48 픽셀 같은 작은 크기로 제작됩니다.

그리고 파비콘의 파일 형식은 ico로 알려져 있습니다. 그래서 많은 사람들이 파이콘 만들기 사이트를 검색하고, 자신이 가지고 있는 그림파일(png, jpg 확장자) 들을 ico로 바꿔서 설정하고 있습니다.

하지만, 파비콘이란 과연 ico 파일 하나만을 의미할까요? 이렇게 생각하셨다면, 이 글을 끝까지 읽고, 정확하게 파비콘을 설정하시기 바랍니다.

제대로 된 파비콘 만들기

자, 그럼 지금부터 제대로 된 파비콘 만들기를 시작하겠습니다. 아래 방법대로 따라하시면 앞으로는 파비콘 걱정 싹 사라지도록 해드릴께요!

왜 파비콘을 하나만 만들면 안되는가?

파비콘은 앞에서 살펴봤다시피 홈페이지 아이콘입니다. 그런데 파비콘 파일은 하나가 아니예요! 왜냐하면, 여러분의 블로그 혹은 웹사이트 아이콘을 가져다가 보여주는 곳이 한 두군데가 아니기 때문입니다. 예를들어 보겠습니다.

• 상황 1: 워플 홈페이지를 여러분이 PC의 크롬 브라우저를 통해서 들어오게 되면 크롬 브라우저는 파비콘 파일 정보를 긁어다가 탭에 보여줍니다. 가장 일반적인 경우죠.
• 상황 2: 워플 홈페이지가 너무 마음에 든 구독자 한명이 핸드폰에 저장을 했습니다. 이 경우 핸드폰에 저장 된 웹사이트 아이콘이 필요하겠죠? 바로 파비콘이 필요합니다.

위 두 가지 경우를 생각했을때, 파비콘 사이즈를 하나로 설정해놓으면 상황 2 같이 해상도가 조금 높은 파일의 경우에는 화질이 깨지기 마련입니다. 즉, 파비콘이 사용될 수 있는 많은 경우를 대비해서 각각의 파일들을 만들어 줘야하는 것이죠.

파비콘 체크 사이트

현재 자신의 웹사이트의 파비콘이 앞에서 말한 많은 경우에 잘 작동하고 있는지 확인할 수 있는 파비콘 체크 사이트가 있습니다. 사이트에 이동해서 아래 그림과 같이 자신의 블로그 (혹은 웹사이트) 주소를 넣고 체크해봅시다.

워플의 파비콘 파일 하나만을 사용하여 설정했을 당시 결과 페이지 모습입니다. 여러 기기 중 아이폰이나 안드로이드 폰에서 파비콘 화질이 떨어진다는 피드백이 나옵니다. 이상적인 경우, 모든 경우 별로 녹색으로 나와야 합니다.

무료 파비콘 사이트 추천

앞에서 이야기 해드린 파비콘 체크 사이트인 리얼 파비콘 제너레이터 사이트는 로고 파일을 여러 경우의 파비콘에 알맞게 변경해주는 무료 파비콘 사이트 입니다. 혼자서 작업하면 아마 한시간 정도는 족히 걸릴 작업들을 자동으로 해주니 백번이고 만번이고 사용하기실 추천 해드립니다.

파비콘을 만들기 위해서 자신의 로고 파일을 준비해야 합니다. 이미지 해상도는 적어도 260×260 이상의 png, 혹은 jpg 파일을 준비하면 됩니다.

이렇게 준비된 파일을 아래 그림 오른쪽의 “Select your Favicon image”를 누른 후 넣어주면 됩니다.

그러면 다음 화면으로 넘어가서 아래 화면과 같이 각 상황별로 파비콘이 어떻게 보여질지 미리보기 화면과 세부 설정 창이 나오는데, 자신이 원하는대로 배경색이나 타입을 지정하면 됩니다.

macOS 용 파비콘의 경우, 저는 모노크롬 타입과 배경색을 워플의 테마색으로 변경해줬습니다.

제대로 된 파비콘 설치 방법 (적용법)

최종 설정을 마치고, 페이지 맨 아래쪽의 Generate your Favicons and HTML code 버튼을 클릭하면, 다음과 같은 결과 창이 나오게 됩니다.

Favicon package라는 버튼을 클릭하면, zip파일이 받아질 것 입니다. 이 zip 파일에는 총 10개의 파비콘으로 사용될 파일들이 들어있죠. (정말 많죠?)

• 16, 32, 150, 192, 384 사이즈의 정사각 png 파일들
• 애플 노트북 터치 파비콘 전용 파일
• 그 외 많은 파일들

이 파일들을 홈페이지 루트 폴더에 설치해줘야 하는데요. 각 호스팅 마다 루트 폴더 파일 삽입하는 방법이 다르므로 저는 cPanel을 기준으로 설명드리겠습니다.

cPanel 루트 폴더에 파일 올리는 법

예전 블로그를 네이버 웹마스터 도구에 등록하는 방법을 설명할 때, 루트 폴더에 html을 업로드 한 적이 있죠? 기억나시나요?ㅎㅎ 차근차근 따라오시기 바랍니다.

cPanel 파일 매니저 들어가는 법

아래 그림에서처럼 cPanel의 왼쪽 섹션의 Tools > Files > File Manger를 선택해서 파일을 올릴 수 있는 화면으로 이동합니다.

cPanel 파일 매니저에서 루트 폴더 이동방법

다음과 같이 보이는 화면에서 일단, 오른쪽 상단에 settings를 클릭해서 Document Root for 라는 부분을 설정해서 자신의 홈페이지 주소를 선택하여, 홈페이지 루트 폴더가 보여지도록 선택 후, Save를 눌러줍니다.

cPanel 파일 매니저 파일 업로드 방법

꼭, 왼쪽 탐색기 부분에 public_html 폴더(루트 폴더)가 열려있는 것을 확인합니다. 그 다음 위쪽의 Upload 버튼을 눌러서 아까 다운받은 파일을 올리면, 아래쪽에 박스 친 공간에 HTML 파일이 올리면 된다 생각하면 됩니다.

앞에서 다운로드 받은 파비콘 패키지 zip 파일의 10개 파일을 아래 화면 보이는 박스 안으로 드래그 앤 드랍하면 파일이 업로드 되었다는 초록색 바가 생겨납니다.

아래쪽 파란색의 Go Back to /home 링크를 누르게 되면 다시 파일 매니저 화면으로 돌아오게 되고, 탐색기 안의 파일 목록에서 방금 전에 올린 파일들을 발견할 수 있습니다.

• 만약 업로드 할 수 없는 파일이라고 뜨는 경우

간혹, 자신의 호스팅 세팅으로 인하여 zip 파일이나 그림 파일이 아닌 다른 확장자 업로드를 막아놓은 경우가 있는데, 이 경우 호스팅의 고객센터를 이용해서 자신의 도메인 루트 폴더에 zip 파일 업로드 후 압축을 풀어달라고 말하면 보통 해줍니다! 아래 영어 문장에 자신의 URL 넣어서 채팅창에 붙여넣어주세요!

Please upload the following ZIP file to the root folder of my website (자신의 블로그 URL 주소 넣을 것) and then extract it.

파비콘 설정 코드 넣는 방법

앞에서 결과창에 나온 코드를 블로그 헤더 부분에 넣어주면 끝이 납니다. 대충 아래와 같은 형식입니다. (아래 코드는 워플 사이트 전용 코드이니, 자신의 결과창의 코드를 복붙하세요!)

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#2e5d4b">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

위와 같은 코드를 헤더에 넣는 방법 역시 여러 상황에 따라서 다르지만, 저는 워플 테마로 사용하고 있는 카덴스 테마 Pro 버전과 일반적인 워드프레스로 나눠 설명드리도록 하겠습니다.

워드프레스 카덴스 테마 Pro

카덴스 테마 프로버전의 경우 사용자 정의하기에서 커스텀 코드를 바로 넣을 수 있습니다. 일단 워드프레스 사용자 정의하기 섹션으로 이동합니다.

사용자 정의하기 메뉴에서 제일 아래쪽에 Custom Scripts를 눌러줍니다.

커스텀 스크립트 기능은 워드프레스의 각 페이지 별 헤더, 바디, 푸터에 코드를 삽입할 수 있습니다. 복사한 자신의 파비콘 코드를 헤더 부분에 넣어주고, 위쪽 Publish 버튼을 클릭하면 끝이 납니다.

설정을 마치면, 사용자 정의하기에서 Site Identity > Site Icon에 있는 그림 파일은 제거해줍니다!

일반적인 워드프레스 사이트 헤더에 코드 넣기

일반적인 워드프레스 사이트에 코드를 넣는 방법으로 가장 쉬운 방법은 코드스니펫 플러그인을 사용하는 것입니다. 여러 플러그인들 중 가장 유명한 두 플러그인은 다음과 같습니다.

• Code Snippets
• WPCode

24년 6월 업데이트: 현재 워플은 WPCode를 사용하고 있습니다. 무료 버전 기준으로 기능이 훨씬 많아서 선택했습니다. 🙂

위 플러그인 중 아무거나 다운 받아서 Header 부분에 앞에서 복사한 결과 코드를 집어넣으면 됩니다. 아래 화면은 WPCode의 헤더부분에 코드를 넣는 화면입니다.

여기까지 했다면, 다시 파비콘 체커를 통해서 자신의 웹사이트 파비콘을 체크해보세요! 올바르게 파비콘을 적용한 후 워플 파비콘 체커 결과는 다음과 같이 모든 상황에서 녹색 배경이 뜨게 되어있습니다.

마치며

오늘은 파비콘이 무엇이며, 왜 잘 설정해야되는지, 어떻게 제대로 된 파비콘을 만들 수 있는지, 그리고 어떻게 설치할 수 있는지 알아보았습니다. 어때요? 여기까지 따라오셨다면, 앞으로 여러분의 웹사이트에서 파비콘 걱정을 필요없겠죠? 끝까지 따라와주셔서 감사합니다.