티스토리 뷰
목 차
블로깅을 하다보면 구글 검색창을 자주 사용하는데 검색된 사이트마다 도메인 주소 앞에 붙는 아이콘같은 마크가 있습니다. 이것이 무엇인가? 궁금하던차에 폭풍검색하니 '파비콘'이라는 명칭을 알게 되었습니다. 그러면 이것은 어떻게 만들 수 있을까요? 역시 폭풍검색하여 다수의 블로그를 살펴보며 나름대로 해결을 하였습니다. 여기에 이 파비콘 만드는 방법을 알려드리겠습니다.
1. 파비콘이란?
파비콘(favicon, 'favorites + icon') 또는 패비콘이란 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘입니다. 파비콘 지원을 제공하는 브라우저는 일반적으로 브라우저의 주소 표시줄과 북마크 목록의 페이지 이름 옆에 페이지의 파비콘을 표시합니다. (출처 : 위키백과)
2. 이미지 만들기
1️⃣ 먼저 이미지 원본을 미리 캔버스를 사용하여 만듭니다. 블로그하시는 분들은 미리 캔버스를 너무 잘 아실텐데 1080x1080 사이즈의 페이지로 원하시는 이미지를 디자인합니다.
2️⃣ 다음은 PNG옵션 '투명한 배경' 체크하고 PNG파일로 다운로드합니다.
3️⃣ 티스토리 블로그는 파비콘을 등록하는 곳이 있습니다. 바로 블로그 메뉴의 '관리>블로그'를 클릭하면 아이콘과 파비콘을 등록할 수 있습니다. 아이콘은 32x32, 64x64 JPG, PNG 파일형식입니다. 그리고, 파비콘은 ICO파일형식입니다.
4️⃣ 아이콘은 미리 캔버스로 만든 이미지 원본 파일을 '윈도우 그림판'으로 불러들여서 64x64로 크기를 조정하여 다른이름으로 저장합니다.
5️⃣ 파비콘은 PNG 이미지 원본 파일을 ICO파일로 만들어주는 온라인 사이트에서 만듭니다. 구글문서를 참조해보면 파비콘은 너비/높이가 48px의 배수인 정사각형이어야 합니다(예: 48 x 48px, 96 x 96px, 144 x 144px 등).
3. 파비콘 등록하기
1️⃣ 블로그 메뉴 '관리>블로그'를 클릭하여 아이콘과 파비콘 파일을 등록합니다. 블로그창에 곧바로 아이콘이 표시됩니다.
2️⃣ 블로그 메뉴 '꾸미기>스킨편집'의 HTML편집으로 들어갑니다.
3️⃣ 'HTML'에 <head> 아래에 다음 코드를 추가합니다.
<link rel="icon" href="https://moneycial.com/favicon.ico">
4️⃣ '파일업로드'에 파비콘 파일을 추가합니다. 그리고, 적용을 클릭합니다.
5️⃣ 구글서치콘솔에서 도메인 주소를 색인생성 요청합니다.
4. 파비콘 확인하기
1️⃣ 3~4일즘 지나서 구글 검색창에 도메인 주소를 입력하여 파비콘이 표시되는 것을 확인합니다.
2️⃣ 브라우저 주소창에 도메인 주소를 입력하여 파비콘이 표시되는 것을 확인합니다.
5. 구글 서치 콘솔 수동색인 등록팁
아래에 구글 서치 콘솔 사용법 중 도메인 주소의 색인 생성 및 등록하는 방법을 알려드리겠습니다.