Tinycon으로 Favicon 조작
브라우저에 따라 Facebook, Twitter 또는 이메일 클라이언트로부터 알림 및 알림을 받으면 새로운 활동에 대한 알림을받습니다. 예를 들어 Gmail 탭을 강조 표시하여 새 이메일을 받을 때 Chrome에서 강조 표시하는 다른 태그에 내 Gmail을 열어 둔 경우입니다.
그러나 탭이 고정되어 있으면 읽지 않은 전자 메일이 있다는 것만 볼 수 있으며 전자 메일 수는 볼 수 없습니다. Gmail이 현재 가지고 있는 읽지 않은 이메일의 양과 함께 브라우저 탭에 약간의 alert 를 표시 할 수 있다면 정말 유용 할 것입니다.
보이지 않는 알림이 있으면 Facebook과 동일하지만 즐겨 찾기 아이콘의 브라우저 탭에 몇 개가 있는지 표시하는 것이 좋습니다. 이 플러그인을 사용하면 정확하게 할 수 있습니다. 이 플러그인을 사용하면 파비콘에 alert box를 생성하여 사용자에게 새로운 활동을 알릴 수 있습니다.
Tinycon Plugin
Tinycon은 경고 상자를 추가하거나 브라우저 탭에서 이미지를 변경하여 웹 사이트 파비콘을 조작 할 수 있는 플러그인입니다. 이 Tinycon을 지원하지 않는 브라우저의 경우 제목 표시 줄 끝에 다른 숫자를 추가하는 것으로 대체됩니다. Tinycon 다운로드 Tinycon은 현재 브라우저에서 지원됩니다.
Chrome 15 이상
Firefox 9 이상
오페라 11+
Tinycon 플러그인 사용 방법
Tinycon을 사용하려면 github 프로젝트에서 플러그인을 다운로드하여 페이지에 추가하기 만하면 됩니다.
<script src="tinycon.js"></script>
이제 Tinycon이라는 페이지에 Javascript 객체가 추가되었으며 이 객체와 함께 두 가지 방법으로 alert box를 정의 할 수 있습니다. 먼저 다음 속성과 함께 setOptions () 메서드를 사용하여 속성을 설정합니다.
- Height - alert box의 높이
- Font - alert box에 사용할 폰트
- Colour - alert box에 사용할 폰트 컬러
- Background - alert box의 배경색
- Fallback - 즐겨 찾기 아이콘 변경을 지원하지 않는 브라우저의 경우 제목 표시 줄의 대괄호 숫자로 대체
Tinycon.setOptions({
width: 7,
height: 9,
font: '10px arial',
colour: '#ffffff',
background: '#FF0000',
fallback: true
});
alert box가 표시되도록 설정하려면 setBubble (int) 메소드를 사용합니다.
Tinycon.setBubble(15);