티스토리 블로그 등을 만들다 보면, 파비콘, 아이콘을 만들 수 있는 기능이 있습니다.
오늘은 파비콘, 아이콘을 만드는 이유와 AI를 통해 간단하게 만드는 방법에 대해 알아보겠습니다.
파비콘과 아이콘이란?
티스토리에서 아이콘은 댓글을 달았을 때 닉네임 앞에 표시되는 이미지이고, 파비콘은 웹사이트 접속 시 브라우저 상단 탭에 생기는 16*16 이미지입니다.
파비콘과 아이콘을 만드는 이유?
파비콘과 아이콘은 SEO에 직접적으로 영향을 미치진 않습니다.
단, 웹사이트를 대표하는 이미지로써, 신뢰성, 사용자 인지도 등 블로그 브랜딩에 큰 도움을 주고,
이는 결국 간접적으로 사용자 유입 및 유지에 도움을 준다고 할 수 있습니다.
북마크에서 해당 블로그를 한 번에 찾는다던가, 검색 결과에서도 기본 아이콘과 다른 자신만의 파비콘이 있다면 훨씬 눈에 잘 들어오겠죠? 따라서 블로그의 브랜딩을 강화하고 싶으신 분들은 해당 작업까지 진행해 주시면 좋습니다.
파비콘(Favicon) 만드는 법
파비콘 이미지 제작
- 사이즈 32*32 또는 64*64px, 해상도 72 dpi, 크기 100KB 이하의 규격을 따라 제작해 주시면 됩니다.
- 보통 64*64px를 추천드리고, 기본 사이즈가 작기 때문에, 텍스트나 복잡한 이미지는 지양하시는 게 좋습니다.
- 피그마, 포토샵, 일러스트레이터 등의 디자인 툴을 쓰셔도 되고, 별도의 툴이 없으시다면 미리캔버스 등으로 작업하셔도 됩니다.
▶▶ 미리캔버스 링크
디자인 플랫폼 미리캔버스
디자인 작업이 필요한가요? 5만개 이상의 무료 템플릿으로 간편하고 편하게 원하는 디자인을 만들 수 있어요.
www.miricanvas.com
▶▶ 캔바 링크
저는 Canva를 이용해 AI로 초안을 만들고, Figma로 폴리싱하는 방식으로 진행했습니다. 이렇게 작업하시면 디자인노하우가 크게 없으셔도 파비콘 이미지를 만드실 수 있습니다. 이 방법으로 티스토리 블로그 프로필까지 쉽게 제작했습니다.
만약 64*64px로는 원하는 이미지를 만들 수 없다면, 128*128px, 256px*256px 등의 사이즈로 제작 후, 용량을 줄이는 컨버팅 과정을 거치셔도 됩니다.
제작한 파비콘은 아래 사이트에서 웹사이트 적용 시 어떤 모습일지 미리 보는 게 가능합니다.
▶▶ 파비콘 적용 화면 미리 보기 사이트
https://realfavicongenerator.net/
Favicon Generator for perfect icons on all browsers
The ultimate favicon generator. Design your icons platform per platform and make them look great everywhere. Including in Google results pages.
realfavicongenerator.net
파비콘 이미지 ico로 변환
파비콘 제작을 완료하셨다면, ico 확장자 형태로 변환해야 사용 가능하기 때문에, 아래의 변환 사이트로 접속합니다.
*(위의 미리 보기 사이트에서도 변환이 가능하나, 해상도 조절이 안되기 때문에 아래 사이트에서 하시는 걸 추천드립니다.)
▶▶ 파비콘 ico 변환 사이트 링크 (genfavicon)
Genfavicon. Free Online Favicon Generator. Icon Generator.
What is favicon? A favicon (short for 'favorites icon'), are litle icons associated with a particular website or webpage, shown next to the site's name in the URL bar of most browsers. The most common sizes for favicons are: 16x16, 32x32, 48x48, 64x64, 128
genfavicon.com
먼저 1번에 티소트리 블로그 주소를 입력하고, 파일 선택을 눌러 제작한 파비콘 이미지를 넣고, 아래 Upload Image를 클릭합니다.
이후 우측 상단의 미리보기 화면에서 이미지가 잘리지 않고 잘 나오는지 확인한 뒤, 2번의 Caputure & Preview를 클릭합니다.
마지막으로 Download Favicon을 클릭하면 ico 확장자의 파비콘 파일을 다운로드할 수 있습니다.
티스토리 블로그에 파비콘(Favicon) 적용
원래 파비콘은 웹사이트 주소에 직접 삽입하는 식으로 적용하나, 티스토리는 자체 기능을 제공하므로 간단하게 적용할 수 있습니다.
티스토리 블로그 관리자 메뉴에 가셔서, 관리 → 블로그 설정에서 불러오기 버튼을 통해 아이콘과 파비콘을 적용해 주시면 됩니다.
이왕 각 잡고 제대로 된 블로그, 나만의 블로그를 만들어보고 싶다면 자신의 개성을 표출하는 파비콘과 아이콘 제작 및 적용 추천드립니다. 같은 맥락으로 블로그 썸네일도 잊지 마세요!
[이 글도 읽어보세요!]
티스토리 블로그 만들기 (feat. 구글 SEO 기반 티스토리 블로그 관리)
앞서 SEO의 개념을 배웠으니, 이제 본격적으로 블로그 설정을 해보겠습니다. ▶▶ 이전 글을 아직 읽지 않으셨다면 먼저 읽고 오세요! 구글 SEO의 핵심 개념 알아보기 (feat. SEO를 통한 광고
infomationpyramid.tistory.com