웹사이트를 접속하면 대부분의 경우 탭의 좌측에 작은 해당 웹사이트의 대표 아이콘이 있다.
이 아이콘은 Favicon 이라고 불린다 (favicon = favorite icon)
본 포스팅에서는 Favicon 과 Favicon을 웹페이지에 적용하는 방법에 다루고자 한다.
1. Favicon 생성하기
파일 형식
- gif, png, ico file format 지원
이미지 크기
- 너비와 높이가 모두 48px의 배수인 정사각형 (예: 48 x 48px, 96 x 96px, 144 x 144px 등)이어야 함
- Google에서는 16x16 px로 이미지의 크기를 조정해서 사용 (Google은 16x16px 파비콘을 사용하지 말 것을 권고)
favion 생성 Tool
- favicon을 직접 만들 수도 있지만, favion을 생성해주는 무료 서비스들이 있으므로 이용할 수 있다.
- favicon 생성을 위한 무료 서비스 ( https://www.favicon-generator.org/ )
2. Favicon 웹페이지에 추가하기
Favicon을 만들고 웹페이지에 추가하려면 아래와 같이 link 태그를 작성한 후 head 태그 내에 추가한다.
<link rel="icon" href="/img/logo.favicon.png"/>
<link rel="apple-touch-icon" href="/img/logo.favicon.png"/>* href 속성의 값으로는 위 코드와 같이 상대경로를 사용할 수도 있고, 절대 경로를 사용할 수도 있다
💡 shortcut icon 과 icon의 차이점?
다양한 웹사이트에 방문해서 inspect 를 확인한 결과 favion 추가를 위해 link 태그의 rel 속성으로 "shortcut icon"을 쓴 곳도 있고 "icon"을 사용한 경우도 있었다. 둘의 차이점을 알기 위해 좀 더 구글링해본 결과 mdn에서 shortcut link 타입은 non-conforming (규정에 맞지 않는) 이므로 사용하지 않아야 한다고 경고하고 있었다.
💡 apple-touch-icon 을 꼭 써야 할까?
MDN 문서를 보다가 iOS는 favion 제공을 apple-touch-icon 속성을 사용해야한다는 내용을 확인하였다. 아래와 같은 내용을 확인하였다. 애플 개발자 문서를 확인해보아도 Safari와 IOS 의 favion을 위해서 apple-touch-icon을 사용하라고 되어있다. 함께 사용해주는 것이 애플 유저들에게도 안정적으로 파비콘을 보여줄 수 있는 방법이겠다.
: Apple's iOS does not use this link type, nor the sizes attribute, like others mobile browsers do, to select a webpage icon for Web Clip or a start-up placeholder. Instead it uses the non-standard apple-touch-icon and apple-touch-startup-image respectively.
실습
html 파일에 직접 favicon을 적용하고 테스트해보았다.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="img/logo/favicon.png"/>
<link rel="apple-touch-icon" href="img/logo/favicon.png"/>
<title> Document </title>
</head>
<body>
</body>
</html>chrome에서 해당 html 파일을 열었을 때 favicon이 잘 나타나고 있는 것을 볼 수 있다 .
참고자료
https://developer.mozilla.org/en-US/docs/Glossary/Favicon
Favicon - MDN Web Docs Glossary: Definitions of Web-related terms | MDN
A favicon (favorite icon) is a tiny icon included along with a website, which is displayed in places like the browser's address bar, page tabs and bookmarks menu.
developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types
Link types - HTML: HyperText Markup Language | MDN
In HTML, link types indicate the relationship between two documents, in which one links to the other using an <a>, <area>, <form>, or <link> element.
developer.mozilla.org
https://developers.google.com/search/docs/advanced/appearance/favicon-in-search?hl=ko
Google 검색결과에 표시되는 웹사이트 파비콘 정의하기 | Google 검색 센터 | 문서 | Google Develop
파비콘이 있는 웹사이트의 경우 Google 검색결과에 포함될 수 있습니다. 다음 파비콘 검색엔진 최적화 안내를 따라 사이트가 관련 요구사항을 준수하도록 하세요.
developers.google.com
'Frontend > HTML' 카테고리의 다른 글
| HTML 기본 - HTML이란? / 태그와 속성 / HTML 문서의 기본 구조 (0) | 2022.03.08 |
|---|---|
| HTML (0) | 2022.02.26 |
댓글