티스토리 뷰

Computer/WEB Skills

[html] url 앞에 아이콘 이미지 삽입하기

인생이글케쉬우냐 2014. 5. 15. 00:09

예전에 프로젝트 진행하면서 카피페이스트를 이용해서 이미지 삽입해 본적이 있는데,

그러다보니 한줄이면 되는 소스를 자꾸 까먹는다..;;

 

(직접 타이핑해야 외우는데;;)

 

그래서 자꾸 까먹으니 여기다 적어둬야겠다..

 

(1) favicon.ico 파일을 만든다. (아이콘 이미지파일)

png등의 이미지를 포토샵등을 이용해 아이콘 이미지를 만든 이후에 패비콘을 만들어주는 사이트를 통해서 패비콘을 만들면 된다.

 

http://favicon-generator.org/

 


(2) <head> ... </head> 사이에
    <link rel="SHORTCUT ICON" href="http://www.example.com/myicon.ico"/>

또는

<link rel="SHORTCUT ICON" href="/somepath/myicon.ico"/>

이라고 넣어주면 됨.


만약 애니메이션 효과가 있는 favicon 이면


<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" href="NAME OF THE ANIMATED FAVICON.gif" type="image/gif">


와 같이 넣어주면 됨

 

 

[브라우저별 호환여부]

 

브라우저 ICO PNG GIF 애니메이션 GIF JPEG APNG SVG
구글 크롬 예 4.0 4.0 No 4.0 ? 아니오
인터넷 익스플로러 4 아니오 아니오 ? 아니오 ? 아니오
모질라 파이어폭스 예 예 예 예 예 3.0 아니오[1]
오페라 예 예 예 예 예 예 9.6
사파리 예 4.0 4.0 ? 4.0 ? 아니오

 

 


[참고]


http://ko.wikipedia.org/wiki/%ED%8C%A8%EB%B9%84%EC%BD%98

 

 

출처 : http://kin.naver.com/qna/detail.nhn?d1id=1&dirId=1040205&docId=183110250&qb=dXJs7JeQIOyVhOydtOy9mCDshKTsoJU=&enc=utf8&section=kin&rank=1&search_sort=0&spq=0&pid=R3MZGc5Y7uZssbgBmQwsssssss4-076243&sid=U3OErXJvLDEAAB5mN-M

반응형
저작자표시 비영리

'Computer > WEB Skills' 카테고리의 다른 글

[JSTL] 태그 사용 정리 - 펌  (0) 2014.03.19
[펌] 로그인 만들기/ 탭이동과 클릭하면 글씨 사라지는 것  (2) 2012.02.04
[WEB Skills] HTML 특수문자코드표  (0) 2010.07.27
[ASP] FILE객체와 FOLDER객체  (0) 2010.02.04
[ASP] DB에 특정 Alias에 따라 다른 페이지로 보내기.  (0) 2010.01.29