본문 바로가기
IT.인터넷/티스토리.블로그

파비콘 만들어 티스토리 블로그에 넣기, ICO 만드는법

by 말랑제이(malang.J) 2019. 9. 3.

파비콘 favicon
파비콘은 (favorites + icon) 사이트에 접속할 때 주소창에 표시되는 작은 즐겨찾기 아이콘을 말한다. 확장자는 Ico를 사용한다. Favorite 즐겨찾기와 icon 아이콘에서 나온 favicon이다.


파비콘 만들기 / 파비콘 확장자 ico 

1. 먼저 포토샵을 실행한다. 포토샵에서 300*300의 기존 이미지를 불러내서 그대로 사용했다. 이 이미지는 canva라는 무료 그래픽 도구 편집기를 사용해서 만들었는데 요즘 유용하게 사용하는 앱이다. 불러낸 이미지의 확장자를  png로 저장한다.

*canva앱 
canva는 무료 그래픽 디자인 편집기로 로고와 초대장, 포스터 등 다양한 템플릿과 다양한 글꼴을 제공한다. 

2. 다시 한번 이미지 사이즈를 16*16 작은 사이즈로 만들어 png로 저장해준다. PNG로 저장해 주는 이유는 다른 확장자로 저장하면 변환이 되지 않을 수도 있다. 

3. 저장된 파비콘 이미지가 들어있는 파일 폴더를 열어보면 png로 저장되어 있는 파일을 확인할 수 있다. 이 파일의 png 확장자를 강제로 ico로 변경해준다. 사실 이 강제 변경 방법이 맞는 방법인지는 모르겠는데 결과는 그래도 반영이 되는듯하다. 픽셀이 살짝 깨져서!

+ 나중에 알고보니 확장자 변경프로그램을 사용하는게 맞는듯한데 그냥 넘어가려고한다. 아래 2가지 방법중 선택해서 ico확장자로 변환하면 된다.

방법1) ico컨버터 사이트 : www.convertico.com

컨버터 홈페이지에 들어가서  Drop your .png or .ico files here, or click to select them manually! 되어 있는 곳을 클릭해서 파비콘 이미지를 첨부한다.   파비콘으로 변형이 완료되면 Your icons will appear here, once you convert them 이라고 적힌 부분에 버튼이 생긴다. 이 버튼을 클릭 저장한다. 

방법2) Favicon & App icon Generator 사이트 : www.favicon-generator.org/

사이트에 접속해서 Generate your favicon 찾아보기를 클릭해서 파비콘 이미지를 선택한다. 이미지가 첨부되면 Create Favicon 을 클릭해 파비콘을 생성한뒤에 Download the generated favicon를 눌러서 저장한다.  다운받은 파일의 압축을 풀면 다양한 크기의 파일들이 만들어져있는데 확장자가 ico인 파일을 사용하면 된다.


4. 티스토리 블로그 관리 홈으로 이동한다. 왼쪽 맨 하단의 관리> 블로그를 선택한다.  그리고 오른쪽 아이콘 밑에 파비콘 불러오기를 클릭한다. 파비콘 이미지를 선택해서 불러온 후 변경사항을 저장한다.

 


5. 저장을 하고 나면 사진처럼 파비콘이 적용된 걸 확인할 수 있다. 깨진 파비콘이긴한데 별로 티가 안난다. 


- 소소핸즈스토리 -

 

 

댓글