HTML - Favicons 추가하는 방법: 초보자 가이드

HTML Favicons이란?

Favicon의 세계로의 여정을 단순한 질문으로 시작해보겠습니다: 브라우저 탭에 있는 웹사이트 제목 옆에 있는 작은 아이콘을 注意해 본 적이 있으신가요? 그것이 바로 우리가 favicon이라고 부르는 것입니다!

HTML - Adding Favicon

favicon은 "favorite icon"의 약자로, 웹사이트를 대표하는 작은 이미지입니다. 다양한 곳에서 나타나는 미니チュ어 로고입니다:

브라우저의 주소 표시줄
브라우저 탭의 페이지 제목 옆
즐겨찾기 목록
웹페이지를 저장한 스마트폰 홈 화면

favicon은 작지만 브랜딩과 사용자 경험에 큰 역할을 합니다. 사용자가 여러 개의 탭이나 즐겨찾기 사이에서 빠르게 당신의 사이트를 식별할 수 있도록 도와줍니다.

Favicons 추가하는 문법

이제 favicon이 무엇인지 알았으니, 우리의 웹 페이지에 하나 추가하는 방법을 배워보겠습니다. 문법은 매우 간단합니다:

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

이를 해부해보겠습니다:

<link>: 이는 문서와 외부 자원 간의 링크를 정의하는 HTML 태그입니다.
rel="icon": 이 속성은 현재 문서와 링크된 자원 간의 관계를 지정합니다. 이 경우 아이콘입니다.
href="path/to/your/favicon.ico": 이는 favicon 파일의 경로를 지정합니다.
type="image/x-icon": 이 속성은 링크된 문서의 MIME 유형을 지정합니다.

웹 페이지에 Favicons 추가하는 단계

웹 페이지에 favicon을 추가하는 것은 쉽기 그침입니다! 다음 단계를 따르세요:

favicon 이미지를 생성하거나 얻습니다.
favicon을 웹사이트의 루트 디렉토리나 이미지 폴더에 저장합니다.
HTML 문서의 <head> 섹션에 favicon 링크를 추가합니다.

다음은 완전한 예제입니다:

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제 멋진 웹사이트</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<h1>제 멋진 웹사이트에 오신 것을 환영합니다!</h1>
</body>
</html>

이 예제에서 우리는 favicon.ico 파일을 HTML 파일과 같은 디렉토리에 저장했습니다. 만약 이미지 폴더에 저장했다면 href="images/favicon.ico"를 사용합니다.

Favicons 크기 목록

Favicon은 다양한 크기로 제공되어 다양한 장치와 용도에 맞게 사용됩니다. 다음은 일반적인 favicon 크기 표입니다:

크기	용도
16x16 px	기본 favicon, 브라우저 탭에 표시됨
32x32 px	Windows 작업 표시줄
48x48 px	Windows 데스크톱 단축 키
64x64 px	Windows 시작 메뉴
152x152 px	iOS 장치의 Apple 터치 아이콘
192x192 px	안드로이드 홈 화면 아이콘

Pro tip: 모든 장치에서 선명하게 보이기 위해, 256x256 px의 고해상도 이미지를 생성하고 이를 다양한 크기로 축소하는 것이 좋습니다.

다양한 Favicons 파일 형식에 대한 브라우저 지원

모든 브라우저는 동일하지 않으며, 특히 favicon 지원에 있어 그렇습니다. 주요 브라우저가 어떤 파일 형식을 지원하는지 표를 제공합니다:

파일 형식	Chrome	Firefox	Safari	Edge	Internet Explorer
ICO	✓	✓	✓	✓	✓
PNG	✓	✓	✓	✓	✗
GIF	✓	✓	✓	✓	✗
JPEG	✓	✓	✓	✓	✗
SVG	✓	✓	✗	✓	✗

ICO 형식이 가장 널리 지원됩니다. 그러나 현대 브라우저는 PNG와 같은 더 일반적인 이미지 형식도 지원합니다.

최대한의 호환성을 보장하기 위해 여러 형식을 제공할 수 있습니다:

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

이렇게 하면 PNG를 지원하는 브라우저는 PNG를 사용하고, 오래된 브라우저는 ICO 형식으로 대체됩니다.

결론

이제 여러분은 웹 페이지에 favicon을 추가하는 방법을 배웠습니다. 작은 세부 사항이지만, 사이트가 프로페셔널하고 정교하게 보이는 데 큰 차이를 만들 수 있습니다.

웹 개발에서와 마찬가지로, 삶에서도 작은 것들이 중요합니다. 잘 선택된 favicon은 당신의 아름다운 웹사이트에 토핑을 더하는 장식이 될 수 있습니다!

계속 연습하고 배우며, 가장 중요한 것은 즐기는 것입니다! 누구 알겠는가? 당신이 만드는 다음 favicon이 세상을 바꾸는 웹사이트가 될지도 모릅니다. 행복하게 코딩하세요!

Credits: Image by storyset