Bactoria 황준오

GIF로 움직이는 파비콘 만들기

2019-08-29
bactoria
Etc

블로그 파비콘 바꿨다.

원래는 지킬 테마에 있던 기본이었는데, 심심해서 바꿔봤다

   

1. GIF 다운로드

GIF 파일을 준비한다.

 

앵무새는 여기에서 다운로드 받을 수 있다

image

   

2. GIF -> PNG 변환

파비콘에 GIF 넣으면 아무 소용이 없다. 안움직인다

.GIF.PNG 들로 변환한 후, 각 파일을 자바스크립트로 순서대로 돌려주면 됨

 

(.JPG는 흰배경이 남으니까 .PNG로 변환하자)

JPG PNG
image image

 

GIF -> PNG 변환하기

 

알집 풀면 아래처럼 나올 것이다

image

 

다른데서 변환해도 크게 상관없다.

다만, 아래처럼 각 사진의 크기가 다르게 변환되는 곳은 피하자.

image

 

laptopParrot-0000

크기가 다르면 앵무새 움직임이 조금 이상할 수 있다

 

laptopParrot

정상적인 무브먼트. 쉐낏쉐낏\~

   

.ICO ?

파비콘을 위한 확장자가 따로 있긴 하다.

.ICO 는 멀티사이즈를 지원하고, 모든 브라우저에 호환된다.

다만 용량이 좀 커서 10개의 .ICO를 추가하기에는 약간 부담스러웠다

 

.PNG도 크롬, IE11은 지원하기에 .PNG로 진행했다.

   

3. 코드 수정

이미지 파일은 모두 준비했으니 이제 코드를 손 볼 차례다

 

기존 코드

<head>
    <link rel="shortcut icon" href="/favicon.ico?" type="image/x-icon">
    <link rel="icon" href="/favicon.ico?" type="image/x-icon">
    <!--...-->
<head>

 

수정 후

<head>
    <link rel="shortcut icon" href="/assets/favicon/p0.png?" type="image/x-icon">
    <link id= "favicon" rel="icon" href="#" type="image/x-icon">
    <!--...-->

    <script>
      // favicon
        var faviconRoute = '/assets/favicon/';
        var faviconNames = ['p0.png', 'p1.png', 'p2.png', 'p3.png', 'p4.png',
                        'p5.png', 'p6.png', 'p7.png', 'p8.png', 'p9.png']; <!--파일이름은 짧게 변경했다-->
    
        var idx = 0;
    
        setInterval(func, 300);
    
        function func() {
            document.querySelector("#favicon").setAttribute('href', faviconRoute + faviconNames[idx++]);
            idx %= faviconNames.length;
        }
    </script>
</head>

 

image

   

4. 완성

ezgif com-gif-maker

앵무새가 생각보다 머리를 천천히 흔든다

(setIterval을 10으로 둬도 위랑 비슷하더라)


황준오 (Bactoria) 황준오 (Bactoria)

.

Comments

Content