유틸리티2024년 11월 28일
🎨

파비콘 만들기 - 웹사이트 아이콘 제작 가이드

파비콘의 중요성과 다양한 크기의 아이콘을 한 번에 생성하는 방법을 알아봅니다.

파비콘 만들기 가이드

웹사이트의 작은 아이콘, 파비콘(Favicon)을 만드는 방법을 알아봅시다.

파비콘이란?

파비콘은 브라우저 탭, 북마크, 검색 결과 등에 표시되는 작은 아이콘입니다. 웹사이트의 브랜드 정체성을 나타냅니다.

파비콘 규격

기본 크기

  • 16x16px: 브라우저 탭
  • 32x32px: 작업 표시줄
  • 48x48px: Windows 사이트 아이콘
  • 180x180px: Apple Touch 아이콘

권장 형식

  • ICO: 전통적인 형식, 모든 브라우저 지원
  • PNG: 현대적인 형식, 투명 배경 지원
  • SVG: 벡터 형식, 모든 크기에서 선명

좋은 파비콘 디자인

심플하게

  • 작은 크기에서도 인식 가능
  • 복잡한 디테일 피하기
  • 1-2가지 색상으로 제한

브랜드 반영

  • 로고의 단순화 버전
  • 브랜드 색상 사용
  • 일관된 스타일

가독성

  • 굵은 선과 명확한 형태
  • 대비 강한 색상
  • 배경과 구분되는 디자인

Elyfora 파비콘 생성기

기능

  • 이미지 업로드로 자동 생성
  • 모든 필요한 크기 한 번에 생성
  • 즉시 다운로드

사용 방법

  1. 원본 이미지 업로드 (정사각형 권장)
  2. 미리보기 확인
  3. 생성 버튼 클릭
  4. ZIP으로 전체 다운로드

HTML에 적용하기

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

마무리

Elyfora의 파비콘 생성기로 웹사이트에 아이덴티티를 더하세요!

관련 글