블로그 파비콘 바꿨다.
원래는 지킬 테마에 있던 기본이었는데, 심심해서 바꿔봤다
1. GIF 다운로드
GIF 파일을 준비한다.
앵무새는 여기에서 다운로드 받을 수 있다
2. GIF -> PNG 변환
파비콘에 GIF 넣으면 아무 소용이 없다. 안움직인다
.GIF을 .PNG 들로 변환한 후, 각 파일을 자바스크립트로 순서대로 돌려주면 됨
(.JPG는 흰배경이 남으니까 .PNG로 변환하자)
| JPG | PNG |
|---|---|
 |  |
알집 풀면 아래처럼 나올 것이다
다른데서 변환해도 크게 상관없다.
다만, 아래처럼 각 사진의 크기가 다르게 변환되는 곳은 피하자.
크기가 다르면 앵무새 움직임이 조금 이상할 수 있다
정상적인 무브먼트. 쉐낏쉐낏\~
.ICO ?
파비콘을 위한 확장자가 따로 있긴 하다.
.ICO 는 멀티사이즈를 지원하고, 모든 브라우저에 호환된다.
다만 용량이 좀 커서 10개의 .ICO를 추가하기에는 약간 부담스러웠다
.PNG도 크롬, IE11은 지원하기에 .PNG로 진행했다.
3. 코드 수정
이미지 파일은 모두 준비했으니 이제 코드를 손 볼 차례다
기존 코드
1
2
3
4
5
<head>
<link rel="shortcut icon" href="/favicon.ico?" type="image/x-icon">
<link rel="icon" href="/favicon.ico?" type="image/x-icon">
<!--...-->
<head>
수정 후
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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>
4. 완성
앵무새가 생각보다 머리를 천천히 흔든다
(setIterval을 10으로 둬도 위랑 비슷하더라)
Comments powered by Disqus.