티스토리 파비콘 제작부터 구글, 네이버 노출까지
티스토리 블로그를 개설한 지 어느덧 3년 하고도 반년이 지났습니다.
3년 전, 마음이 앞서서 블로그를 개설하긴 했지만 개설 직후 글을 3개 정도만 쓰고 방치시키게 되었죠. 그러다 갑자기 게임 블로그를 만들고 싶어서 게임 쪽 티스토리를 만들었다가, 나중에는 또 개발 블로그를 만들고 싶어서 개발 주제의 티스토리도 생성했습니다.
이런 이유로 비슷한 시기에 3개의 티스토리를 생성했지만 정작 제일 중요한 포스팅(글쓰기) 자체를 많이 하지 않았기 때문에 블로그가 성장하긴 커녕 그대로 몇 년간 멈춰버렸습니다. 그런데 마음이 앞섰던 그 시기에 3개의 블로그 중 하나의 블로그(게임 블로그)에만 파비콘을 만들어서 달아놓았던 경험이 있습니다.
3년 반이 지난 지금, 설정해뒀던 파비콘은 잘 적용되고 있을까요?
티스토리 파비콘 만들기
파비콘의 적용 여부를 따지기 전에 일단 최우선적으로 파비콘을 만들어야겠죠?
먼저 파비콘을 만드는 방법에 대해 알아보겠습니다.
파비콘 크기
파비콘 크기에 대한 가이드라인은 구글 검색 센터에서 확인할 수 있습니다.
권장사항으로는 1:1 비율이면서 48x48 픽셀 이상의 크기를 지원한다고 써 있으나, 아이콘 자동 리사이징 최소화 문제나 다양한 고해상도 화면에서의 호환을 위해 48 배수 크기의 사이즈를 권장하는 편입니다. (48x48, 96x96, 144x144 등..) 실제로 사이즈를 원인으로 하여 구글 노출에서의 문제가 발생한다고 여겨지는 경우가 많기 때문에 권장 사항을 지키는 것을 추천드립니다.
그림판이나 미리캔버스, 포토샵 등을 이용해 사이즈를 조정하고 파비콘 이미지를 제작합니다. 제 경우 포토샵을 활용했지만 포토샵 사용에 제한이 있으신 분들은 미리캔버스를 이용하시면 손쉽게 파비콘 디자인을 할 수 있어 추천드립니다.
▼ 미리캔버스 사이트
디자인 플랫폼 미리캔버스
디자인 작업이 필요한가요? 5만개 이상의 무료 템플릿으로 간편하고 편하게 원하는 디자인을 만들 수 있어요.
www.miricanvas.com
크기는 조금 고민했지만 무난하게 96 x 96 사이즈로 결정했습니다.
완성시키고 보니 정작 파비콘을 적용했을 때 너무 작게 보여서 문자를 활용한 것보다는 큼직한 문양이나 그림으로 대체하면 어땠을까 하는 생각이 드네요. 만약 문자를 사용하고 싶다면 알파벳 한 두 자리를 가시성 좋게 편집하여 사용하는 것이 좋아 보입니다.
어쨌든, 디자인이 끝났다면 이미지 확장자를 png로 지정하여 저장합니다.
파비콘 확장자 변경 (png → ico)
파비콘 디자인을 완성했다면 이제 파비콘 아이콘의 확장자를 변경할 차례입니다.
그런데 굳이 확장자를 ico로 변경해야 하는 이유가 뭘까요?
그 이유는 ico 특징 중 하나로 여러 해상도를 포함할 수 있기 때문입니다. 즉, 다중 해상도를 하나의 파일에 모두 포함하여 상황에 따라 브라우저가 자동으로 적절한 크기의 이미지를 선택해서 보여준다는 의미입니다. 대부분의 브라우저가 ico 확장자를 지원하고 있기 때문에 수월한 웹사이트 식별을 위해 보통 파비콘은 ico 확장자를 많이 사용하는 편입니다.
png 확장자를 ico로 변환하기 위해 아래 사이트로 들어갑니다.
PNG ICO 변환 (온라인 무료) — Convertio
png 파일(들) 업로드 컴퓨터, Google Drive, Dropbox, URL에서 선택하거나 이 페이지에서 드래그하여 선택해 주세요.
convertio.co
파일 선택 부분을 클릭한 뒤, 변환하고자 하는 png 확장자 이미지 파일을 선택합니다.
ico 확장자로 잘 지정되어 있는지 확인 후 우측 아래의 '변환' 버튼을 클릭하여 확장자 변환을 진행합니다.
확장자 변환이 완료되면 '다운로드' 버튼을 클릭하여 아이콘을 저장합니다.
파비콘으로 사용할 이미지를 만들었으니, 이제 본격적으로 파비콘을 등록하고 구글, 네이버로의 노출까지 확대시켜 보겠습니다.
파비콘, 구글 검색 시 노출시키는 법
앞서 글의 서두에서 3년도 더 전에 파비콘만 등록시켜 둔 티스토리 블로그가 하나 있다고 언급한 적이 있었습니다.
특별한 작업 없이 단순히 블로그 관리에서 업로드해놓은 파비콘, 구글 검색에 적용이 되었을까요?
결론부터 말씀드리면 티스토리 내에서 파비콘 등록만 할 경우 구글 검색 엔진에서는 파비콘 적용이 됩니다.
다만, 구글에서 내 글이 검색 엔진에 올라가기 위해선 크롤링봇이 내 글을 크롤링 해가야 하는 과정을 거쳐야 하는데, 파비콘의 경우도 내 블로그의 링크로 구성되어있기 때문에 구글봇이 파비콘 주소를 크롤링해야 하는 과정을 거쳐야 합니다.
따라서 파비콘을 등록한 후, 구글봇이 내 파비콘 주소를 크롤링 한 뒤에 비로소 검색 엔진에 내 파비콘이 적용됩니다.
우선, [티스토리 블로그 관리 - 블로그] 경로로 들어가 파비콘을 불러와 적용합니다.
구글의 경우 이렇게 티스토리 관리 내에서 파비콘 적용만 했다면 이후 별다른 조치를 취하지 않아도 크롤링봇이 자동으로 내 파비콘을 잘 크롤링해갔을 때 며칠 내로 구글에 내 파비콘이 적용됩니다.
그렇다면 내 파비콘 주소는 어떻게 될까요?
내 파비콘 주소는 등록 후 1차적으로 '내 블로그 주소/favicon.ico' 의 형태를 지니고 있습니다.
핸카랜드 블로그 파비콘 (1차) : https://hlife-ing.tistory.com/favicon.ico
그런데 정작 저 1차 링크를 들어가 보면 2차 주소로 변경되어 이동됩니다.
핸카랜드 블로그 파비콘 (2차) : https://tistory1.daumcdn.net/tistory/5126367/28b845f4f4ce4ee5a5e47e72d4d20594
변경된 2차 주소가 파비콘의 고유한 주소이며, 1차 주소로 입력했을 때 2차 주소로 리디렉션(다시 이동)되는 구조입니다. 가만히 기다려도 크롤링 봇이 파비콘을 가져갈 수 있지만, 혹시나 조금 더 빠른 색인을 원한다면 구글 서치콘솔에서 내 홈페이지 메인 주소와 파비콘 1차 주소의 색인을 요청합니다. (시간 단축 효과는 미미한 것 같습니다.)
이처럼 내 블로그에 파비콘을 등록하고, 선택사항으로 서치콘솔에서 색인 과정까지 마쳤다면 며칠 뒤 구글에 내 파비콘이 정상적으로 노출됨을 확인할 수 있습니다.
파비콘, 네이버 검색 시 노출시키는 법
단순히 티스토리 블로그 관리에서 파비콘만 등록했다고 해서 네이버에 내 파비콘이 적용되어 보이지는 않습니다. 실제로 3년 전 파비콘을 등록했던 제 다른 게임 블로그도 구글에서의 노출은 있었지만 네이버에서는 전혀 적용되지 않았지요.
앞서 구글 노출에서 설명했던 1차 주소와 2차 주소를 기억하시나요?
네이버는 리디렉션 된 2차 주소를 찾아가지 못하기 때문에 사이트의 내부 태그로 2차 주소를 적어둬야 합니다.
먼저 '자신의 블로그주소/favicon.ico' 를 주소창에 입력하여 2차 주소로 이동 후, 2차 주소를 복사합니다.
(2차 주소는 예시로 https://tistory1.daumcdn.net/tistory/5126367/28b845f4f4ce4ee5a5e47e72d4d20594 형태의 주소를 띠고 있습니다.)
https://내 블로그 주소/favicon.ico
[내 블로그 관리 - 스킨편집 - html 편집] 으로 들어갑니다.
<head> 태그 바로 밑에 아래 태그를 삽입합니다.
리디렉션 된 파비콘 주소에는 자신의 블로그 파비콘의 2차 주소를 적으면 됩니다.
<!-- 파비콘 -->
<link rel="shortcut icon" href="리디렉션 된 파비콘 주소">
아래 그림과 같은 형태로 입력하면 됩니다.
태그 입력이 끝났다면 스킨 편집 적용을 누르면 네이버 파비콘 노출 설정이 모두 완료됩니다.
네이버의 경우 이렇게 리디렉션되는 링크를 직접 태그로 언급해야 파비콘을 찾아갈 수 있습니다.
태그를 입력했다고 해서 바로 노출되는 것이 아니고 시간이 점차 지날수록 내가 발행한 글들에서 조금씩 파비콘이 적용됩니다.
마무리
저는 무언가를 검색할 때 두 가지를 나름 의식하는 편인데 바로 발행일과 파비콘입니다.
발행일은 최신 정보를 알고 싶은 경우가 많아 비교적 최근에 발행한 글들을 살펴보는 편이고, 두 번째는 파비콘인데 무의식적으로 파비콘이 없는 글을 다소 피하게 되는 경향이 있는 것 같더라고요.
사실 광고나 스팸 링크 중에는 파비콘이 없는 경우가 종종 있기 때문에, 글이나 링크의 신뢰성을 높이기 위해서라도 파비콘은 하나쯤 달아놓는 것이 좋다고 생각합니다. 이게 참 귀찮은 것 같으면서도 하다 보면 의외로 금방 끝나더라고요.
다른 두 개의 블로그 중 하나는 구글 노출만 되어있는 상태이고, 다른 하나는 아예 파비콘 제작조차 하지 않았기 때문에 이참에 파비콘 작업을 모두 끝내놔야겠습니다.
단순하지만 자신의 블로그를 브랜딩할 수 있는 강력한 수단인 파비콘, 지금 바로 생성해 보시길 추천합니다.