favicon 간략소개
파비콘은 웹페이지에 접속했을때, 상단 탭에 보여지는 작은 아이콘을 말한다. 이 아이콘은 즐겨찾기에 웹페이지를 등록할때도 사용된다. 웹사이트를 대표하는 로고(logo)의 개념과 비슷하며, 사이트의 성격을 드러내기도 한다. 확장자는 ICO가 많이 사용하며 PNG, JPG 이미지 파일도 favicon으로 사용 가능하다.
💡 HTML에서 favicon 적용 방법
<head>태그 안에 <link>태그를 이용하여 적용한다.
favicon 은 왜 ICO 확장자를 쓸까?
ICO 파비콘은 multiple sizes를 지원해 하나의 ICO 파일에 여러 사이즈의 아이콘을 넣어 두고 활용 할 수 있다 하지만, PNG 파비콘은 불가능하다. 그래서 PNG확장자를 사용해도 되나 여러 브라우저나 기기별 차이가 있을 수 있어 여러 설정을 해주어야 한다.
PNG 파비콘 최적화는 어떻게 할까?
favicon 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
이 사이트에 접속해 PNG파일을 넣어주면,
PNG 파비콘을 다양하게 생성해준다(apple-touch-icon을 크기별로, IE10용 타일 파비콘을 생성).
'HTML' 카테고리의 다른 글
| [HTML] Select option의 value와 required 사용 시 주의할 점 (2) | 2023.02.23 |
|---|---|
| [HTML] 유용한 HTML Emmet 정리 (0) | 2023.02.13 |
| [HTML] HTML 기본 태그 (0) | 2023.02.08 |
| [HTML] HTML 첫걸음 (0) | 2023.02.06 |
댓글