브라우저 탭 왼쪽에 표시되는 아이콘, 파비콘(favicon)을 만드는 방법과 티스토리에 적용하는 방법에 대해 알아보겠습니다. 기본적으로 ico 파일은 1~512 픽셀의 파일을 여러 가지 포함하여 제작할 수 있고, 윈도우는 상황에 따라 크기를 조절하여 필요한 사이즈로 보여줍니다. 용량이 늘어나면 브라우저 트래픽에 영향을 주기 때문에 필요한 사이즈만 포함한 아이콘을 파비콘이라 부릅니다.
아이콘 및 파비콘 형식
[제작 조건 - 티스토리 기준]
아이콘 - JPG, PNG, GIF
파비콘 - ICO
최적 사이즈 - 16x16, 32x32, 64x64 픽셀
파비콘 만드는 방법
파비콘을 만들 이미지가 있으신 분은 1번만 진행하시면 됩니다. 제작을 원하시는 분은 2번의 3D그림판을 이용하거나 3번의 사이트를 활용해 제작이 가능합니다.
아이콘 변환 사이트
아이콘으로 변환할 이미지가 있을 경우 아래 해당링크로 이동합니다.
단순 파일만 변환 - convertio.co
수정 및 변환 - iconconver.com
1. [Step 1]의 [파일선택] 클릭하여 이미지 파일을 추가 후 [Upload]를 클릭합니다.
2. [Step 3]로 이동 후 원하는 모양을 선택합니다. 선택하지 않을 시 기본 파일대로 제작됩니다.
3. [Step 4] 필요한 사이즈를 모두 체크 후, [Conver ICO] →[Download your icon(s)]를 클릭합니다.
윈도우 툴로 제작
전문 프로그램을 이용하면 더 좋지만 없으신 분들을 간단하게 제작할 수 있는 방법을 소개해보겠습니다.
1. [시작] → [3D 그림판] 검색하여 앱에 들어갑니다.
2. 그림판 툴을 이용해 아이콘을 제작하거나 메뉴에서 파일을 불러오기 합니다.
3. 상단의 [캔버스] 탭으로 이동하여, [투명한 캔버스] 체크, [픽셀] 선택 후 [크기]를 조정합니다.
4. 이미지를 PNG형식으로 저장을 완료 후 아래 변환 사이트로 이동합니다.
아이콘 제작 사이트 [ 간단 ]
해당 사이트에서는 두 가지 제작방법 및 다운로드 시 한 번에 필요한 모든 사이즈를 제공합니다.
공식 홈페이지 : https://favicon.io/
텍스트로 아이콘으로 제작
TEXT → ICO 클릭 후, 아래 항목을 모두 설정하고 상단의 [Download] 버튼 클릭
① 아이콘에 표시될 텍스트 입력
② 아이콘의 모양 선택 (동그라미, 사각형...)
③ 텍스트 폰트 선택
④ 이 설정은 변경하지 않습니다
⑤ 텍스트 사이즈 선택
⑥ 텍스트 색상 선택
⑦ 아이콘 배경 선택
이모지로 아이콘 제작
IMOJI TO ICO 클릭 후, [Categories]에서 아이콘 검색 후 클릭하여 다운로드합니다.
티스토리 적용 방법
티스토리 [블로그 관리] → [관리] 탭 →블로그 설정 아래로 이동합니다.
[불러오기]를 클릭하여 파일을 추가한 후 변경사항 저장을 클릭하여 등록을 완료합니다.
여기까지 티스토리 아이콘&파비콘 제작 및 적용방법에 대해서 알아봤습니다. 파비콘은 자신의 블로그의 로고와 같은 역할을 합니다. 파비콘을 적용해 자신의 블로그를 브랜딩 하고 검색결과에 노출하여 로고를 알리고 검색에 유리하게 활용할 수 있습니다. 또한 외관상 파비콘이 있고 없고는 아주 큰 차이가 나기 때문에 설정하시는 걸 추천합니다.