» web » service

파비콘 만들기 PNG to ICO 변환 및 앱 아이콘 생성

파비콘 만들기 가이드입니다. 파비콘 이미지 만드는 방법을 설명하는 글입니다. 파비콘(.ico)은 사이트, 블로그 등에 사용되는 이미지입니다. 일반적인 인터넷 사용자들은 사용할 일이 없는 이미지입니다. 이에 이 글에서 설명하는 파비콘 만들기는 사이트, 블로그 등을 운영하지 않는 이들에게는 아무런 도움이 되지 못할 수 있습니다.

파비콘 만들기

파비콘 favicon.ico

파비콘은 작은 크기의 아이콘 이미지로 웹브라우저 주소 표시줄, 탭, 즐겨찾기 등에 표시됩니다.

웹브라우저에서는 사이트를 구분할 수 있는 용도로 사용되며, 스마트폰에서는 홈 화면의 바로 가기 아이콘(앱 아이콘)으로 사용됩니다.

구버전 인터넷 익스플로러에서는 파비콘을 .ico 파일만 사용할 수 있었습니다. 하지만 크롬, 파이어폭스 등의 웹브라우저에서는 GIF, JPG, PNG, ICO 이미지를 파비콘으로 사용할 수 있습니다.

호환성 문제로 ICO 이미지를 선호하는 경향이 있으나 인터넷 익스플러로 11의 지원이 종료되는 2022년 6월 15일 이후부터는 변화가 생길 것입니다. ICO 이미지 또한 외면받다 퇴출될 것으로 예상됩니다.

 

파비콘 만들기 ICO 및 앱 아이콘

Favicon & App Icon Generator 사이트에서 제공하는 서비스(파비콘 ICO 생성 도구)를 이용하면 GIF, JPG, PNG 이미지를 파비콘(.ico) 이미지와 다양한 크기의 앱 아이콘으로 변환할 수 있습니다.

위에서도 언급했지만 파비콘 만들기는 큰 의미 없고, 함께 생성되는 다양한 크기의 앱 아이콘 이미지와 HTML 소스 코드가 유용합니다.

favicon.ico 생성기 파비콘 만들기 사이트

사이트 혹은 블로그에 생성된 앱 아이콘 이미지를 업로드하고 HTML 소스 코드를 적용하면 안드로이드 스마트폰이나 아이폰 등의 모바일 디바이스의 홈 화면에 해당 이미지로 앱 아이콘이 등록 되게 할 수 있습니다.

이에 개인 블로그는 일반적으로 별도의 이미지를 이용하기 보단 블로그 이미지 또는 블로그 로고 이미지 등을 파비콘을 파비콘으로 변환하여 사용합니다. 블로그 로고는 무료 로고 만들기 서비스를 이용하여 무료로 만들 수 있습니다.

파비콘 및 앱 아이콘과 HTML 소스 코드는 다음과 같은 방법으로 만들 수 있습니다.

 

GIF JPG PNG 이미지로 파비콘 만들기

PNG 이미지 선택 후 파비콘 만들기

  1. 파비콘 & 앱 아이콘 생성기(Favicon & App Icon Generator) 사이트에 방문합니다.
  2. 파일 선택을 클릭한 후 열기 창의 열기를 이용하여 변환할 이미지를 선택합니다.
  3. 공개 갤러리에 favicon.ico를 포함합니다(Include your favicon.ico in the public gallery)의 체크를 해제합니다.
  4. 파비콘 만들기 (Create Favicon) 버튼을 클릭합니다.

생성된 파비콘 .zip 파일 다운로드 & 소스 코드 복사

  1. 생성된 파비콘 다운로드(Download the generated favicon)를 클릭하여 .zip 압축 파일을 다운로드합니다.
  2. 생성된 HTML 소스 코드를 복사한 후 운영 중인 블로그 스킨 HTML의 헤드 영역에 삽입합니다.
    • 이때 이미지 경로(href=”이미지경로”)는 반드시 운영 중인 블로그 환경에 맞게 수정해야 합니다.

PNG 이미지 파일 확장명 변경으로 ICO 파비콘 이미지 만들기

ICO 파비콘 만들기 큰 의미는 없습니다.

예로 파일 탐색기에서 favicon-32×32.png 이미지의 .png 확장명을 .ico로 변경하여도 IOC 파비콘 이미지로 사용할 수 있습니다.

파비콘 ICO 및 앱 아이콘 생성기로 만든 압축 파일 풀면 ICO는 16 x 16 크기 하나 들어 있습니다. 32 x 32 복제한 후 확장명만 바꾸면 위와 같이 됩니다.

Favicon & App Icon Generator 사이트의 파비콘 만들기 서비스는 무료로 이용할 수 있습니다. 현재까진 사이트 회원 가입을 하지 않더라도 모든 서비스를 이용할 수 있으며 생성한 파비콘 이미지 등을 내려 받을 수 있습니다.

티스토리 스킨 편집 또는 티스토리 스킨 변경 시 html에 직접 소스를 삽입하여 블로그에 파비콘을 추가할 수 있습니다.

Leave a Comment