PNG 파일을 이미지를 파비콘으로 바꾸려면?

파비콘 ( favicon ) 이란?

 

파비콘의 정의 , 먼저 알아보기

* 파비콘은 favorite icon의 줄임말입니다. 주로 웹 브라우저의 탭, 즐겨찾기, 검색결과에서 볼 수 있는 작은 아이콘을 이야기해요. 

* 요즘은 이 파비콘을 점점 물어보시는 분들이 많은데, 이는 사용자의 경험을 중시하는 요즘 사회 분위기가 반영되는 것 같아요. 

  바로 위에서 말을 한 것처럼 파비콘은 사용자 경험과 브랜드 정체성을 강화하기 위한 중요한 역할을 해 줄 수 있지요. 

 

파비콘의 중요성 

* [브랜드 인지도] 에 도움을 줍니다. 브랜드의 로고와 같은 역할을 합니다. 사실 로고 이미지 자체로 홈페이지의 파비콘을 사용하는 곳이 대다수입니다. 

* 마찬가지로 [ 검색이 중요한 온라인 ] 에서 부수적으로 신뢰도를 높여주고 검색 결과에서 클릭을 끌어내는 것에도 용이합니다. 조금 더 특별함과 동시에 인상을 남기는 것이 가능합니다. 

 

파비콘의 크기와 형식 

파비콘의 표준크기

웹 브라우저의 경우 16x16 px 입니다. 필요에 따라 고해상도 디스플레이의 경우 32x32 이상을 사용할 때도 있습니다.

 

지원되는 파일 형식 

* ICO : 가장 보편적이고 사용이 많이 되는 파일 형식입니다. 다양한 크기와 해상도를 지원하기 때문에 처음 익히기에 좋은 포맷입니다. 

* PNG : 투명도를 지원하는 파일의 형태로 최근 사용하는 빈도가 많이 늘어난 파일형식입니다. 

* SVG : 벡터포맷입니다. 고해상도 디스플레이에서도 품질을 유지해야 하는 경우에 더욱 유용합니다. 

 

파비콘 제작하는 방법

무료도구

* 이미지 편집툴 캔바 - https://www.canva.com/ko_kr/

 

 

 

 

* png 파일을 파비콘으로 만들어주는 - https://favicon.io/#google_vignette

Favicon.io - The Ultimate Favicon Generator (Free)

 

 

 

 

 

* 파비콘 제너레이터 - https://www.favicon-generator.org

Favicon & App Icon Generator

 

 

 

 

유료도구 ( 전문도구 ) 

 

* 어도비 일러스트레이터 -https://www.adobe.com/kr/products/illustrator.html

벡터 그래픽 소프트웨어 – Adobe Illustrator

 

 

* 포토샵 -  https://www.adobe.com/kr/products/photoshop/free-trial-download.html#modal-hash

Photoshop 무료 체험판 및 무료 다운로드 | 공식 Adobe Photoshop

 

 

여기까지 파비콘의 정의와 표준 규격, 그리고 기본 이미지 파일인 png 를 파비콘으로 변경하는 방법에 대해 알아봤습니다. 

읽어주셔서 감사합니다 :)