도구 실행
웹사이트에 적용할 파비콘 HTML 코드와 SVG 파비콘 마크업을 손쉽게 생성하는 온라인 도구입니다. 사용자가 지정한 이모지와 배경 색상, 글자 색상을 바탕으로 브라우저 탭에 표시할 벡터 그래픽 파비콘을 빠르게 구성할 수 있습니다. 기본 설정으로 스패너 이모지와 파란색 배경(#2563eb), 흰색 글자 색상(#ffffff)이 제공되며, 운영 중인 웹 서비스 디자인에 맞추어 원하는 16진수 색상 코드를 자유롭게 입력할 수 있습니다. 외부 이미지 주소가 있는 경우에는 아이콘 URL 항목에 해당 주소를 입력하여 추가 링크 태그가 포함된 HTML 마크업을 함께 얻을 수도 있습니다. 생성 버튼을 누르면 화면 결과 영역에 데이터 URI가 적용된 HTML 링크 태그와 독립형 SVG 마크업 코드가 즉시 출력되므로, 이를 복사하여 웹페이지 헤더 영역에 간편하게 적용할 수 있습니다.
사용 방법
- 파비콘 중심에 표시할 이모지를 입력하거나 기본 설정을 유지합니다.
- 배경색과 텍스트 색상에 원하는 색상 코드(예: #2563eb)를 입력합니다.
- 외부 이미지 경로가 필요한 경우 아이콘 URL을 입력합니다.
- 생성 버튼을 누르면 화면에 HTML 코드와 SVG 마크업이 표시됩니다.
- 완성된 코드를 복사하여 웹사이트 HTML 문서의 head 영역에 추가합니다.
예시
- 로켓 모양 이모지와 어두운 배경색(#1e293b), 밝은 텍스트(#f8fafc)를 입력하여 스타트업 웹사이트용 SVG 파비콘 및 HTML 태그를 생성하는 경우
- 기본 스패너 이모지와 파란색 배경을 유지한 채 아이콘 URL만 추가하여 외부 경로 링크가 포함된 HTML 코드를 함께 생성하는 경우
자주 묻는 질문
사이트 제목을 입력하면 생성 결과에 어떤 영향을 주나요?
사이트 제목 입력란은 값을 전달받을 수 있으나 현재 생성되는 HTML 링크 태그나 SVG 마크업 코드에는 반영되지 않습니다.
아이콘 URL을 비워두면 어떻게 되나요?
아이콘 URL을 입력하지 않아도 지정한 이모지와 색상이 적용된 SVG 파비콘 데이터 URI 및 기본 HTML 태그가 정상적으로 생성됩니다.
생성된 코드는 웹사이트 어디에 넣어야 하나요?
결과로 제공되는 HTML 링크 태그를 복사하여 웹페이지 HTML 문서의 head 태그 내부에 붙여넣으시면 브라우저 탭에 파비콘이 적용됩니다.