<head>
<title>My Website</title>
<link rel="icon" href="favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
</head>
apple-touch-icon: 애플 기기의 홈 화면에 추가될 아이콘을 지정합니다.
rel="icon": 파비콘임을 나타내는 속성입니다.
href="favicon.ico": 파비콘 파일의 경로를 지정합니다.
다양한 파비콘 형식과 추가 속성
.ico 파일: 가장 일반적인 파비콘 파일 형식입니다. 여러 크기의 아이콘을 하나의 파일로 저장할 수 있습니다.
.png, .jpg 파일: 다른 이미지 파일 형식도 사용할 수 있지만, .ico 파일만큼 다양한 크기의 아이콘을 지원하지 않을 수 있습니다.
추가 속성:
sizes: 파비콘의 크기를 지정합니다. 예: <link rel="icon" sizes="32x32" href="favicon-32x32.png">
type: 파비콘 파일의 MIME 타입을 지정합니다. 예: <link rel="icon" type="image/png" href="favicon.png">
<head>
<title>My Website</title>
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png">
</head>
스타일: mask-icon 속성을 사용하여 아이콘의 모양을 변경할 수 있습니다.
배경색: background-color 속성을 사용하여 아이콘의 배경색을 설정할 수 있습니다.
텍스트 색상: theme-color 메타 태그를 사용하여 웹 앱의 테마 색상을 설정할 수 있습니다.
