웹 디자이너나 개발자들이 파비콘을 만들 때 사용하는 방법대로, 사이트에 가장 잘 어울릴 파비콘의 디자인 콘셉트를 웹 코드(HTML)로 바로 적용하는 방법이 있습니다.
이미지 파일(.ico)을 따로 만들지 않고도, 코드를 조금 수정해서 파비콘 효과를 낼 수 있는 영리한 방법들이 있습니다.
1. 이모지(Emoji)를 파비콘으로 쓰기
요즘 트렌디한 웹사이트들이 자주 쓰는 방법입니다. 이미지 파일 없이 HTML <head> 태그 안에 아래 코드 한 줄만 추가하면 브라우저 탭에 예쁜 이모티콘이 파비콘으로 뜹니다.
<link rel="icon" href="https://fav.farm/📚" />
or
<link rel="icon" href="https://fav.farm/🚀" />https://fav.farm 에 접속해서 원하는 이모지를 선택 한 다음 기존 HTML 코드의 <head>와 </head> 사이에 위 코드 한 줄만 넣어 주세요.
2. 무료 파비콘 제작 사이트 활용하기
만약 고유의 디자인 파일이 꼭 필요하다면, Favicon.io 무료 툴을 이용해 1분 만에 뚝딱 만들 수 있습니다.
1. 사이트에 접속 후 상단의 'Generate' 메뉴를 선택합니다.
2. Text 필드에 R 또는 AI를 입력합니다.
3. Background 셀렉트에서 원(Circle) 또는 둥근 사각형으로 고릅니다.
4. 기존 로고와 어울리게 배경 색상(Background Color)을 보라색 계열(#6366f1)로 지정하고 다운로드합니다.
5. 다운로드한 파일 중 favicon.ico 파일을 웹서버에 올린 후 아래 코드를 <head>에 넣습니다.
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />