파비콘(Favicon) 완벽 가이드: 크기별 제작부터 등록까지 (PC, 모바일 완벽 지원)

영동2호 2025. 3. 18. 08:05

파비콘이란?

파비콘(Favicon)은 웹사이트를 대표하는 작은 아이콘으로, 브라우저 탭, 즐겨찾기 목록, 검색 결과 등에 표시되어 웹사이트의 시각적인 정체성을 확립하는 데 중요한 역할을 합니다.

이 가이드에서는 파비콘을 크기별로 제작하고, 다양한 플랫폼에 등록하는 방법을 상세하게 안내합니다.

1단계: 파비콘 디자인 및 제작 🎨

어떤 디자인으로 할지 미리 생각해 봅니다. 그다음은 이미지 제작을 합니다. PNG, ICO, SVG 등 다양한 형식을 지원하는 이미지 편집 프로그램: Adobe Photoshop, GIMP 등을 이용해 웹사이트의 로고, 브랜드 컬러, 또는 특징적인 요소를 활용하여 파비콘 디자인을 구상합니다.

2단계: 파비콘 크기별 제작 📏

다양한 디바이스 및 브라우저에서 최적화된 파비콘을 표시하기 위해 여러 크기의 파비콘을 준비하는 것이 좋습니다.

다음은 주요 크기별 파비콘 제작 가이드입니다. (필수 크기 외 추가적인 크기 제작도 고려)

크기 (픽셀)	용도	형식	비고
16x16	브라우저 탭, 즐겨찾기 목록 (기본 파비콘)	ICO, PNG
32x32	브라우저 탭 (고해상도 디스플레이), 작업 표시줄 아이콘	ICO, PNG
48x48	브라우저 주소 표시줄	ICO, PNG
96x96	Google Chrome (데스크톱)	PNG
180x180	iOS (iPhone, iPad) 홈 화면 아이콘	PNG	Apple Touch Icon (별도 등록 필요)
192x192	Android 홈 화면 아이콘	PNG	Android Manifest (별도 등록 필요)
SVG	확장 가능한 벡터 그래픽, 다양한 크기에서 깨짐 없이 선명하게 표시 가능	SVG	최신 브라우저 지원, 다크 모드 지원 (prefers-color-scheme 미디어 쿼리 활용)

3단계: 파비콘 등록 (웹사이트에 적용) 🌐

크기별로 준비된 파비콘을 스킨편집의 '파일업로드'의 /images(이미지 폴더)에 올리고, 그 파일을 활성화할 html 코드를 등록해 주면 됩니다.

파비콘 등록

웹사이트의 <head> 태그 안에 다음 코드를 추가합니다.

파란색 부분은 주소입니다. "/images/파란 부분(아이콘이름)" 이렇게 쓰면 됩니다.

설명

href 속성에는 파비콘 파일의 경로를 입력합니다. (예: /images/favicon.png)

sizes 속성에는 파비콘의 크기를 지정합니다.

type 속성에는 파일 형식을 지정합니다.

rel="apple-touch-icon"은 iOS 기기에서 홈 화면에 추가될 때 사용할 아이콘을 지정합니다.

rel="manifest"는 Android 기기에서 홈 화면에 추가될 때 사용할 웹 앱 매니페스트 파일을 지정합니다.

웹 앱 매니페스트 (site.webmanifest) 설정 (선택 사항): Android 기기에서 홈 화면에 추가될 때 사용할 웹 앱 매니페스트 파일을 생성하고, 다음 정보를 입력합니다.

{

"name": "웹사이트 이름",

"short_name": "짧은 이름",

"icons": [

{

"src": "/android-chrome-192x192.png",

"sizes": "192x192",

"type": "image/png"

{

"src": "/android-chrome-512x512.png",

"sizes": "512x512",

"type": "image/png"

}

"theme_color": "#ffffff",

"background_color": "#ffffff",

"display": "standalone"

}

설명

name 속성에는 웹사이트의 이름을 입력합니다.

short_name 속성에는 웹사이트의 짧은 이름을 입력합니다. (홈 화면에 표시)

icons 속성에는 파비콘 파일의 경로, 크기, 형식을 지정합니다.

theme_color 속성에는 웹사이트의 테마 색상을 지정합니다.

background_color 속성에는 배경 색상을 지정합니다.

display 속성에는 웹 앱 실행 모드를 지정합니다. (standalone: 전체 화면 모드)

4단계: 확인 및 테스트 ✅

캐시 삭제: 브라우저 캐시를 삭제하고 웹사이트를 다시 방문하여 파비콘이 정상적으로 표시되는지 확인합니다.

다양한 브라우저 및 기기 테스트: Chrome, Firefox, Safari 등 다양한 브라우저와 PC, 모바일 기기에서 파비콘이 올바르게 표시되는지 확인합니다.

쉽게 만드는 법!!

하지만 일일이 여러 크기를 만들려면 번거로우므로 FaviconGenerator, 파비콘 제너레이터를 이용해 한번에 만드는 방법을 알아보겠습니다.

https://www.favicon-generator.org/

Favicon & App Icon Generator

Upload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons.

www.favicon-generator.org

① 미리캔버스나ㅡ 캔바로 원하는 이미지를 크기에 상관없이 만든다. 그리고 Favicon generator

② Favicon generator에서 파일을 업로드하면 만들어 준다. 다운로드해, html 편집에서 파일 업로드에 넣어 준다.

③ html 코드를 복사한다.

④ html 편집에서 <head> 아래 넣어 준다.

어떠셨나요?

잘 만드셨기를 바랍니다.