컴퓨터

티스토리 - 파비콘 만들기(Favicon) ico 파일 변환

라온ing 2020. 11. 23. 23:18
반응형

2021.09.13 - [IT 인터넷] - 배경이 투명한 파비콘 만들기

 


 

시각적인 효과가 좋은 '파비콘' 만들기입니다.

'파비콘'이란 브라우저 상단에 사이트별로 아이콘으로 표시되는 부분!

가만두기 심심하니 튜닝의 길로~

중요포인트!! 요약!!

원하는 이미지나 아이콘을 만들기!

원하는 이미지를 파비콘 파일로 변환하기!

변환된 파비콘(~~.ico)을 티스토리에 적용 시키기!

 

원하는 이미지나 아이콘 만들기!

파비콘용으로는 사이즈가 32x32 혹은 16x16 픽셀입니다.

가로로 32칸 세로로 32칸으로 표현된 이미지인겁니다. 섬세하게 표현은 안된다는 얘기죠-_-"

여기서 포토샵, 일러스터를 다룰정도면 이글을 볼 필요없겠죠? 저흰 초~오~보를 위한 곳이니까요^^;

 

크게 2가지 방법을 알려 드리겠습니다.

첫번째는 그림판으로 32x32 픽셀에 직접 그리기입니다.

 

그림처럼 먼저 32x32픽셀의 사이즈를 만들고 보기 쉽게 격자까지 해줍니다.
1. 홈 -> 2. 크기 조정 -> 3. 가로 세로 비율 유지 -> 4. 픽셀 32혹은 16 -> 6. 보기 -> 7. 눈금자, 격자

 

원하는 픽셀로 만들어진 화면은 작기에,
'확대' 아이콘을 사용하건, Ctrl+휠로 확대하세요.

준비된 도화지에 펜, 붓, 지우개 등과 색상의 조합으로 원하는 이미지를 구현합니다.
(참고할만한 이미지를 준비해서 따라하는것도 좋아요)

마우스 위치가 픽셀로 표시되니,
대칭되게 가능. 정밀하게 가능.
만들때는 확대, 볼때는 100%

완료됬으면, 중간에 좌표로 사용된것은 지우세요!!


두번째 방법으로는 이미지를 가져오는겁니다.

이렇게 가져온 이미지를 바로 줄여줍니다.
작은 사진일수록 좋고,
단순한 이미지가 작아도 잘보여요.

 


 

원하는 이미지를 파비콘 파일로 변환하기!

 

그림판에서 만들어진것은 .png 같은 확장자를 가졌기에,
파비콘으로 등록 가능한 .ico 변환 작업이 필요합니다.
'ico 변환'으로 검색해보시면 무료 사이트가 많습니다.
다른 사이트도 마찬가지겠지만,
아래 사이트처럼 파일 선택, 확장자 선택, 파일 변환, 다운로드입니다.

검색 사이트에서 ico 무료변환 사이트 찾기!

 

'PNG'에서 'ico' 변환 확인하시고,
파일선택에서 만들어진 이미지를 선택합니다.

 

이전에 ico를 선택하지 않았더라도,
다시 한번 확인 및 선택 가능합니다.
확인 후 변환을 누릅니다.

 

수초 이내로 작업이 완료되며,
'다운로드'를 통해서 받으시면됩니다.

 


 

변환된 파비콘(~~.ico)을 티스토리에 적용 시키기!

 

티스토리 관리메뉴 맨 아래 '블로그'로 들어갑니다.

 

'불러오기'에서 만들어진 이미지를 선택합니다.
좌측에 등록된 아이콘 확인!
'변경사항 저장' 해야 저장됩니다.

 

새로고침하시면 바뀐 파비콘이 보입니다.

직접 그린 파비콘
이미지로 파비콘 생성

 

반응형