티스토리 뷰

나는 오늘도 공부한다/HTML&CSS

즐겨찾기/주소창 아이콘 적용하기(파비콘 적용하기)

realMarketing 2016. 4. 20. 00:00

 웹 브라우저를 이용하다보면 사이트마다 주소탭에 사이트를 상징하는 심볼마크를 가지고 있다. 티스토리의 경우 주황생 원형에 'T'가 들어가져 있고 이러한 마크를 '파비콘(Favicon)'이라 부른다. 필자는 이전 포스팅에서 파비콘의 정의와 이미지파일을 파비콘 확장자인 Ico파일로 변환하는 방법에 관해 자세히 소개한적이 있고 이헤대해 궁금한 점은 해당포스팅을 참고하길 바랍니다.(바로가기>>>) 오늘은 파비콘을 실제 웹사이트에 적용하는 방법에 대해 소개하려고합니다. 웹 프로그래밍을 공부하는 분이라면 웹 사이트 제작시 반드시 이용하게되며 웹 개발을하지 않더라도 티스토리 블로그를 운영하는 블로거분들에게도 블로그 관리와 관련된 유용하게 사용하실 수 있습니다.

◇ 즐겨찾기/주소 탭 아이콘 적용하기 - 파비콘 적용을 통한 나만의 블로그 마크 설정하기.

○ 파비콘(Favicon)

파비콘은 Favorites와 Icon의 합성어로 해당 웹 사이트를 상징하는 아이콘을 의미합니다. 흔히 웹 사이트를 즐겨찾기 등록시 눈에 가시적으로 보이는 마크가 되어 파비콘이라 부르며 웹 사이트 접속시 주소 탭에 노출이되기에 웹 사이트를 상징하는 역할을 합니다.

○ 파비콘 적용하기

1) 파비콘 FTP서버 등록

- 파비콘을 웹 사이트에 적용하기 위해서는 우선적으로 Icon파일을 자신의 웹 FTP서버에 업로드 시켜야합니다. FTP서버 접속 후 원하는 경로에 파비콘을 업로드 시켜줍니다. 많일 FTP서버가 없거나 블로그의 경우는 해당 파일을 등록 후 해당 파일의 URL주소를 가져오셔도 무방합니다.

2) HTML 편집

- FTP서버에 파비콘을 업로드하셨다면 HTML편집기로 들어갑니다. 편집기 내에서 <head>~</head>사이에 <link rel = "shortcut icon" href = "/설정한이름.ico">을 넣어줍니다. 일반적으로 웹 사이트의 Title아랫부분이나 윗부분에 많이 적용합니다. 해당 명령어는 파비콘을 설정하겠다는 의미로 href가 자신의 파비콘이 저장된 경로를 의미합니다. 따라서 FTP서버를 통해 업로드하신 분이라면 저장 경로를 작성해주시면 되고 그렇지 않은 경우는 URL를 넣어주시면 됩니다.(※파비콘은 아이콘이기에 확장자는 반드시 .ico이여야 합니다.)

 웹 서핑을하다보면 개인 웹 사이트의 경우 파비콘이 적용되지 않은 경우가 많습니다. 확실히 파비콘을 적용하였을대 개인 웹 사이트가 조금 더 전문적인 느낌을 줍니다. 그만큼 파비콘은 웹 사이트를 상징하는 역할을 수행하므로 개인 웹사이트를 운영하지 않더라도 개인 블로그를 운영하는 블로거 분들에게도 해당 포스팅은 블로그 관리에 유용하게 사용될 수 있습니다.

[읽어볼만한 글]

2016/04/19 - Png, ico파일 변환(파비콘 만들기)


저작자표시 비영리 동일조건

'나는 오늘도 공부한다 > HTML&CSS' 카테고리의 다른 글

메타태그(Meta Tag)와 메타데이터(Meta Data)  (0) 2016.10.26
HTML 이미지 띄우기  (0) 2014.09.13
HTML & CSS 메뉴만들기  (7) 2014.09.12
HTML 리스트 만들기 & 하이퍼링크  (0) 2014.06.22
HTML(H태그)+스타일태그  (0) 2014.06.22
공유하기 링크
댓글