반응형
파비콘 Favicon
: 즐겨찾기할 때 추가되는 아이콘 모양
일반적으로 디자이너가 포토샵으로 직접 만들때는 16px X 16px 으로 작성하여 파일명.png 로 저장하여 아이콘(.ico) 파일로 변경합니다.
png 파일을 ico 파일로 변환하기
아이콘 파일로 변경해 주는 사이트 ▼
http://www.degraeve.com/favicon
웹페이지에서 파비콘 이미지 가져오기
클론 코딩이나 웹사이트를 디자인할 때 대부분의 이미지들은 해당 사이트에서 가져올 수 있습니다.
현재는 거의 모든 사이트가 소스를 오픈해놓기 때문에 저작권 문제를 뒤로하고, 연습용 소스를 가져오거나 어떻게 코딩이 되어 있는지 쉽게 알 수 있습니다.
밑의 이미지는 티스토리에서 사용된 ico 이미지들입니다.
F12 를 누른 후 - Sources 탭에서 html, css, img, ico, js 등등 확인할 수 있습니다.
파비콘을 가져오려면 url을 복사하여 가져온 후 경로를 설정하는 방법, 또는 save로 이미지 파일을 png로 저장한 후 ico파일로 변환 한 후 폴더 추가 및 링크 연결을 하는 방법이 있습니다.
link로 파비콘 연결하기
png파일을 ico파일로 변환한 후 이미지 폴더 등에 넣은 후 html <head> 부분에 link로 경로를 연결해주면 적용됩니다.
<link rel="shortcut icon" href="경로명/아이콘명.ico">
반응형