728x90
반응형
1. 파비콘이란?
- 홈페이지 타이틀 옆에 붙는 조그만 아이콘
- 실제 작업시 16x16사이즈로 제작해야함
- 확장자는 ico 혹은 png 확장자로 제작하면 된다.
1) 문법
<link rel="shortcut icon" href="파비콘파일경로">
- <head>태그의 자손으로 작성
- shortcut과 icon은 반드시 띄어쓰기하여 작성
2. 아이콘 제작
- 앱(어플리케이션)처럼 등록하지는 않지만 웹도 아이콘을 홈화면의 아이콘으로 등록할 수 있다.
- 사파리나 크롬으로 모바일에서 접속하여 [홈화면 바로가기]를 선택해주면 대시보드에 아이콘을 등록할 수 있다.
- 앱으로 만들기 어려운 사이트들이 많이 사용하고 있다.
1) 아이폰에서의 웹 아이콘을 등록
- 사파리에서 아래의 버튼을 클릭하면 팝업이 뜨고 그준에 홈화면에 추가를 누르면 된다.
- 화면은 업데이트 버전에 따라 다를 수 있으니 잘 찾아보길 바란다.
- 아이콘 사이즈는 180x180으로 제작하고 모서리 둥글기는 설정하지 않으면 아이폰이 알아서 잘라 준다.
- 역시 png확장자로 제작하면 된다.
- 문법
<link rel="apple-touch-icon" sizes="180x180" href="아이콘경로">
2) 안드로이드용 아이콘 제작
- 크롬 브라우저에서 [...]아이콘을 클릭하면 [홈 화면에 추가]라는 기능이 나온다.
- 런처나 버전에 따라 보이는 것은 다를 수 있다.
- 아이콘 사이즈는 192x192로 제작하고 모서리 둥글기는 개발자가 제작한 대로 나오게 된다.
- 역시 파일 확장자는 png로 작업한다.
- 문법
<link rel="icon" sizes="192x192" href="아이콘경로">
3. 보통 웹에 사용되는 파비콘 아이콘 코드
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>아이콘 및 파비콘 달기</title>
<link rel="shortcut icon" href="favicon.png">
<link rel="apple-touch-icon" sizes="180x180" href="icon_ios.png">
<link rel="icon" sizes="192x192" href="icon_android.png">
</head>
<body>
</body>
</html>
728x90
반응형
'웹언어 > HTML5' 카테고리의 다른 글
| [HTML기초문법] 13강 SVG태그 및 이미지 활용 - OSSAM강좌 (2) | 2020.08.30 |
|---|---|
| [HTML기초문법] 12강 시멘틱구조태그 - OSSAM강좌 (0) | 2020.08.27 |
| [HTML기초문법] 10강 기본 input태그의 속성 (0) | 2020.05.19 |
| [HTML기초문법] 9강 form관련 태그input, select, textarea, label 등 (0) | 2020.05.19 |
| [HTML기초문법] 8강 iframe태그와 youtube영상 넣기 및 옵션 설정 (14) | 2020.05.18 |
