CSS 파비콘 적용.
파비콘은 인터넷창에 이미지를 넣는 기능입니다. CSS 소스로 아주 간단히 구현이 가능 합니다. 아래 이미지가 파비콘을 적용한 모습입니다. 티스토리 관련해서 파비콘 적용에 대해서 작성했지만 소스로는 어떻게 적용하는지 시작 하겠습니다.
소스 구문은 굉장히 간단 합니다. 그럼 테스트로 웹페이지를 하나 만들어봅시다.
source.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<!-- 저는 아이콘 파일을 ico폴더를 하나 만들었습니다. 파일명을 똑같이 입력하시면 됩니다..-->
<link rel="shortcut icon" href="ico/smile.ico">
<meta charset="utf-8" />
</head>
<body>
웹사이트에 이모티콘(파비콘)을 넣어봅시다.
</body>
</html>
위처럼 html 파일에 <link rel="shortcut icon" href="/smile.ico"> css구문 하나만 넣어주면 파비콘 적용이 끝납니다.
그런다음 파비콘을 넣기 위해서는 확장자가 ico인 파일이 필요합니다.
그래서 ico파일을 직접 만드셔도 되지만 홈페이지에서 무료로 제공되는 아이콘을 다운로드 해봅시다.
위 URL을 클릭하신뒤에 아래처럼 찾을 주제를 검색해서 다운로드 하시면 됩니다.
그후 Free버튼을 누르신뒤에 ICON SIZE를 선택 하신후 나온 이미지나 아이콘을 다운로드 받으시면 됩니다.
원하는 이미지를 눌러서 ICO형태의 파일을 눌러 다운로드 합시다.
아래 모습은 실제 파비콘이 적용된후 인터넷창에서 적용된 파비콘의 모습입니다.
개인 웹사이트나 블로그에 파비콘을 넣으셔서 개인 홈페이지를 좀더 색다르게 꾸밀수 있습니다.
