파비콘과 오픈그래프이미지

파비콘

파비콘은 위키피디아 정의상으로는

파비콘(영어: favicon, 'favorites + icon')

From https://ko.wikipedia.org/wiki/파비콘

뜻을 가지고 있는데 어떤 페이지에 도달 하였을때 브라우저 해당 탭창에 뜨는 작은 아이콘입니다.

보통 즐겨찾기가 홈 화면에 해당 페이지를 복사하였을때 해당 아이콘이 노출되게 됩니다.

사실 없어도 대세의 지장은 없지만 이런 요소 하나하나가 완성도를 만들어 나가는 것이라고 생각하기 때문에

개인적으로는 꼭 필요한 항목이라고 생각합니다.

오픈그래프이미지

오픈그래프이미지 (OpenGraph Image)는 OG image 라고도 불리며

요약하자면 현재 문서의 초록이라고 볼 수 있습니다.

SNS가 활성화 되고 특정 페이지가 외부로 공유되는 경우가 많이때문에 이런 목차가 점점 중요해진다고 생각하는데요.

작은단위의 페이지 사이트맵이라고 생각해도 무방합니다.

보통이 요소가 직접적으로 노출되는 공간은 카톡으로 주소를 공유했을때나 메일등 에디터에 해당 URL를 붙여넣는 경우

이미지가 노출 됩니다.

디자인 작업

사실 이미지에 대한 정해진 규격은 없고 각 메신저나 서드파티앱에 따라 크기가 제각각이지만

한국에서는 카카오톡 사용비중이 높기 때문에 카카오 기준으로 작업하였습니다.

현재 카카오톡 OGIMAGE 규격은 800px X 400px 입니다.

파비콘이미지 파비콘이미지 파비콘이미지

파비콘 이미지의 경우 정사각으로 작업하면 되는데

저는 소셜등 썸네일 기준크기가 500px인 경우가 많아서 해당 크기로 작업하고 150px로 리사이징 하였습니다.

이전에는 png 파일을 지원하지 않는 브라우저가 많아서 ico 파일 변환을 하였는데

이제는 png 파일 만으로도 대부분 표현이 가능한 것 같습니다.

그리고 규격도 24 x 24, 48 x 48 이런식으로 소형 규격이었는데 이제는 브라우저 자체에서도 리사이징해서 잘 표현해주는 것 같습니다.

취향에 따라 원형이미지를 넣어도 무방합니다. 다만 저장시 png 로 설정해야 배경이 뚤린 알파값 표현을 할 수 있습니다.

코드 삽입

브라우저 별로 삽입 정의가 조금 씩 다른데 두가지 소스를 모두 넣어주면 됩니다.

<link rel="shortcut icon" href="path/to/favicon.ico">
<link rel="icon" href="path/to/favicon.png">

<meta property="og:url" content="" />
<meta property="og:title" content="" />
<meta property="og:image" content="" />
<meta property="og:description" content="" />
<meta property="og:type" content="article" />

파비콘 교체가 되지 않는 경우

카카로 로봇이 한번 저장된 이미지를 물고 있는 것 같습니다.

개발자 페이지에 접속해서 캐시 삭제 도구에 해당 URL을 입력해주면 정보가 초기화 됩니다.

https://developers.kakao.com/docs/cache

파비콘이미지 파비콘이미지

적용확인

카카오에도 정상적으로 잘 나오고 파비콘도 잘 표시되네요.

하와이안 셔츠감성으로 맞추어봤는데 나중에 여러분위기 별로 맞춰서 만들어보면 재미있을 것 같습니다.

파비콘이미지 파비콘이미지

완성이미지

파비콘이미지