1. 발단

  • 일단 이슈를 등록해놓기도 했고..
  • chrome에서 탭을 여러개 띄워놓을 때 구별하기 좋으라고 ..
  • 미뤄두던 파비콘 적용을 하기로했다.

2. 전개

글자 Favicon 만들기

  • Johngrib님도 관련 글을 올렸는데..
  • Johngrib님 사용한 favicon-generator.org는 별도 이미지 파일이 필요해서 일단 거르고 ..
  • 구글 폰트에서 폰트를 선택하여 글자 파비콘을 만들 수 있는 favicon.io에서 만들어 보았다.
    • 구글 폰트 사이트에서 만들 글자를 타이핑해서 모양을 보고…
    • favicon.io에서 해당 구글 폰트를 선택하면 편하게 만들 수 있다.
  • 만들고 나면, 잊지 말고 오른쪽 위에 ⬇ Download 버튼을 눌러 다운받도록 하자.

위키에 적용하기

  • favicon.io 에서 만드는 부분 아래에 보면 Installation 섹션이 있는데..
  • 다음과 같은 코드를 복사해 가도록 제공하고 있다. 
    

    1
2
3
4

    		

    <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">
  • 관련 해서 Johngrib님 Commit이 있는데 참고해서 적용하면 된다.