Favicon(이하 파비콘)은 웹 페이지나 사이트를 식별하기 위해 브라우저에서 사용하는 아이콘입니다. 사이트 이름 또는 페이지 제목과 함께 브라우저 탭에 표시됩니다. 여러 개의 창이 열려 있을 때 파비콘으로 어떤 사이트에 있는지 쉽게 구분할 수 있습니다. 따라서 자신만의 파비콘을 만들어 사용하는 것을 권장합니다.
Blogger(이하 블로그스팟)도 파비콘을 표시할 수 있으며, Blogger 대시보드의 설정 메뉴 첫 부분에 파비콘을 업로드하는 메뉴가 있습니다. 업로드 후 확인하면 선명한 이미지를 업로드했음에도 불구하고 브라우저 탭에 표시되는 파비콘이 흐릿하게 보입니다. 이 글에서는 구글이나 네이버의 파비콘처럼 내 블로그의 파비콘을 선명하게 표시하는 방법을 설명합니다.
파비콘 이미지 준비하기
모든 브라우저와 호환되는 파비콘 이미지는 .ico 이미지입니다. 하지만 최근에는 .png를 많이 사용합니다. 거의 모든 브라우저에서 표시 가능하니 .png 사용을 권장합니다. 위 이미지에서 호환되는 브라우저를 참고하세요.
- 아이콘 제작은 포토샵이나 어피니티 등 이미지 편집기로 제작합니다.
- 사용하는 이미지 편집툴이 없다면 미리캔버스처럼 온라인에서 이미지를 편집, 제작할 수 있는 사이트를 이용할 수 있습니다.
- 또는 무료 아이콘을 사용하는 방법도 있습니다.
정사각의 선명한 이미지를 만들어 주세요.
저는 똥손이라 아주 아주 단순하게 동그라미 두개의 모양으로 192X192 사이즈의 사이트 아이콘을 만들어 봤습니다.
파비콘 설정하기
1단계: 대시보드에서 새글 버튼을 클릭합니다.
2단계: 이미지 업로드 버튼을 클릭하고 컴퓨터에서 파비콘 이미지를 업로드합니다. 선택을 누르지 않고 이미지 위에 마우스를 놓고 마우스 오른쪽 버튼을 클릭하여 이미지 주소를 복사합니다.
3단계: 글을 저장하지 않고 대시보드로 돌아옵니다.
4단계: 대시보드에서 테마 버튼을 누르고 맞춤설정 옆 ▼을 누르고 HTML 편집 모드로 이동합니다.
5단계: <head> 아래 파비콘 관련 메타 태그를 찾아 이미지 링크 경로를 복사한 주소로 변경합니다. 아래 예시 참고.
<!--[ Favicon ]-->
<link href='https://이미지 경로/favicon.png' rel='apple-touch-icon' sizes='120x120'/>
<link href='https://이미지 경로/favicon.png' rel='apple-touch-icon' sizes='152x152'/>
<link href='https://이미지 경로/favicon.png' rel='icon' type='image/x-icon'/>
<link href='https://이미지 경로/favicon.png' rel='shortcut icon' type='image/x-icon'/>파비콘 관련 메타 태그가 없다면 위 코드의 이미지 경로를 수정한 후 복사하여 추가합니다.
6단계: 저장 버튼을 누릅니다.
이제 완료되었습니다! 블로그 페이지를 새로고침하여 파비콘이 선명하게 표시되는지 확인합니다.
제가 가지고 있는 기기의 모든 브라우저는 문제 없이 선명하게 보입니다. 배경이 투명한 아이콘을 사용했는데 모바일에서 홈화면에 추가하면 안드로이드는 흰색 배경, iOS는 검은색 배경에 꽉찬 이미지가 나오네요! 그래도 예뻐서 이대로 쓸 예정입니다!