움직이는 아이콘,파비콘 적용시키기 [편법]

반갑습니다. 

움직이는 파비콘을 적용시켜보는 글 되겠습니다.

저는 앞서 한두개 사이트를 찾아보았으나

직접적으로 움짤를 파비콘으로 하는 방법은 찾지 못하고

편법으로 하기로 했습니다.

자바스크립트로 합니다.

방법은 아주 간단합니다.

1. 움짤의 프레임을 쪼개 버립니다.

2. 쪼갠 프레임들을 블로그에 업로드하고 각각의 주소url을 얻습니다.

3. 스크립트에서 각각의 주소를 프레임 순서대로 배열에 쑤셔 넣습니다.

4. 셋인터벌로 시간마다 파비콘을 바꿔주게 만듭니다.

자 그럼 이 블로그처럼 움짤 파비콘이 되겠습니다.

짠! 16px*16px입니다. 화질구지 맞습니다.

1. 움짤의 프레임을 쪼갠다.

라고 했지만 사실 사용할만한 움짤이 없었기에 직접 프레임으로 쓸 이미지를 "찍었"습니다.

파비콘의 규격은 16px*16px이기 때문에 여기저기 돌아다니는 움짤은 쓰기 힘듭니다.

사용할만한 움짤이 있으시면 'gif 쪼개기' 또는 'gif 분해' 등으로 구글링 하시면

프레임을 간단히 쪼개버릴 수 있으시겠습니다.

그럼 저는 

구글에 '파비콘 만들기' 하면 파비콘을 만드는 법을 설명하는 글이 보입니다.

https://www.favicon.cc/ 

위 사이트를 이용했습니다.

팔레트도 보이고 전문적으로 도트를 찍는 느낌을 줍니다.

그럼 한땀한땀 찍어봅시다.

20장이나 찍었습니다.

프레임이 많은 움짤로 하실분은 알바를 고용해야 될지도 모르겠습니다.

(여기서 각 프레임파일의 파일명은 통일해주시면 편합니다.)

2. 쪼갠 프레임들을 블로그에 업로드하고 각각의 주소url을 얻습니다.

스킨편집/파일업로드에 싹 긁어 업로드 합니다.

3. 스크립트에서 각각의 주소를 프레임 순서대로 배열에 쑤셔넣습니다. 

4. 셋인터벌로 시간마다 파비콘을 바꿔주게 만듭니다.

<script>
    var gifcon = new Array();
    gifcon[gifcon.length]='./images/Frame0.ico';
    gifcon[gifcon.length]='./images/Frame1.ico';
    gifcon[gifcon.length]='./images/Frame2.ico';
    gifcon[gifcon.length]='./images/Frame3.ico';
    gifcon[gifcon.length]='./images/Frame4.ico';
    gifcon[gifcon.length]='./images/Frame5.ico';
    gifcon[gifcon.length]='./images/Frame6.ico';
    gifcon[gifcon.length]='./images/Frame7.ico';
    gifcon[gifcon.length]='./images/Frame8.ico';
    gifcon[gifcon.length]='./images/Frame9.ico';
    gifcon[gifcon.length]='./images/Frame10.ico';
    gifcon[gifcon.length]='./images/Frame11.ico';
    gifcon[gifcon.length]='./images/Frame12.ico';
    gifcon[gifcon.length]='./images/Frame13.ico';
    gifcon[gifcon.length]='./images/Frame14.ico';
    gifcon[gifcon.length]='./images/Frame15.ico';
    gifcon[gifcon.length]='./images/Frame16.ico';
    gifcon[gifcon.length]='./images/Frame17.ico';
    gifcon[gifcon.length]='./images/Frame18.ico';
    gifcon[gifcon.length]='./images/Frame19.ico';
 
    var gifico = setInterval(function(){
        tw = $('link[rel="icon"]');
        n=gifcon.indexOf(tw.attr('href'));
        if(0<=n && n*1+1<gifcon.length){
            tw.attr('href',gifcon[n*1+1]);
        }else{
            tw.attr('href',gifcon[0]);
        }
    } , 250);
</script>

배열에 쑤셔 넣고 스크립트를 짰습니다.

자바스크립트를 모르시는 분은 

눈치를 살짝 봅니다.

네, gifcon[gifcon.length]='./images/Frame0.ico';부분이 배열에 넣는 것입니다.

이미지가 티스토리에 업로드되면 "./images/이미지마일이름"라는 경로를 가지게 됩니다.

그럼 귀하께서는 gifcon[gifcon.length]='./images/이미지파일이름';이라는 것으로 배열에 넣을 수 있습니다.

프레임 순서대로 작성해주셔야 됩니다.

프레임 순서대로 작성해주셔야 됩니다.

중요하니깐 2번 말했습니다. 

프레임이 더 많거나 또는 적거나 하시는 분은 그만큼만 해주시면 됩니다.

그리고 해당 코드를 스킨편집/html에 적당히 넣어주시면 됩니다.

저는 맨 밑 '</body>'바로 위에 넣었습니다.

그리고 적용시키고 되는지 봅니다.

네 잘 됩니다.

안된다구요? 뭐가 문제일까요?

제가 알려드린 스크립트 코드를 잘 넣으셨나요?

파일명을 적으실 때 대소문자는 구분하셨나요?

확장자를 빼먹거나 따옴표(')가 빠지진 않았나요?

* 움짤이 너무 빨라요! 또는 느려요!

하시는 분들은

var gifico = setInterval(function(){

        tw = $('link[rel="icon"]');

        n=gifcon.indexOf(tw.attr('href'));

        if(0<=n && n*1+1<gifcon.length){

            tw.attr('href',gifcon[n*1+1]);

        }else{

            tw.attr('href',gifcon[0]);

        }

    } , 250);

부분을 봅시다

맨아래 } , 250);

250이라는 숫자가 시간입니다.

1/1000초(밀리초)단위로 바꾸시면 됩니다.

ex)0.25초 = 250