소소한 일상과 잡다한 정보

IT/jsp

jsp : 파비콘 ( Favicon ) 설정

pandada 2025. 3. 12. 11:26
반응형

 

 우선 파비콘을 설정하기 전에 파비콘이 뭔지 무터 한번 알아보자.

 

📌 파비콘(Favicon)이란?

파비콘(Favicon, Favorite Icon)은 웹사이트를 나타내는 작은 아이콘이다.
웹 브라우저의 탭, 북마크, 주소 표시줄, 즐겨찾기 목록 등에서 웹사이트를 대표하는 역할을 한다.

 

📌 파비콘이 표시되는 곳

  1. 브라우저 탭(Tab)
    • 웹사이트를 열었을 때 탭 왼쪽에 표시되는 아이콘
  2. 북마크(즐겨찾기)
    • 웹사이트를 즐겨찾기에 추가했을 때 표시됨
  3. 주소 표시줄(Omnibox)
    • 일부 브라우저에서 URL 왼쪽에 표시됨
  4. 모바일 홈 화면
    • 아이폰 & 안드로이드에서 홈 화면에 추가할 때 표시됨

 

📌 파비콘 어원

  • Favorite + Icon 의 합성어
  • 원래는 **즐겨찾기(Favorites)**에 표시되는 아이콘이라서 이런 이름이 붙음.

 

📌 파비콘 파일 형식

  • .ico (가장 호환성이 높음)
  • .png (고해상도 지원, 투명 배경 가능)
  • .svg (벡터 기반, 모든 해상도 지원)

 

📌 파비콘 적용 방법

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

 

🚀 정리

  • 파비콘 = 웹사이트를 상징하는 작은 아이콘
  • Favorite + Icon 의 합성어
  • 브라우저 탭, 북마크, 주소창 등에 표시됨
  • .ico, .png, .svg 형식으로 설정 가능
반응형

 

그럼 이제 파비콘 설정에 대해서 알아보자.

 

1️⃣ 파비콘(Favicon) 파일 준비

  • 일반적으로 16x16px 또는 32x32px 크기의 .ico, .png, .svg 형식 사용 가능.
  • .ico 형식이 가장 호환성이 높음.
  • 필요하면 favicon 생성 사이트에서 만들 수 있음

 

2️⃣ HTML에서 파비콘 설정

웹페이지 <head> 태그 안에 아래 코드를 추가하면 된다.

<head>
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
</head>
 
  • /favicon.ico → 웹사이트 루트 디렉토리에 favicon.ico 파일을 업로드해야 함.
  • rel="icon" → 기본적인 파비콘 설정.
  • rel="shortcut icon" → 일부 구형 브라우저 지원.
  • image/x-icon → .ico 파일 형식의 파비콘을 의미하는 MIME 타입. ( 속성값 )
  • 브라우저가 이 정보를 보고 해당 파일을 아이콘으로 인식함.

 

 📌 shortcut icon과 icon의 차이

 과거에는 Internet Explorer(IE)와 구형 브라우저에서 shortcut icon을 사용해야 파비콘이 제대로 적용되었다.

 하지만, 최신 브라우저(Chrome, Edge, Firefox, Safari 등)는 rel="icon"만으로도 파비콘을 인식.

✅ 최신 권장 방식

<link rel="icon" href="/assets/images/test.ico" type="image/x-icon">
  • 최신 브라우저에서 정상 작동
  • shortcut icon 없이도 동일한 기능

 

3️⃣ 다른 포맷 지원 (PNG, SVG 등)

만약 .ico가 아닌 .png, .svg를 사용하려면

<head>
    <link rel="icon" href="/favicon.png" type="image/png">
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
</head>
  • .png : 32x32px, 48x48px, 96x96px, 192x192px 등 다양한 크기 지원 가능.
  • .svg : 반응형 아이콘으로 벡터 기반이므로 모든 해상도에서 깨지지 않음.

 

4️⃣ 애플 & 안드로이드 홈 화면 아이콘 설정

모바일에서 홈 화면에 추가할 때 아이콘을 지정하려면

<head>
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
    <link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">
</head>
 
  • apple-touch-icon → iOS에서 홈 화면 아이콘 설정.
  • android-chrome-192x192 → 안드로이드 크롬 브라우저용 아이콘.
  • android-chrome-512x512 → 고해상도 아이콘.

 

5️⃣ favicon.ico 파일을 루트에 직접 배치

일부 브라우저는 <head> 태그 없이도 https://example.com/favicon.ico 경로에 자동으로 접근함. 그래서 웹사이트 루트 폴더에 favicon.ico 파일을 업로드하면 자동 인식됨.

 

6️⃣ 적용 확인 & 캐시 문제 해결

  • 웹사이트에 접속 후 F12(개발자 도구) → 네트워크 → 캐시 비우기 후 새로고침.
  • 파비콘이 적용되지 않으면:
    • Ctrl + Shift + R (강제 새로고침)
    • 브라우저 쿠키/캐시 삭제 후 다시 확인.

 

🚀 정리

  1. favicon.ico 파일을 루트 폴더에 업로드.
  2. <head> 태그에 <link rel="icon"> 추가.
  3. PNG, SVG 지원하려면 추가 <link> 설정.
  4. 모바일 지원을 위해 apple-touch-icon 설정.
  5. 캐시를 지우고 확인!
반응형

 

 그럼 이제 여기서 생각을 좀만 생각해보면 의문점이 생길 수도 있다. ( 안생긴다면 말고.. )

 

📌 파비콘(Favicon)은 해상도별로 자동 적용될까?

  • 기본적으로는 하나의 파비콘만 설정하면 브라우저가 알아서 적용해준다.
  • 하지만 고해상도(HiDPI, Retina) 디스플레이에서는 해상도별로 최적화된 파비콘을 따로 지정하는 것이 좋음.

 

✅ 1. 기본적으로 브라우저가 자동 조정

  • .ico 파일(16x16, 32x32 포함)은 브라우저가 자동으로 크기를 맞춰줌.
  • 하지만 고해상도 화면(4K, Retina)에서는 저해상도 아이콘이 흐리게 보일 수 있음.

📌 기본 설정 (브라우저가 자동 조정)

<link rel="icon" href="/favicon.ico" type="image/x-icon">
  •  .ico 파일 안에 여러 해상도(16x16, 32x32, 64x64)가 포함된 경우, 브라우저가 적절한 크기를 선택해 사용함.

 

✅ 2. 해상도별 파비콘 직접 설정 (권장)

💡 다양한 해상도에서 최적화된 파비콘을 사용하려면 아래처럼 여러 개 지정하는 게 좋음.

<!-- 기본 파비콘 -->
<link rel="icon" href="/favicon.ico" type="image/x-icon">

<!-- 고해상도(HiDPI, Retina)용 PNG 파비콘 -->
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">

<!-- Apple Touch Icon (iOS & macOS 홈 화면용) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Android Chrome 홈 화면용 -->
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">
 
 
  • 이렇게 설정하면 브라우저가 적절한 크기의 아이콘을 선택해서 적용함. 
  • 파비콘 해상도 별로 가지고 싶다면 파비콘 생성 사이트를 참고하자 ( 참고로 코드도 제공해줌 )
  • 🔗 RealFaviconGenerator

🚀 결론

  • 기본 .ico 파일만 있으면 브라우저가 알아서 크기를 조정해줌.
  • 하지만 고해상도(HiDPI, Retina) 디스플레이에서는 흐려질 수 있음.
  • 다양한 크기의 PNG 파비콘을 추가하면 해상도별로 최적화됨.
  • 자동 생성 사이트(RealFaviconGenerator) 활용하면 쉽게 해결 가능!

 

 이렇게 파비콘 설정에 대해서 알아보았다. 추가 적인 내용이 필요한 경우에는 댓글을 요청드리고, 틀린 부분이 있다면 이것 또한 댓글로 알려주시면 수정하도록 하겠습니다!

 

 

반응형
저작자표시

'IT > jsp' 카테고리의 다른 글

Intelli J jsp 빌드 중 자동 반영 ( Build project automatically )  (4) 2025.04.08
jsp : 왜 HTTP 대신 HTTPS가 꼭 필요할까? ( SSL 적용 방법 )  (7) 2025.03.18

'IT/jsp'의 다른글

  • 현재글jsp : 파비콘 ( Favicon ) 설정

관련글

티스토리툴바