여행이 즐거운 디자이너 :)

[티스토리 설정] 파비콘 만들기! 본문

IT 여행🚀

[티스토리 설정] 파비콘 만들기!

sophia_:) 2020. 6. 13. 21:23
반응형

블로그 파비콘을 만들자!

 

우선 파비콘이란 무엇인가?
웹 브라우저 즐겨찾기 또는 주소 창에 뜨는 웹사이트 아이콘을 말한다. 파비콘이라고도 한다. 이름은 Favorite와 Icon의 합성어. 주로 사용하는 크기는 16×16(px)이고 확장자는 ico다. 1999년 IE 5에서부터 지원되기 시작했다. 크기가 작지만 은근히 이곳 저곳에서 많이 보이는 아이콘이기 때문에 로고나 심볼이 복잡한 서비스나 기업의 웹 디자이너들은 골머리 앓게된다. 웹사이트를 즐겨찾기할 경우 즐겨찾기 이름 앞에 그 사이트의 패비콘이 같이 뜨게 된다.

출처 : 나무위키

 

 

파비콘은 일반적으로 우리가 아는 jpg라는 이미지들과 다르게 16pxX16px 크기의 .ico라는 확장자 파일만 적용 가능합니다. 그래서 원하는 이미지 jpg가 있으면 파일을 꼭! .ico 확장자로 변환해 줘야 적용이 가능해요!

 

 

지금 소개해드리는 페이지는 파비콘으로 변환하는 사이트 입니다.

https://www.convertico.com/favicon/

 

FavICO.com - Free Online Favicon Generator : Convert image to ico file

 

www.convertico.com

 

그리고 밑에 사이트 주소는 귀여운 아이콘을 무료로 쓰실 수 있는 페이지에요!

(나중에 무료아이콘과 무료이미지를 자유롭게 쓸수 있는 사이트를 소개해드릴게요)

https://www.flaticon.com/

 

Flaticon, the largest database of free vector icons

Download all icons in SVG, PSD, PNG, EPS format or as webfonts

www.flaticon.com

 

여기에 들어가시면 귀여운 아이콘들이 있을거에요!

저는 여기 animals라는 아이콘에 코알라는 다운 받을거에용

이미지에 마우스 커서를 올리면 ... 이라는 이라는 박스가 보일거에요! 거기서 다운로드 Download PNG를 다운받으시면 뒷 배경이 없는 PNG 파일을 다운 받으실 수 있을거에요!

 

 

1. 다운받을 PNG 이미지를 바탕화면에 옮겨주세요.

2. BROWSE를 클릭해서 파비콘으로 만들 이미지를 선택합니다.

3. CREATE를 클릭하면 자동으로 이미지 변환 완료!

4. 오른쪽에 화살표 버튼을 눌러 저장하면 끝!

사이즈는 꼭 16X16으로 선택해주세요.

 

이렇게 해서 .ico 파비콘 파일이 완성 됬어요!

 

완성된 파비콘을 가지고 이제 내 티스토리 블로그 관리로 들어가주세요!

그리고 블로그 관리에 들어가서 밑을 보시면 파비콘 불러오기가 있어요! 불러오셨다면 변경사항 저장 꾹!

 

잘 따라하셨다면 상단 위에

이렇게 귀여운 코알라 파비콘이 만들어 졌을거에요^^

하시다보면 아 쉽다. 라고 하실수 있을거에요! 그럼 애드센스 승인을 기다리는 그날까지!! 꾹!

반응형