파비콘(favicon), 오픈그래프(Open Graph Protocol) 적용방법

2022.04.14

파비콘(favicon)

• 즐겨찾기(Favorites) + 아이콘(Icon)의 합성어
• 웹페이지 접속시 상단 탭에 보여지는 아이콘으로 웹사이트를 대표하는 로고(logo)와 비슷한 개념

파비콘 설정

• 일반적으로 파비콘 이미지는 16px X 16px 으로 설정해주면 됨
  아이콘 파일로 변경해 주는 사이트 ►click
• 원하는 이미지이름을 favicon.ico로 변경 후 폴더안에 favicon.ico 파일을 넣으면 설정 완료
  ->파비콘을 링크태그로 따로 제공하지 않아도 프로젝트의 경로에서 ico파일을 자동으로 찾아서 설정됨
• 좀 더 고행상도의 파비콘을 제공하고 싶다면 favico.png파일을 만들어서 링크태그에 입력해주면된다

  <link rel="icon" href="이미지이름" />

  홈페이지 파비콘 추출방법

1. 네이버 파비콘을 추출하기 위해 https://www.naver.com/ 로 접속

2. 뒤에 /favicon.ico 를 작성해준다
   

   

   
   

   

3. 새로 창이 뜨는데 마우스 우클릭 후 '다른이름으로 저장' 눌러주면 끝

오픈그래프(Open Graph Protocol)

• 링크를 붙여넣기 했을때 노출되는 이미지, 제목, 설명글
• 오픈그래프 프로토콜은 페이스북에서 처음 만든 메타태그기술
  구성태그

<meta property="og:type" content=" 웹인지 앱인지 타입 지정 " /> 
<meta property="og:site_name" content=" 사이트 이름 “/> 
<meta property="og:title" content=" 해당 링크의 제목 " /> 
<meta property="og:description" content=" 설명. 너무길지않고 간략하게 " /> 
<meta property="og:image" content=" 썸네일 이미지 " /> 
<meta property="og:url" content="  링크될 url “/>