주소창과 즐겨찾기 메뉴에 사이트 고유 아이콘을 삽입하는 방법입니다.

favicon이라고 하는데요.

<head>
    <link rel='shortcut icon' href='http://www.devholic.net/favicon.ico' type='image/x-ico'/>
    <link rel='icon' href='http://www.devholic.net/favicon.ico' type='image/x-ico'/>
</head>

이렇게 삽입해주면 즐겨찾기 해놓은 사이트를 다음에 재방문할때 즐겨찾기 이름앞에, 그리고 주소창 주소 맨앞에 파비콘이 뜹니다.

통상 첫번째 줄만 넣는데.. 여러 브라우저 테스트 하다보니 저 두개를 다 넣어야 하더라구요.

어느 브라우저는 그냥 접속만 해도 주소창에 보여지고, 어느 브라우저는 북마크 해야 보여지고 하는 차이가 있어서

이리저리 씨름한 기억은 나는데 오래되서 기억이 나질 않네요 ^^;

첫줄만 넣어보고 여러브라우저 테스트 한번 해보세요. 첫줄만으로 가능할지도 몰라요;;

(지금 해볼려니 다 즐겨찾기 돼있는데다가 파폭이나 크롬은 영 지워지지가 않네요. 어디서 지워야하나요 ㅜㅜ)

 

그리고 IE의 경우 즐겨찾기 이후 창을 새로 띄워야 즐겨찾기랑 주소창에 파비콘이 뜨는걸 확인할 수 있구요

파폭이나 크롬은 바로 확인할 수 있습니다.

 

단, 임시파일을 다 지워버리면 파비콘이 사라집니다. 수동으로 지우지 않아도 일정기간 간격으로 지워진다면 어느순간 사라지고 없을거예요. 다시 즐겨찾기를 해야 볼 수 있습니다.

 

그리고..

파비콘은 확장자가 .ico 여서 포토샵으로 생성이 불가능하죠.

찾아보시면 만들수 있는 프로그램도 있구요. 이미지를 업로드하면 만들어주는 사이트도 있습니다.

 

http://www.htmlkit.com/go/favicon/validator/

 

여긴 제가 맨처음 favicon이란걸 알고나서 만들기 위해 찾다가 알게된..

제 첫 파비콘을 만들어준 사이트예요.^^

파비콘을 16*16 사이즈로 gif를 만들어서 업로드를 하면 파비콘을 생성해서 다운로드 할 수 있게 해줍니다.

 

      <link rel="shortcut icon" href="./favicon.ico" >
      <link rel="icon" href="./animated_favicon1.gif" type="image/gif" >

다운받은 파일 안에 ReadMe.txt를 보면 animated favicon을 쓰려면 두번째 줄을 삽입하면 된다고 나와있네요.

이 사이트에 animated favicon도 만들 수 있게 옵션을 제공합니다. 개인적으론 이쁘지 않더라구요 ^^;

 

그리고 직접 만들어보시려면 제가 지금 사용중인 ArtIcons Pro 라는 프로그램이 있습니다.

다운로드와 설명은 자료실에 있습니다.

http://www.devholic.net/1000262 

 

 퍼가실때 댓글 하나 남겨주신다고 잡아먹지 않습니다~

이 게시물을..