w3.css
HTML에 파비콘 추가
HTML에 파비콘을 추가하는 방법을 알아보자.
HTML에 파비콘을 추가하는 방법
파비콘은 브라우저 탭의 페이지 제목 옆에 표시되는 작은 이미지다.
원하는 이미지를 파비콘으로 사용할 수 있다. https://favicon.cc 와 같은 사이트에서 자신만의 파비콘을 만들 수도 있다.
⭐ 파비콘은 작은 이미지이므로 대비가 높은 단순한 이미지여야 한다.
웹사이트에 파비콘을 추가하려면 파비콘 이미지를 웹서버의 루트 디렉터리에 저장하거나, 루트 디렉터리에 이미지라는 폴더를 만들고 이 폴더에 파비콘 이미지를 저장하자. 파비콘 이미지의 일반적인 이름은 “favicon.ico”다.
1단계) HTML 추가
<!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” 파일을 저장하고 브라우저에서 다시 로드하자. 이제 브라우저 탭의 페이지 제목 왼쪽에 파비콘 이미지가 표시된다.
참고
W3C School - How TO - Add a Favicon in HTML
공부 목적 블로그