🗣️ 파비콘이 무엇인지 알고 계신가요?
-
의도: 파비콘은 실제로 배포하고 운영해본 서비스가 있다면 알 수밖에 없는 디테일한 개념이기 때문에, 이러한 경험이 있는지 간접적으로 확인해보는 질문이다.
-
팁: Yes or No 여부가 중요하기 때문에 사용해본 경험과 설명을 짧게 하면 된다.
-
나의 답안
-
주어진 답안 (모범 답안)
네, 파비콘에 대해 알고 있고 사용해본 경험도 있습니다.
우리가 사용하는 웹 브라우저의 탭을 보시면 타이틀이 있고, 그 앞에 조그마한 아이콘이 있는데 그게 바로 파비콘입니다.해당 웹 사이트를 요약하여 나타나는 브랜드 이미지이기 때문에 중요한 역할을 하고, 저 또한 파비콘 제너레이터 같은 서비스를 이용해 파비콘을 만들어 설정해본 경험이 있습니다.
그리고 요즘은 Next.js의 App Router에서 이런 메타데이터 설정을 쉽게 할 수 있도록 도와주기 때문에 app 폴더의 루트에 favicon.ico 파일을 넣어주기만 하면 되어서 손쉽게 설정할 수 있었습니다.
📝 개념 정리
🌟 파비콘이란?
-
"favorites icon"의 줄임말로, 웹사이트를 대표하는 작은 아이콘을 말한다.
-
브라우저의 탭, 북마크, 주소 표시줄 등 여러 곳에서 나타나며, 사용자가 웹사이트를 시각적으로 식별하는 데 도움을 준다.
-
일반적으로 파비콘은 16x16 픽셀 또는 32x32 픽셀 크기의 작은 이미지이며, 웹 브라우저가 지원하는 다양한 이미지 형식을 사용할 수 있다.
🌟 파비콘 설정 방법
-
기본 파비콘 설정
-
기본적인 파비콘 설정은 ".ico" 형식의 아이콘 파일을 사용한다.
-
".ico" 파일은 여러 크기의 이미지를 포함할 수 있어, 다양한 상황에서 잘 렌더링된다.
-
16x16, 32x32, 48x48 등의 크기를 지원할 수 있다.
-
<link rel="icon">태그와<link rel="shortcut icon">태그를 함께 사용하여 다양한 브라우저에서의 호환성을 높일 수 있다.<link rel="icon" href="/path/to/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="/path/to/favicon.ico" type="image/x-icon" />
-
-
PNG 형식의 파비콘 설정
-
PNG는 투명도를 지원하며, 다양한 해상도에서 더 나은 품질을 제공한다.
-
고해상도 디스플레이(Retina 디스플레이)에서는 32x32 또는 64x64 픽셀 크기의 파비콘을 제공하는 것이 좋다.
<link rel="icon" href="/path/to/favicon.png" type="image/png" />
-
-
여러 크기의 파비콘 제공
-
다양한 크기의 파비콘을 제공하여 다양한 환경에서 최적의 아이콘을 표시할 수 있다.
-
브라우저는 최적의 크기를 자동으로 선택한다.
<link rel="icon" href="/path/to/favicon-16x16.png" sizes="16x16" type="image/png" /> <link rel="icon" href="/path/to/favicon-32x32.png" sizes="32x32" type="image/png" /> <link rel="icon" href="/path/to/favicon-48x48.png" sizes="48x48" type="image/png" /> <link rel="icon" href="/path/to/favicon-64x64.png" sizes="64x64" type="image/png" />
-
-
SVG 형식의 파비콘 설정
-
SVG(Scalable Vector Graphics) 형식은 크기에 상관없이 고품질의 아이콘을 제공할 수 있으며, 다양한 해상도에서 선명하게 표시된다.
<link rel="icon" href="/path/to/favicon.svg" type="image/svg+xml" />
-
-
모바일 애플리케이션 아이콘 설정 (Apple Touch Icon)
-
애플 기기에서는 홈 화면에 추가할 때 사용되는 아이콘을 설정할 수 있다.
-
이는 파비콘과 유사하지만, 보통 더 큰 해상도로 제공된다.
<link ref="apple-touch-icon" href="/path/to/apple-touch-icon.png" /> <link ref="apple-touch-icon" sizes="152x152" href="/path/to/apple-touch-icon-152x152.png" /> <link ref="apple-touch-icon" sizes="180x180" href="/path/to/apple-touch-icon-180x180.png" />
-
🌟 파비콘 제작 및 배포
-
아이콘 제작
-
디자인 도구 : Adobe Photoshop, Illustrator, Figma 등의 디자인 도구를 사용하여 파비콘 이미지를 만든다.
-
파일 변환 : ".png"나 ".svg"같은 파일 형식을 ".ico"로 변환할 수 있는 온라인 도구를 사용한다.
-
-
파일 배포
-
제작된 아이콘 파일을 웹 서버의 적절한 위치에 업로드한다.
-
HTML 파일의
<head>섹션에<link>태그를 추가하여 파비콘을 설정한다.
-
-
테스트
- 웹사이트를 여러 브라우저와 기기에서 열어 파비콘이 제대로 표시되는지 확인한다.
