내 웹사이트에 파비콘 추가하기

Favicon

웹브라우저 주소창 등에 대표 아이콘이 표시되는 것.

파비콘 파일

확장자는 ico, png
사이즈는 16x16, 32x32

파비콘 작성 사이트

가보면 사이트마다 활용 가이드가 있다.

1. https://www.favicon-generator.org/
2. http://convertico.com/
3. https://www.degraeve.com/favicon/

이거 왜 하나요

1. 탭으로 열렸을 때 예쁨
2. 북마크 등록해두면 눈에 띔
3. 스마트폰 홈 화면에 추가하면 앱처럼 보임

github.io/wishtree 파비콘 등록 완료

여기서 파비콘을 만들었고 https://www.favicon-generator.org/
그다음 루트폴더에 assets/favicon.ico 경로를 추가하고 압축해제.
포인트는 href=" 뒤에 슬래시/를 넣지 않는 것과 끝에 '?'를 넣는다는 점.
다른 사람들은 이렇게 안 하고 "/assets/~.png" 꼴로 끝내도 되던데 나는 안 돼서 한참 헤맸다.

<!-- start custom head snippets -->
    <link rel="apple-touch-icon" sizes="57x57" href="assets/favicon.ico/apple-icon-57x57.png?">
    <link rel="apple-touch-icon" sizes="60x60" href="assets/favicon.ico/apple-icon-60x60.png?">
    <link rel="apple-touch-icon" sizes="72x72" href="assets/favicon.ico/apple-icon-72x72.png?">
    <link rel="apple-touch-icon" sizes="76x76" href="assets/favicon.ico/apple-icon-76x76.png?">
    <link rel="apple-touch-icon" sizes="114x114" href="assets/favicon.ico/apple-icon-114x114.png?">
    <link rel="apple-touch-icon" sizes="120x120" href="assets/favicon.ico/apple-icon-120x120.png?">
    <link rel="apple-touch-icon" sizes="144x144" href="assets/favicon.ico/apple-icon-144x144.png?">
    <link rel="apple-touch-icon" sizes="152x152" href="assets/favicon.ico/apple-icon-152x152.png?">
    <link rel="apple-touch-icon" sizes="180x180" href="assets/favicon.ico/apple-icon-180x180.png?">
    <link rel="icon" type="image/png?" sizes="192x192" href="assets/favicon.ico/android-icon-192x192.png?">
    <link rel="icon" type="image/png?" sizes="32x32" href="assets/favicon.ico/favicon-32x32.png?">
    <link rel="icon" type="image/png?" sizes="96x96" href="assets/favicon.ico/favicon-96x96.png?">
    <link rel="icon" type="image/png?" sizes="16x16" href="assets/favicon.ico/favicon-16x16.png?">
    <link rel="manifest" href="assets/favicon.ico/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="assets/favicon.ico/ms-icon-144x144.png?">
    <meta name="theme-color" content="#ffffff">
<!-- end custom head snippets -->