파비콘(favicon.ico) 만들기

파비콘(favicon.ico) 만들기

 

파비콘이란?

' 파비콘 또는 패비콘이란 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘이다. '

-위키백과

 

 

파비콘에 사용할 아이콘 선정

저는 iconflat 사이트에서 무료라이센스 아이콘을 사용하고는 합니다. (라이선스 확인 및 출처 필수)

www.flaticon.com/

Flaticon, the largest database of free vector icons

 

검색어에 검색을하고 Filters에서 라이센스 Free를 선택해줍니다.

iconflat Filters창

 

원하는 아이콘을 검색하고 아이콘에 마우스를 올리면 다운로드 할 수 있는 버튼이 뜹니다.

iconflat 검색 결과창

 

다운로드 버튼을 클릭하여 아이콘 이미지를 다운로드 받습니다.

iconflat 아이콘

 

 

 

 

ICO 파일로 변환

convert 사이트를 이용해 해당 이미지를 ico 확장자로 변환하게씁니다.

변환사이트는 본인이 구글을 검색해도 되고 아래 사이트를 이용해도됩니다.

https://icoconvert.com

ICO Convert - Create Icons From PNG & JPG Images Online

 

 

Step 1. 이미지업로드

이미지 업로드 Step1

파일 추가버튼 클릭 후 파일을 선택해주고, Upload 버튼을 클릭합니다.

Upload 버튼을 누른 후 아래 Step2로 스크롤해 내려갑니다.

 

 

 

Step 2. 이미지 자르기

이미지 자르기 Step 2

내가 올린 파일 이미지가 뜨고 이미지에 마우스 드래그 시 자를 수 있는 도구가 나옵니다.

전 그대로 사용하기 위해 Step 4로 넘어갔습니다.

 

 

 

Step3는 액자나 기울기 등을 적용하는 부분입니다.

파비콘은 심플한게 좋기때문에 건너뛰었습니다.

 

 

 

Step 4. 사이즈 및 포맷설정

Step 5. 다운로드

사이즈 설정 및 다운로드 Step4, 5

 

Step4에서 크기를 설정해줍니다.

디바이스나 브라우저마다 다른 사이즈의 파비콘을 사용할 수 있습니다.

물론 최적화 시켜서 다 맞추면 좋겠지만 일반적으로는 16x16이나 32x32가 많이 사용됩니다.

저는 32x32로 선택했습니다. 

파비콘은 사이트 탭에서 사이트 이름의 옆, 즐겨찾기 시 사이트 이름 옆, 바탕화면에 바로가기 등록 시에도 사용됩니다.

 

 

Step5에서 확장자를 선택 후 Convert ICO를 클릭하면 하단에 파란색 글씨로 Download your icon(s)가 나옵니다.

Download your icon(s) 글씨를 클릭하여 파일을 다운로드합니다.

 

 

+ 만약 다운로드가 안된다면 +

Download your icon(s)위에 마우스를 올린 후 우클릭을 하여 '검사'를 눌러줍니다.

마우스 우클릭 > 검사

 

 

그렇게 하면 옆에 막 코드가 적혀있는 창(개발자도구)이 뜨는데 <a href="링크" 부분의 링크를 클릭해 줍니다.

그러면 다운로드가 됩니다.

저는 16x16 / 32x32 / 64x64 / 256x256을 선택함으로 인해 multi-size 파일이되었는데,

하나만 선택해도 됩니다.

 

 

 

multi-size 옵션

만약 여러 사이즈가 필요하다면 Step4에서 한번에 여러 사이즈르 선택하여 다운로드 받으면 됩니다.

ico파일은 하나의 파일이지만 그 안에 다양한 크기의 이미지를 포함시킬 수 있는 기능을 지원합니다.

아래 참고 이미지처럼 사이즈를 여러개 선택한 후 다운로드 받아보시면 하나의 파일입니다.

multiple sizes 방법

 

 

 

설정 완료

파비콘 설정하면 내 사이트 탭 옆에 뜨는 것을 확인 할 수 있습니다.

사이트 바로가기 설정 시에도 아이콘 확인이 가능합니다.

브라우저 탭, 파비콘 확인

사이트 바로가기, 파비콘 확인