Favicon Tutorials & Resources
파비콘에 대해 알아보고 웹사이트에 설치하는 방법을 배우세요.
파비콘이란 무엇인가요?
파비콘(Favicon)은 "Favorite Icon"의 줄임말로, 웹사이트를 나타내는 작은 아이콘입니다. 브라우저 탭, 북마크, 즐겨찾기 목록 등에 표시되어 사용자가 웹사이트를 쉽게 식별할 수 있도록 도와줍니다.
파비콘이 표시되는 위치:
- 브라우저 탭
- 북마크/즐겨찾기
- 브라우저 히스토리
- 모바일 홈 화면 바로가기
- 검색 결과 (일부)
왜 파비콘이 필요한가요?
- 브랜드 인지도 향상: 파비콘은 브랜드를 시각적으로 표현합니다
- 사용자 경험 개선: 여러 탭이 열려있을 때 쉽게 원하는 웹사이트를 찾을 수 있습니다
- 전문성: 파비콘이 있는 웹사이트가 더 전문적으로 보입니다
파비콘 설치하기: favicon.ico
1. favicon.ico 파일 준비
이 사이트의 도구를 사용하여 favicon.ico 파일을 생성하세요.
2. HTML에 추가
웹사이트의 <head> 섹션에 다음 코드를 추가하세요:
<link rel="icon" type="image/x-icon" href="/favicon.ico">3. 파일 업로드
생성한 favicon.ico 파일을 웹사이트의 루트 디렉토리에 업로드하세요.
팁: 파일 이름이 정확히 "favicon.ico"여야 하며, 웹사이트의 루트 디렉토리(예: public_html, www 등)에 위치해야 합니다.
파비콘 설치하기: favicon.png
1. favicon.png 파일 준비
PNG 형식의 파비콘을 생성하세요. 권장 크기는 32x32 또는 64x64 픽셀입니다.
2. HTML에 추가
웹사이트의 <head> 섹션에 다음 코드를 추가하세요:
<link rel="icon" type="image/png" href="/favicon.png">3. 모바일 지원 (선택사항)
모바일 디바이스를 위한 애플 터치 아이콘도 추가할 수 있습니다:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">모범 사례
- 올바른 크기: favicon.ico는 16x16, 32x32, 48x48 픽셀을 포함해야 합니다
- 단순한 디자인: 작은 크기에서도 명확하게 보이도록 단순한 디자인을 사용하세요
- 고대비: 배경과 대비가 높은 색상을 사용하세요
- 일관성: 웹사이트의 브랜드 컬러와 일치하도록 하세요
- 테스트: 여러 브라우저에서 파비콘이 제대로 표시되는지 확인하세요
문제 해결
파비콘이 표시되지 않아요
- 브라우저 캐시를 지워보세요 (Ctrl+F5 또는 Cmd+Shift+R)
- 파일 이름과 경로가 정확한지 확인하세요
- 파일이 실제로 서버에 업로드되었는지 확인하세요
- HTML 코드가 올바른지 확인하세요
파비콘이 흐릿해요
- 고해상도 이미지(최소 512x512)에서 시작하여 크기를 줄이세요
- 벡터 기반 디자인을 사용하는 것이 좋습니다