파비콘 생성기 사용 방법: 이모지와 색상으로 HTML·SVG 마크업 만들기

파비콘 마크업을 준비하는 도구

이 도구는 작은 사이트 아이콘에 사용할 SVG 파비콘과 HTML 파비콘 링크 마크업을 한 번에 준비할 때 사용할 수 있습니다. 입력할 수 있는 핵심 값은 SVG 안에 표시할 이모지, SVG의 배경색과 글자색, 선택적인 아이콘 URL입니다. 생성 결과에는 SVG 자체를 나타내는 마크업과 HTML에서 사용할 수 있는 링크 마크업이 함께 포함됩니다. 따라서 완성된 이미지 파일을 내려받는 과정이라기보다, 웹페이지에 적용할 수 있는 파비콘 관련 마크업을 입력값에 맞춰 마련하는 용도로 이해하는 편이 좋습니다.

이모지는 SVG 안의 텍스트로 사용됩니다. 배경색과 글자색은 SVG의 색상에 반영되므로, 아이콘의 분위기나 페이지의 색상 구성에 맞춰 값을 정할 수 있습니다. 아이콘 URL은 필수 입력이 아니라 선택 입력입니다. URL을 입력하면 그 값이 HTML 아이콘 링크 마크업에 들어가며, 입력하지 않아도 SVG 파비콘과 HTML 마크업을 생성하는 흐름을 사용할 수 있습니다. 사이트 제목 입력란도 보이지만, 파비콘이나 생성되는 마크업에 반영되는 값은 아니므로 아이콘 디자인을 바꾸는 입력으로 생각하지 않아야 합니다.

입력값을 정하고 결과를 확인하는 순서

1. 먼저 SVG에 표시할 이모지를 정합니다. 예를 들어 렌치, 책, 별처럼 사이트의 성격을 보여 주는 이모지를 입력할 수 있습니다. 이모지 입력을 비워 둔 경우에는 렌치 이모지가 기본값으로 사용됩니다. 입력한 이모지는 생성된 SVG 안에서 텍스트로 처리되므로, 결과를 확인할 때 선택한 문자가 실제 SVG에 반영되었는지 살펴봅니다.

2. 배경색과 글자색을 각각 입력합니다. 배경색은 아이콘의 바탕에, 글자색은 이모지 텍스트에 사용됩니다. 두 값을 지정하지 않으면 배경색에는 #2563eb, 글자색에는 #ffffff이 기본값으로 적용됩니다. 한쪽 값만 비워 둔 경우에는 비워 둔 항목에 해당하는 기본값이 사용됩니다. 색상 입력을 정한 뒤에는 SVG 결과에서 두 색상이 의도한 위치에 반영되었는지 확인합니다.

3. 별도의 아이콘 URL을 HTML 링크에 포함하려는 경우에만 아이콘 URL을 입력합니다. 값이 비어 있지 않으면 생성된 HTML에 입력한 URL을 HTML에 맞게 이스케이프한 아이콘 링크 요소 두 개가 들어갑니다. URL을 입력하는 일은 해당 주소를 링크 마크업에 넣는 동작으로 이해해야 합니다. 이 단계에서 도구가 URL의 이미지를 내려받거나 이미지 형식으로 변환한다고 전제하지 않습니다.

4. 사이트 제목 입력란이 있다면 그 값의 역할을 구분합니다. 기본값은 My Site이지만, 사이트 제목은 생성되는 마크업에 사용되지 않습니다. 제목을 바꾸는 것만으로 SVG 안의 이모지, 배경색, 글자색 또는 HTML 링크 마크업이 달라진다고 기대하지 않는 것이 좋습니다. 파비콘 모양을 조정하려면 제목이 아니라 이모지와 색상 입력을 바꿔야 합니다.

5. 필요한 입력을 확인한 뒤 생성을 실행합니다. 성공적인 생성 경로에서는 생성된 파비콘 관련 결과가 표시됩니다. HTML 결과에는 SVG 데이터 URI를 사용하는 파비콘 링크가 포함되고, 별도의 SVG 파비콘 마크업도 제공됩니다. 결과를 복사하거나 적용하기 전에 HTML 부분과 SVG 부분을 서로 다른 결과로 구분해 확인합니다. 아이콘 URL을 입력했다면 HTML 결과 안에 링크 요소가 두 개 포함되었는지도 함께 살펴봅니다.

생성된 결과의 의미와 범위

생성 결과의 HTML 부분은 SVG 데이터 URI를 사용하는 파비콘 링크 마크업입니다. 별도로 제공되는 SVG 부분은 입력한 이모지와 색상을 바탕으로 만들어진 SVG 파비콘 마크업입니다. 두 결과가 함께 보인다면 하나는 HTML에서 참조하는 링크 형태이고, 다른 하나는 SVG 자체의 마크업이라는 차이로 읽으면 됩니다. 결과에 이모지가 보이는지, 배경색과 글자색이 지정한 값과 맞는지 확인하면 입력이 SVG에 반영되었는지 판단하는 데 도움이 됩니다.

아이콘 URL을 입력한 경우에는 결과의 의미를 특히 주의해서 읽어야 합니다. 입력한 URL이 HTML 아이콘 링크 요소에 삽입된 결과이지, 도구가 그 주소의 이미지를 가져와 SVG로 바꾸었다는 뜻은 아닙니다. URL을 입력하지 않은 결과라면 이 선택 입력에 따른 링크 요소는 기대하지 않고, SVG 데이터 URI 링크와 별도 SVG 마크업을 중심으로 확인합니다.

사이트 제목은 입력란의 기본값이나 변경값과 관계없이 생성 마크업에 사용되지 않습니다. 따라서 제목을 수정한 뒤 결과가 그대로 보이는 것은 제목 입력이 이 도구의 파비콘 결과에 반영되는 값이 아니기 때문입니다. 또한 이 도구가 제공하는 결과는 확인된 HTML 및 SVG 파비콘 마크업입니다. 지원된 사실만으로 별도의 래스터 이미지 파일, 이미지 변환, 이모지나 색상 문법의 유효성 확인까지 제공한다고 판단해서는 안 됩니다.

사용 예시

개인 블로그에 어울리는 어두운 배경의 렌치 이모지 파비콘 마크업을 준비하려는 상황입니다.

개인 블로그용 입력으로 렌치 이모지를 선택하고 배경색에 #111827, 글자색에 #f9fafb를 입력한 뒤 생성을 실행합니다.

생성 결과에 HTML 파비콘 링크 마크업과 SVG 파비콘 마크업이 함께 표시됩니다. 입력한 렌치 이모지는 SVG의 텍스트로, #111827과 #f9fafb는 각각 지정한 SVG 색상으로 반영됩니다.

제한 사항

• 아이콘 URL은 이미지를 내려받거나 변환하는 값이 아니라 HTML 링크 마크업에 삽입되는 값입니다. 사이트 제목 입력은 생성 결과에 사용되지 않습니다.

자주 발생하는 오류

• 이모지나 색상을 입력했는데 결과에서 기본값이 보인다면 해당 입력이 실제로 비어 있었는지 먼저 확인하십시오. 이모지가 비어 있으면 렌치 이모지가 사용되고, 색상 입력이 비어 있으면 해당 색상 항목의 기본값이 사용되므로 값을 다시 지정한 뒤 생성하십시오.

자주 묻는 질문

아이콘 URL을 반드시 입력해야 하나요?

입력하지 않아도 됩니다. 아이콘 URL은 선택 사항이며, URL이 비어 있어도 SVG 파비콘과 HTML 마크업을 생성할 수 있습니다. 입력하면 해당 URL이 HTML 아이콘 링크 요소에 삽입됩니다.

사이트 제목을 바꾸면 파비콘도 바뀌나요?

바뀌지 않습니다. 사이트 제목 입력란의 기본값은 My Site이지만, 그 입력은 생성되는 마크업에 사용되지 않습니다. 파비콘의 SVG 텍스트와 색상을 바꾸려면 이모지, 배경색 또는 글자색을 조정해야 합니다.

이모지를 입력하지 않으면 어떻게 되나요?

이모지 입력이 비어 있으면 렌치 이모지가 기본값으로 사용됩니다. 이모지를 입력하면 입력한 이모지가 생성된 SVG 안의 텍스트로 사용됩니다.