HTML 아이덴티티의 표현 - 파비콘과 오픈그래프

타이틀디자인(BI, Logo)에서 만든 심플한 심볼이미지를 브라우저에 북마크(즐겨찾기) 및 앱제작시 스마트폰에 뜨는 파비콘으로 활동되는 태그를 소개합니다.

 

제목타이틀 디자인_시안A (last).pdf

1.03MB

파비콘은 브라우저상 Title과 함께 뜨는 즐겨찾기 아이콘의 줄인말로 영어로 Favicon이라 한다. 
일반적으로 ICO 파일을 만들어주는 별도 응용프로그램이 있다.

 

파비콘은 브라우저상 Title과 함께 뜨는 즐겨찾기 아이콘의 줄인말로 영어로 Favicon이라 하며, 일반적으로 ICO 파일을 만들어주는 별도 응용프로그램이 있습니다.  아래 IcoFX는 별도 설치가 필요없는 포터블입니다. 다운받아서 USB에 잘 보관하여 사용하시기 바랍니다.

 

IcoFX 1.6.zip

5.28MB

 

 

파비콘을 만들기 위해서는 기본 256X256px의 PNG이미지가 필요하다. 포토샵, 일러스트레이터에서 심볼 작업후 아이콘제작프로그램에서 불러와서 작업한 후, 아래 링크관련 태그로 삽입한다. 

 

IcoFX 사용법
01. File-Import Image
02. New Image창에서 필요한 Size는 체크, 정해진 크기가 아닌 경우에는 커스텀체크하고 생성.
03. 현재크기외 패키지내 추가시에는 Untitled-1 밑에있는 *생성하기 누르고 Size지정(필요시 반복)
    보통 크기는 256>128>64>48>32>16px 로 지정해서 팩키지 형태로 되어있다.
04. 저장시 확장자(ico)확인하고, 영문이름으로 파일저장한다.

 

 

<link rel="shortcut icon" href="/new/res/img/favicon64.ico" type="image/x-icon">
뒤에 type="image/x-icon"는 삽입이 안되도 된다.
<link rel="shortcut icon" href="/new/res/img/favicon64.ico">
<link rel="shortcut icon" href="https://www.renaultsamsungm.com/new/res/img/favicon64.ico"/>

 

 

---

 

오픈그래프(OG)은 서버공간에 웹호스팅 서비스를 하는 유료/무료 도메인에서 웹사이트를 볼 수 있다면, 공유를 통해 URL을 복사해서 SNS(카카오톡)에 붙여서 전송했을 때, URL과 제목,핵심이미지와 내용 등이 자동으로 그래픽요소로 뜨게 해주는 메타태그이다.  정상적인 서비스를 할 때에 적용가능하다.

 

<meta property="og:url" content="https://www.daum.net/">
<meta property="og:type" content="website">
<meta property="og:title" content="Daum">
<meta property="og:image" content="//i1.daumcdn.net/svc/image/U03/common_icon/5587C4E4012FCD0001">
<meta property="og:description" content="나의 관심 콘텐츠를 가장 즐겁게 볼 수 있는 Daum">