서론

깃헙 블로그 개설 후 여러가지 부분을 커스터마이징하고 있는데 아직 상단바에 뜨는 아이콘을 변경하지 않았다. 검색해보니 이것의 명칭이 파비콘(favicon)이라는 것을 알 수 있었다. 이번 포스팅에서는 간단하게 파비콘을 바꾸는 방법에 대해서 소개하고자 한다.

파비콘으로 사용할 이미지

블로그에 사용할 png 파일

favicon으로 사용할 이미지 파일을 먼저 구해야 한다. 오픈 소스 아이콘 파일을 제공하는 아래 사이트에서 블로그 색상에 맞추어서 다운로드 하였다. 어차피 작게 보이기 때문에 너무 화려한 아이콘은 의미가 없을 듯 해서 심플한 아이콘으로 골랐다. 만약 다른 이미지를 블로그에 사용하려고 할 때에, 블로그에 광고가 달려 있을 경우에 상업적 이용으로 간주 될 수 있기 때문에 이 점을 유의하면서 찾으면 될 것 같다.

Boxicons : Premium web friendly icons for free

Boxicons is a free collection of carefully crafted open source icons. Each icon is designed on a 24px grid with the material guidelines
boxicons.com

이미지 파비콘 변환

Favicon & App Icon Generator

Convert PNG to ICO, JPG to ICO, GIF to ICO. Create favicon.ico and iOS / Android App Icons. Edit a favicon to fit your needs, or search our gallery.
www.favicon-generator.org

사실 16x16의 png파일을 그대로 적용해도 크게 상관 없다. 다만 다양한 기기에 블로그가 노출될 때에 그에 맞추어서 이미지를 제공하지 못한다면 아이콘의 해상도가 많이 떨어져 보일 수 있을 것이다. 위 사이트에서 간단하게 이미지 파일을 여러 크기의 파비콘으로 변환하고 그에 맞는 HTML 태그까지 자동 생성해준다.

사용할 이미지 삽입(www.favicon-generator.org)

사이트에 접속 후 자신이 사용할 이미지 파일을 넣어준다.

생성된 favicon 및 HTML 태그(www.favicon-generator.org)

Download the generated favicon을 눌러서 zip파일을 저장한 후에 깃헙 블로그 레퍼지토리에 파비콘 파일들을 위치시켜 주면 된다. 경로는 /assets 폴더 아무데다 위치시켜도 상관 없고, 일단 /assets/icon폴더를 만들어 그 안에 저장하였다.

/assets/icon 폴더 생성 후 생성된 favicon 넣기

블로그 header 변경



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33



<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="google-site-verification" content="gL7v_rlH_MgG02OOs9glh9YTXQWTVfYIW0XuwyYIPQk" />
  <meta name="google-translate-customization" content="108d9124921d80c3-80e20d618ff053c8-g4f02ec6f3dba68b7-c"></meta>

  <!-- favicon 추가  -->
  <link rel="stylesheet" type="text/css" href="/assets/css/linkpreview.css" media="screen">
  <link rel="apple-touch-icon" sizes="57x57" href="/assets/icon/apple-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href="/assets/icon/apple-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="/assets/icon/apple-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="76x76" href="/assets/icon/apple-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="114x114" href="/assets/icon/apple-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/assets/icon/apple-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href="/assets/icon/apple-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/assets/icon/apple-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/assets/icon/apple-icon-180x180.png">
  <link rel="icon" type="image/png" sizes="192x192"  href="/assets/icon/android-icon-192x192.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/assets/icon/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/assets/icon/favicon-96x96.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/assets/icon/favicon-16x16.png">
  <link rel="manifest" href="/assets/icon/manifest.json">
  <meta name="msapplication-TileColor" content="#ffffff">
  <meta name="msapplication-TileImage" content="/assets/icon/ms-icon-144x144.png">
  <meta name="theme-color" content="#ffffff">

  <!-- <link rel="shortcut icon" href=""> -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/typeface-noto-sans@0.0.72/index.min.css">
  <link rel="stylesheet" href="/assets/css/main.css">
  <script src="/assets/js/main.js"></script>
</head>

자신의 블로그의 header 내용을 담고 있는 html 파일을 찾아서 헤더에 기존 favicon을 넣는 태그가 있으면 제거하고, 사이트에서 제공하는 HTML 태그를 그대로 복사하여 붙혀넣기 해주면 된다. href에 이미지 위치가 반영이 되있지 않기 때문에 `` + 이미지 파일 저장 경로를 모두 추가해주면 된다.

후기

적용된 favicon의 모습

간단하게 favicon 적용하는 방법에 대해서 알아 보았다.