life is like this

진정한 독립 라이프를 위한 기록

1st 온라인 클래스 Adobe Dimension OPEN 자세히보기

web tutorial/tistory blog

티스토리 블로그: '파비콘' 만들기

liis 2020. 4. 14. 13:30

티스토리 블로그 꾸미기: Favicon


파비콘이란? 즐겨찾기 아이콘이라는 뜻으로 주소창 앞에 작은 아이콘으로 표시되는 것을 말한다. 티스토리 블로그 내에서도 파비콘을 등록할 수 있어서 더욱더 자신만의 블로그를 만들 수가 있다.

 

파비콘은 확장자가 'ico'라서 아이콘 형태로 바꿀 수 있는 변환 프로그램을 써야한다. 파비콘으로 변환하기 전, 포토샵 같은 디자인툴로 이미지를 먼저 만들면 가장 좋지만, 디자인 툴이 없더라도 내가 원하는 이미지가 있다면 쉽게 만들 수 있다.

 

이미지를 먼저 준비한 다음, 파비콘 변환 사이트(http://icoconvert.com)에 접속한다. 파비콘 변환 사이트는 많지만, 아래 사이트가 용량도 줄여주고 설정도 여러가지 할 수 있어서 가장 좋은 것 같다!


01. 이미지 업로드

파비콘을 위한 이미지 업로드

파비콘 변환 사이트에서 먼저 '파일 선택' 버튼 클릭 후, 원하는 이미지를 불러온 다음에 'Upload' 버튼을 클릭한다. 배경이 투명한 PNG파일을 업로드하면 더 자연스러운 아이콘을 만들 수 있다.

요즘에는 심플하게 정사각 형태의 단일 컬러의 아이콘 형태들도 많이 보이더라. 그래서 로고, 아이콘이 딱히 없거나 디자인툴이 없어서 배경이 투명한 이미지를 만들기 어렵다하더라도 자신이 좋아하는 컬러 이미지만 있어도 충분히 멋진 파비콘을 만들 수 있지 않을까 생각한다.

 

 

 

02. 이미지 자르기

파비콘 사이즈 설정

파비콘은 정사각형 모양으로 만들어줘야 하는데, 위 사이트에서 직접 이미지를 정사각형으로 자를 수 있어서 디자인툴이 없는 분들도 쉽게 만들 수 있어서 편하다. 이미지 위에서 직접 마우스로 드래그를 하면 자동으로 정사각형의 모양으로 지정이 된다. (x, y는 위치, w, h는 정사각형 크기를 뜻한다.)

 

 

 

03. 크기 지정 후 ICO로 변환하기

파비콘 포맷 설정 후 다운로드

(위 사이트에서의 3번째 단계는 생략해도 된다.) 다음은 icon 포맷을 선택하는 단계. 나는 세번째 'Favicon icon for your website'를 선택했는데, 원하는 포맷이 따로 있다면 선택하면 좋다.

'Custom sizes'를 통해서 다양한 사이즈를 선택하여 한번에 다운받을 수도 있다. 파비콘은 (용량만 괜찮다면) 사이즈별로 설정하는 것이 좋긴 하다. 기본 사이즈는 16x16이지만, 다양한 디스플레이에서 파비콘 해상도가 깨지지 않으려면 크기별로 있는 것이 좋다. 티스토리에서는 1개의 파비콘만 등록할 수 있으니까 가장 큰 사이즈를 선택해서 다운받아도 되고, 용량도 작고 가장 기본 사이즈인 16x16사이즈를 선택해도 무방하다. 

 

4단계에서 포맷 또는 사이즈를 설정한 후 5단계에서 'Convert ICO' 버튼을 클릭하면 버튼 바로 아래에 'Download your icon(s)' 링크가 생긴다. 다음 링크를 클릭하면 파비콘이 다운로드된다.

 

 

 

04. 티스토리 블로그에 파피콘 등록하기

티스토리 블로그에 파비콘 등록하는 방법

티스토리 블로그에 파비콘을 등록하는 방법은 관리자 페이지에서 '관리>블로그' 메뉴로 들어가면 된다. 파비콘 탭에서 '불러오기' 버튼 클릭 후 다운받은 파비콘을 선택하면 된다. 

 

 

 

05. 완료

주소창에서 파비콘 확인하기

등록한 파비콘은 주소창에 나오는 아이콘과 즐겨찾기 아이콘으로 바로 확인이 가능하다.

이 작은 파비콘 하나만 바꿨음에도 불구하고, 블로그가 많이 바뀐 느낌이 든다. 파비콘 하나로 쉽게 나만의 개성있는 블로그를 만들 수 있으니 모두 한번씩 시도해보시길~!


by. liis (Life is like this)