요약 (TL;DR)
- 처음부터 디자인: 로고가 없나요? 문제없습니다. 텍스트 이니셜이나 인기 있는 이모티콘을 사용하여 전문적인 아이콘을 만드세요.
- 실시간 미리보기: 라이트/다크 모드 및 브라우저 탭에서 아이콘이 어떻게 보이는지 즉시 확인하세요.
- 전체 키트:
favicon.ico, 고해상도 PNG 및 필요한 HTML 태그가 포함된 패키지를 다운로드하세요.
생성 vs 업로드
- 이것을 사용하세요: 아직 로고가 없거나 간단한 문자 기반 아이콘을 원하는 경우.
- 변환기를 사용하세요: 이미 완성된 로고 이미지가 있는 경우.
디자인 팁 (16x16 픽셀)
- 높은 대비: 어두운 배경에 밝은 텍스트가 가장 좋습니다.
- 한두 글자: “내 웹사이트”는 들어가지 않습니다. “MW”를 사용하세요.
- 굵은 글꼴: 얇은 글꼴은 작은 크기에서 사라집니다.
전체 패키지
표준화된 웹 키트를 받습니다:
favicon.ico: 데스크톱 브라우저용.icon-192.png&icon-512.png: Android/PWA용.apple-touch-icon.png: iOS용.site.webmanifest: Android용.
자주 묻는 질문 (FAQ)
이 이모티콘을 합법적으로 사용할 수 있나요?
네. 시스템 또는 오픈 소스 글꼴을 사용하여 렌더링되므로 브랜딩에 안전하게 사용할 수 있습니다.
투명 배경이 필요한가요?
텍스트/이모티콘 아이콘의 경우 채워진 도형(원 또는 사각형)을 권장합니다. 투명한 부동 텍스트는 다크 모드에서 사라질 수 있습니다.