본문 바로가기
카테고리 없음

홈페이지 웹사이트 귀요미 아이콘 '파비콘' 아무나 쉽게 만들기

by 0.ℊ⚽︎🃁🂡🃑🃁☋☊♚ 2023. 7. 9.

파비콘(Favicon)이란?

웹브라우저의 주소창 혹은 즐겨찾기에 나타나는 아이콘이며 영어로 'Favicon = Favorite + icon'의 합성어이다. 즉 즐겨찾기를 위한 아이콘이라고 할 수 있다. 

주로 사용되는 크기 : 16x16

웹사이트 상 경로와 파일 이름 : 대부분 웹사이트의 루트에 위치

이름과 확장자 : favicon.ico 

크기는 작지만 고객이 기업 혹은 단체의 홈페이지 웹사이트에 방문했을 때 자신을 나타내는 identity라고 할 수 있다. 그리고 이름과 경로는 강제성이 있는 것이 아니라 바뀌어도 되지만 이 경우는 HTML을 통해 이를 알려주어야 한다.

 

파비콘 쉽게 만드는 법

웹 검색창에서 'favicon generator'라고 검색하면 여러 해당 툴을 찾을 수 있다. 그중에서도 본 글에서는 https://favicon.io/를 통해 누구나 디자인 툴을 다룰지 모르거나 해당 지식이 없어도 쉽게 파비콘을 만드는 방법에 대해 소개하고자 한다.

 

Favicon generators

해당 사이트에서는 크게 3가지 방법으로 파비콘을 제작할 수 있다.

  • 이미 가지고 있는 이미지 파일 => 파비콘 생성
  • 이미지 파일 없이 => 파비콘 생성
  • 이모지(Emoji)를 이용한 파비콘 생성

이미 나의 로고 이미지 파일이 있는 경우 파비콘 제작 방법

  1. https://favicon.io/ 접속
  2. Favicon Generator 선택 : PNG => ICO
  3. 나의 로고 이미지 파일을 선택하거나 드래그앱드롭하여 해당 위치에 놓는다.
  4. 'Download' 버튼을 클릭한다.
  5. 다운로드 폴더에서 'favicon_io.zip' 파일의 압축을 해제하고 파이콘 파일을 사용한다.

generate favicon from an image file

로고없이 경우 파비콘 제작 방법

Generate favicon from a text

  1. https://favicon.io/ 접속
  2. Favicon Generator 선택 : TEXT => ICO
  3. 생성하고자 하는 텍스트 정보 입력
  4. 아래 그림에서와 같이 프리뷰 영역에서 생성될 파비콘의 모양을 확인한다.
  5. 'Download' 버튼을 클릭한다.
  6. 다운로드 폴더에서 'favicon_io.zip' 파일의 압축을 해제하고 파이콘 파일을 사용한다.

이와 같이 간편하게 자신의 홈페이지를 대표할 아이콘인 파비콘을 누구나 쉽게 제작하여 사용하는 방법에 대해 알아보았다. 파비콘은 홈페이지 및 웹사이트의 기능의 향상을 가져오는 것은 아니지만 웹브라우저의 주소창 및 즐겨찾기에서도 자신 만의 아이콘을 나타낼 수 있고 누구나 쉽게 제작할 수 있기 때문에 적용하는 것을 추천합니다.