Image favicon 설정 방법
위와 같이 사이트 옆에 대표해서 나타나는 작은 이미지를 favicon이라고 한다.
원래 특정 이미지로 설정하고 싶다면 정해진 사이즈로 이미지를 만들어 대부분 ico라는 파일 형태로 저장해 아래와 같이 HTML 문서 안 head 부분에 link로 넣어줘야 한다.
<head>
<title>My Website</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>브라우저마다 다르지만 다른 파일 형식도 가능하다 [참고: https://stackoverflow.com/questions/9943771/adding-a-favicon-to-a-static-html-page]
Emogi favicon 사용 방법
💖🐰🧚🏻♀️🧚🙂😻☘️💎💛🌸🪐🌈🎧📚
평소 많이 사용하는 이모티콘으로 favicon을 설정하려면 어떻게 할까?
방법은 간단하다. 아래와 같은 코드 한 줄을 원하는 이모티콘으로 바꾸어 head에 추가만 해주면 된다.
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📝</text></svg>">svg 형식으로 넣는 방법도 있다 [참고: https://stackoverflow.com/questions/59431371/use-emoji-as-favicon-in-websites]
개인적으로 노션을 아이콘 있는 페이지로 만들면 자동으로 그 아이콘이 favicon으로 들어가 페이지를 북마크 했을때 찾기 쉬워 넘 좋았다.
간단하게 사이트에 favicon을 추가해보자!
참고 자료
https://css-tricks.com/emoji-as-a-favicon/
https://www.w3schools.com/html/html_favicon.asp
'프로그래밍 > HTML, CSS' 카테고리의 다른 글
| [HTML] WAI-ARIA란? 스크린 리더에서 읽히고 싶지 않은 문자 숨기기 (0) | 2023.02.05 |
|---|
