favicon 설정

 

---

 

1. favicon 이란?

favicon 은 브라우저에서 title 왼쪽에 나오는 이미지로 해당 사이트나 어플리케이션에서 대표 되는 이미지 입니다.

파비콘을 사용 하지 않으면 크롬에서는 아래와 같은 지구 모양에 이미지가 나옵니다.

 

2. 크롬 favicon 에러

그리고 chrome 에서 favicon을 설정하지 않았다면 개발자 도구에서 다음과 같은 에러가 출력 됩니다.

favicon.ico:1 Failed to load resource: the server responded with a status of 404 ()

이 에러를 없애고, 브라우저 title 옆에 이미지를 달고 싶다면 아래와 같이 이미지를 link 태그에 입력해 주시면 됩니다. 호환에 신경쓰지 않고 간단하게 기본 설정만 하고 싶다면 위에 16*16 ico 파일만 설정 하면 됩니다.

<link rel="shortcut icon" href="(16*16 ico 파일 이미지 경로)">

 

하지만 ios 와 Android 에서도 신경을 써준다면

152 x 152 사이즈에 png 파일도 설정을 해주셔야 합니다.

<link rel="icon" sizes="152x152" href="(152*152 png 파일 이미지 경로)">

 

3. favicon Generator 사이트

또한 ios, android 에서는 터치 아이콘, IE에 타일 아이콘 등등 다양한 상황에 맞는 파비콘이 필요합니다. 다양한 상황에 맞는 아이콘을 다 챙기에는 다소 복잡합니다. 따라서 다양한 상황에 맞는 파비콘을 한번에 생성해주고 link 설정 코드 까지 출력해주는 좋은 사이트가 있습니다.

https://www.favicon-generator.org/

Favicon & App Icon Generator