소개
텍스트, 기존 이미지 또는 이모티콘으로 파비콘을 생성하고 싶으시다면 https://favicon.io/favicon-generator/ 를 추천드립니다. 파비콘 생성기는 완전 무료이며 사용하기 매우 쉽습니다. 생성된 파비콘은 모든 브라우저와 여러 플랫폼에서 작동합니다.
사용법
Text 에 원하시는 글자문구를 넣고, 라운드가 필요하다면 Rounded 를 지정하며, 폰트는 한글폰트 없지만 영문폰트는 다양하게 많아서 선택하시면 되겠습니다.
폰트를 굵게 만들기 위해서, "Extra-bold 800 Normal" 를 설정하였습니다.
폰트 크기는 80 px 로 지정하였습니다.
결과를 보면, 아래처럼 배경색에 안에 흰색으로 기재한 글자문구를 보여줍니다.
다운로드 받으면 아래처럼 파비콘 및 안드로이드, ios 에 맞게 몇가지 이미지를 제공합니다.
실사이트 적용하기
파일을 웹사이트의 루트 디렉터리에 넣습니다. 그리고 html 상단에 아래 link 구문을 넣습니다.
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
파비콘에 실무사이트에 적용해 보니, 제대로 적용된것을 보실 수 있습니다.
사이트 바로가기
https://favicon.io/favicon-generator/