[HTML5] 파비콘 link:favicon 태그

HTML5

[HTML5] 파비콘 link:favicon 태그

FRDYtheme 2022. 10. 4. 11:09

'favorites + icon'

인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘이다.

기본 작성 방식

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

기본 이미지 사이즈

16 x 16

파비콘 link 태그는 <head></head>영역 내에 작성해야 함.
가장 기본적인 파비콘 파일로 16x16 크기를 가짐
일반적으로 파비콘 파일은 root 폴더 바로 아래 index.html 문서와 같은 위치에 둠.

// html 문서

<link rel="icon" href="/favicon.ico" sizes="any">

<link rel="icon" href="/icon.svg" type="image/svg+xml">

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<link rel="manifest" href="/manifest.webmanifest">

// manifest.webmanifest

{

"icons": [

{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },

"src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }

}