Skip to content

Favicon

파비콘(영어: favicon, 'favorites + icon') 또는 패비콘이란 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘이다.

Categories

2021년을 위한 Favicon 정리

Six files that fit most needs

  • 브라우저 스펙에 따라 수많은 파일이 필요한데, 이걸 하나로 정리
  • 5개의 이미지와 한개의 JSON 파일
    • .ico 32x32 : 예전 브라우저들
    • .svg : 스케일링 가능, 대부분 최신 브라우저들, 다크모드도 지원
    • apple-touch-icon 180x180 : 애플 기기용 iOS8+ 이후는 180x180 크기. 20px 정도 패딩과 배경색을 넣으면 보기 좋음
    • manifest(JSON) : PWA 및 안드로이드 기기용
      • 192x192 : 홈스크린
      • 512x512 : PWA 로딩시 스플래시 스크린용

Extremely short version

Instead of serving dozens of icons, all you need is just five icons and one JSON file.

In your HTML, for the browser: 

<link rel="icon" href="/favicon.ico"><!-- 32×32 -->
<link rel="icon" href="/icon.svg" type="image/svg+xml" sizes="any">
<link rel="apple-touch-icon" href="/apple.png"><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest">

And in your web app manifest: 

// manifest.webmanifest
{
  "icons": [
    { "src": "/192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

That is it. If you want to know how I arrived at this, which compromises I had to take, and how to build a set like this from scratch in a step-by-step fashion, tune in for the rest of the article.

2025년을 위한 Favicon 정리

브라우저 탭 변경시에 favicon 교체하기

"visibilitychange" 이벤트 받으면 document.hidden 값 보고 교체하기 

const favicon = document.querySelector('link[rel="icon"]')

document.addEventListener("visibilitychange", () => {
    const hidden = document.hidden

    favicon.setAttribute(
        "href", 
        `/favicon${hidden ? "-hidden" : ""}.ico`
    )
})

Projects

Supercookie
favicon으로 핑거프린팅하기
https://github.com/jonasstrehle/supercookie
favicons
Favicons generator for Node.js
https://github.com/itgalaxy/favicons
Tinycon
Favicon 조작 라이브러리
브라우저 상단에 표시되는 favicon 에 알림버블 추가 가능
Adaptive Favicon
SVG를 이용해서 다크모드 지원하는 Favicon 만들기
ico 와 svg를 동시에 지정해서 지원하는 브라우저에서만 적용 가능
SVG xml 내에 태그를 포함해서 prefers-color-scheme: dark 를 추가
Favicon Generator for perfect icons on all browsers
Favicon Generator. For real.
Random Favicon Generator
Select a beautiful random favicon from a set of over 1950 MIT-licensed, free, awesome Tabler icons set. Choose colors, stroke width, and other styling properties to give a custom and unique look and feel.
1950개의 MIT 라이센스 이미지인 Tabler 아이콘을 이용
배경 타입(원,사각,둥근사각,투평), 채우기 색상, 선 굵기 및 색상, 회전, 스케일 등을 지정 가능
Favicon Generator - Free, Privacy focused In-Browser Conversion
https://www.favicon.software/
  • 이미지/로고 부터 Favicon 을 생성해주는 웹 어플리케이션
  • SVG, PNG, WEBP, JPEG, BMP, GIF, AVIF 등 포맷 지원
  • 4가지 포맷의 favicon 을 생성해서 묶음 다운로드 가능
    • 브라우저 16x16
    • 태스크바 숏컷 32x32
    • 애플터치 180x180
    • 워드프레스 512x512

See also

Favorite site