J.BF Story
[HTML] favicon 생성 및 적용 본문
favicon
favorites + icon
인터넷 웹브라우저에 표시되는 웹페이지 대표 아이콘
favicon 생성
PNG나 JPG 아이콘을 favicon으로 변환해주는 사이트를 통해 favicon을 생성한다.
Favicon.ico & App Icon Generator
Favicon & App Icon Generator
Upload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons.
www.favicon-generator.org
아이콘은 아이콘을 저작권 기재 없이 무료로 사용이 가능한 'iconmonstr' 사이트를 이용하였다.
iconmonstr - Free simple icons for your next project
To use this icon, you must first accept the license agreement.
iconmonstr.com
다음과같이 아이콘 파일을 선택한 후 'Create Favicon' 버튼을 누른다.
favicon으로 변환된 결과는 다음과 같다.
여기서 'Download the generated favicon'을 눌러 favicon파일을 다운로드한다.
밑에 HTML 문서는 favicon을 웹페이지에 적용하기위해 사용되므로 복사해둔다.
웹사이트 favicon 적용
다운로드받은 favicon 파일들을 적용할 웹사이트의 원하는 디렉터리로 옮긴다.
다음과 같이 HTML 파일의 <head> 안에 favicon 생성 사이트에서 복사한 HTML 문서 내용을 넣는다.
여기서 href 속성의 경로값을 favicon 파일을 모아놓은 디렉터리 경로에 맞게 설정한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Caaat</title>
<!-- favicons -->
<link rel="apple-touch-icon" sizes="57x57" href="./assets/favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="./assets/favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="./assets/favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="./assets/favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="./assets/favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="./assets/favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="./assets/favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="./assets/favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="./assets/favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="./assets/favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="./assets/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/favicons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<h1>favicon test website</h1>
</body>
</html>
favicon을 적용된 결과는 다음과 같다.
