[CSS] favicon(파비콘)

WIKI : favicon이란 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘이다.
favicon은 주소바, 페이지탭, 북마크등에 표시된다.
favicon은 GIF, PNG 또는 ICO 파일로 16 X 16 (pixel) 형식이었다.
하지만 사용자의 사용 환경이 변화함에 따라 진화했다.

WIKI

ICO, PNG, GIF 는 대부분의 브라우저가 지원하지만 다른 확장자는 일부 지원안하기 때문에 유의해야할 것 같다.

파비콘은 예를 들어 이런것이지 않을까 생각된다.

나의 크롬프라우저 북마크 아이콘

---

Youtube 페이지 소스에서 favicon을 검색

하면 아래와 같은 html코드를 확인할 수 있었다.

 

궁금증1 shortcut icon과 icon의 차이는?

shortcut icon은 과거에 사용하던 방식으로 현재 사용을 지양한다는 MDN 코멘트가 있다.

MDN

현재 rel에 지원하는 속성에도 shortcut은 없다. 그런데 왜 구글은 short cut 아이콘을 사용하는 것일까..

아래 블로그 글을 보면 IE에서만 차이가 보인다는 것 같다. 현재 내 PC에는 IE가 없어 확인은 어려울 것 같다.

https://webdir.tistory.com/337

---

Link 태그 속성

https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types

Link types - HTML: HyperText Markup Language | MDN

---

apple-touch-icon

애플기기 iPhone, iPad, iPod touch 등에서 웹페이지를 북마크 설정하거나 홈화면에 바로가기를 앱처럼 바로가기를 설정할 수 있다. 이때 apple-touch-icon으로 설정한 icon이 사용된다.

참고로 iOS에서 모서리를 둥글게 깍는 기능을 자동으로 제공하는데 이 기능을 사용하지 않으려면 apple-touch-icon-precomposed 속성으로 작성하면 된다.

사이즈는 지금 기준으로 180x180으로 하면 자동으로 줄여준다.

아래 내용을 확인하면 더 자세히 알 수 있다.

https://webhint.io/docs/user-guide/hints/hint-apple-touch-icons/

webhint, the hinting engine for web best practices