Favicon

블로그를 꾸미기 앞서, 블로그의 깨알 디테일을 살려줄 수 있는 Favicon 을 설정 해본다.

Favicon 이란?

아래와 같이 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘이다.

스마트 폰 또는 PC 에서 웹 페이지를 홈화면에 추가하면 아래와 같이 나타난다.

Favicon 기본 값

보통 Favicon 을 따로 설정하지 않으면 (크롬 기준으로) 아래와 같이 (Favicon)Title 로 표기가 된다.

Favicon 이미지 만들기

Favicon 을 설정하기 위해선 당연히 Favicon 을 설정할 그림이 필요하다.
일단 Favicon 에 필요한 그림을 구하자.
Favicon 은 정사각형 최대 256 x 256 픽셀 이며,
일반 이미지 ( jpg, png 등 ) 도 가능하지만 ico 로 변환하는걸 추천한다.
( ICO Covert 를 지원하는 사이트 (ICO Converter) 에 가서
이미지를 올리면 ICO 파일을 만들어준다. 왜 ICO 를 추천할까? )

저작권 꼭 명심하자

나는 아내한테 부탁해서 아래의 코북이를 유료로 만들었다.
저작권이 있으니 가져가서 쓰면 안된다.

모든 창작물은 특허와 다르게 따로 등록을 안해도 저작권을 가지기 때문에,
인터넷에 아무 그림이나 가져오면 안된다.
( 특히나 상업적으로 이용하는 경우에 더더욱 )

Copylight 꼭 확인

어디서 그림이나 아이콘 가져올때 꼭 copylight 를 확인하자.
보통 이미지나 아이콘을 여럿 모아두는 사이트라면 꼭 명시되어 있다.
( 반대로 일반적인 홈페이지는 명시 안되어있는 경우가 많다.
쓰고 싶으면 주인에게 직접 연락을 하거나 쓰지 말자. )
이 홈페이지에 쓰인 모든 사진들은 직접 그리거나 찍었고 ( 기술 문서 제외 )
아이콘은 무료로 배포되는 것들을 가져온 것이다.
( 나중에 다룰 예정이지만 fontawesome 에서 많은 무료 아이콘을 구할 수 있다. )

Favicon 이미지 설정하기

<head> 에는 metadata 가 들어간다고 이야기 했었다.
이 Favicon 역시 metadata 이다.
<head> 와 </head> 사이에 아래와 같이 써주자.

<!-- 일반적인 Fabicon 설정. (인터넷 탭창 또는 주소창에 표기되는 아이콘) -->
<link rel="icon" href=favicon 주소 />
<!-- 아이폰용 Fabicon 설정 -->
<link rel="apple-touch-icon" href=favicon 주소 />
<!-- 인터넷 익스플로러 Fabicon -->
<link rel="short icon" type="image/x-icon" href=favicon 주소 />

각 문단의 의미

<!- 이부분은 주석 표시이다. <!- 와 -> 사이는 주석으로 무엇을 써도 반영이 되지 않는다.
<link 는 외부 리소스를 불러오는 태그이고 rel 은 현재 문서와 외부 리소스 사이의 관계를 의미한다.
<link 의 href 는 Favicon 이미지 파일의 주소를 뜻한다.
- 주소는 외부 인터넷 이미지 파일일 경우 해당 주소를 그대로 쓰면 되고,
  내 Repository 내의 이미지일 경우 Root 를 기준으로 경로를 쓰면 된다.
- 예를들어 Repository 가 D:\study\martin 이고,
  이미지가 D:\study\martin\asset\img.ico 에 존재한다면
  - Root 는 D:\study\martin 이다.
  - href 는 Root 를 기준으로 Root 를 제외한 주소가 된다. href=asset\img.ico

사실 위에 설정하는 방법을 기억하진 말자.
필요할때 인터넷 검색으로 찾아 붙이면 된다.
당연하지만 방대한 양의 태그나 기술을 외울 순 없다.

필요할때 이런게 있었지? 하고 찾아보면 된다.
link 태그가 무엇을 뜻하고, rel 가 뭔지 정도만 안다면 이번에 쓰고 까먹어도 된다.

왜 일반, 아이폰, 인터넷 익스플로러 따로 설정할까?

Favicon 이미지 확인

127.0.0.1:4000 에 접속해서 확인해보자.
웹 사이트 상단에 아이콘이 바뀌었다.

바탕화면 바로가기 화면 역시 바뀐걸 볼 수 있다.
( 기존 바로가기는 그대로이고, 바로가기를 새로 만들어야 한다. )

깨알 디테일이 생겼다.
다음엔 아래 사진같은 Open Graph 를 설정해보자.

다음 주제

[GitHub Blog - 9] Open Graph 를 설정

부록

왜 ICO File 추천하는가?
- Favicon 은 위에서 본 것처럼 브라우저 탭에 아주 작은 아이콘부터 바로가기 까지 다양한 용도로 사용된다.
  이를 위해서 아래 코드와 같은 방법으로 size 별로 여러 Favicon 설정이 가능하다.
```
  <link ... href="/favicon16.png" sizes="16x16">
  <link ..." href="/favicon32.png" sizes="32x32">
  <link ... href="/favicon64.png" sizes="64x64"> 
```
- Favicon 은 기기마다, 환경마다 필요한 크기가 다르다.
  어떤 장비는 16 픽셀 그림이 필요할 수 도 있고, 어떤 장비는 128 픽셀이 필요할 수 있다.
- 만약 내가 16 픽셀짜리 png 파일을 Favicon 으로 설정하면 어떻게 될까?
  - 128 픽셀짜리 Favicon 이 필요한데 16 픽셀짜리를 전송하면,
    16픽셀을 128 픽셀로 늘려 쓰느라 그림이 엄청 깨질 것이다.
- 만약 내가 128 픽셀짜리 png 파일을 Favicon 으로 설정하면 어떻게 될까?
  - 16, 64, 128 픽셀 어느 사이즈를 요구해도 그림은 품질을 유지할 것이다.
  - 하지만 16 픽셀을 필요로 하는데 128 픽셀짜리 그림을 보내면,
    전송 용량 낭비가 너무 크다!!
- 1MB 도 안되는 사이즈지만, 인터넷 환경에선 이런 작은 차이가 반응속도를 결정한다.
- 따라서 필요한 순간에 적절한 크기의 데이터를 보내,
  사이트의 효율을 최대한으로 올리기 위해선 ICO 파일이 좋다.
왜 일반, 아이폰, 인터넷 익스플로러 따로 설정할까?
- Favicon 아니라 이후에도 많은 것들이 서로 다른 브라우저나 버전을 신경 써줘야 한다.
  모든 기술이 통합이 된게 아니기 때문에,
  저걸 따로 설정해주지 않으면 크롬에선 잘 동작하지만 사파리에선 동작을 안할 수 있다
- 기술 문서들을 잘 보면 아래처럼 크롬, 사파리, 익스플로러 등 어느 버전에서 지원하는지 표가 있다.
  일단 지금은 이런게 있다 정도만 알아두자.

참조

wikipedia : favicon 정의
ICOConvert : ICO Converter
준스파파 : 홈 바로가기 만들기
코드로그 : ico, png 확장자 차이
나무위키 : 오픈그래프