반응형
즐겨찾기 아이콘은 브라우저 탭의 페이지 제목 옆에 표시되는 작은 이미지이다.
HTML문서에 Favicon을 어떻게 추가할까?
원하는 이미지를 즐겨찾기로 사용할 수 있습니다. 또한 https://www.favicon.cc 과 같은 사이트에서 자신만의 즐겨찾기 아이콘을 만들 수 있다.
브라우저 탭의 페이지 제목 왼쪽에는 다음과 같은 즐겨찾기 이미지가 표시된다:
웹 사이트에 즐겨찾기 아이콘을 추가하려면 즐겨찾기 이미지를 웹 서버의 루트 디렉터리에 저장하거나, 이미지라는 이름의 루트 디렉터리에 폴더를 만들고 이 폴더에 즐겨찾기 이미지를 저장한다. 즐겨찾기 이미지의 일반적인 이름은 "favicon.ico"이다.
다음으로, 다음과 같이 <link> 요소를 "index.html" 파일에 <title> 요소 뒤에 추가한다:
| <!DOCTYPE html> <html> <head> <title>My Page Title</title> <link rel="icon" type="image/x-icon" href="/images/favicon.ico"> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html> |
이제 "index.html" 파일을 저장하고 브라우저에서 다시 로드한다. 이제 브라우저 탭이 페이지 제목 왼쪽에 즐겨찾기 이미지를 표시한다.
Favicon 파일 형식(Favicon File Format)
다음 표에서는 즐겨찾기 이미지에 대한 파일 형식 지원을 보여 준다:
| 브라우저 | ICO | PNG | GIF | JPEG | SVG |
| Edge | Yes | Yes | Yes | Yes | Yes |
| Chrome | Yes | Yes | Yes | Yes | Yes |
| Firefox | Yes | Yes | Yes | Yes | Yes |
| Opera | Yes | Yes | Yes | Yes | Yes |
| Safari | Yes | Yes | Yes | Yes | Yes |
마무리
HTML <link> 요소를 사용하여 즐겨찾기 아이콘을 삽입합니다
| 태그 | 내용 |
| <link> | 문서와 외부 리소스 간의 관계를 정한다 |
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
반응형
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML 테이블(Table) (0) | 2023.05.05 |
|---|---|
| HTML 페이지 제목(Page Title) (0) | 2023.05.04 |
| HTML <picture> 요소 (0) | 2023.05.02 |
| HTML 배경이미지(Background Images) (0) | 2023.05.01 |
| HTML 이미지 맵(Image Maps) (0) | 2023.04.30 |
댓글