[html] 내 웹 사이트의 로고를 브라우저 탭의 아이콘 이미지로 설정하려면 어떻게해야합니까?

Program / 글쓴이

브라우저 탭에서 페이지 제목 옆에있는 이미지-여기에 이미지를 어떻게 연결할 수 있습니까?

답변

이 이미지는 ‘ 파비콘 ‘ 이라고 불리며 파비콘.ico 의 표준 파일 유형 인 작은 정사각형 모양의 파일입니다. .png또는 .gif너무 사용할 수 있지만 더 나은 호환성을 위해 표준을 따라야합니다.

웹 사이트에 하나를 설정하려면 다음을 수행해야합니다.

  1. 로고의 정사각형 이미지를 만들고 (최대 크기가 없다는 것을 알고있는 한 32×32 또는 16×16 픽셀 권장) .ico파일 로 변환 합니다. Gimp, Photoshop ( 플러그인 사용 ) 또는 Favicon.cc 또는 RealFaviconGenerator 와 같은 웹 사이트 에서이 작업을 수행 할 수 있습니다 .

  2. 그런 다음 두 가지 설정 방법이 있습니다.

    A) 웹 사이트 의 루트 폴더 / 디렉토리 (옆 index.html)에 favicon.ico.

    또는

    B) 다음과 같이 사이트에 <head></head>있는 모든 .html파일 의 태그 사이에 링크합니다 .

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

favicon어떤 웹 사이트에서든 보고 싶다면 글을 쓰면 www.url.com/favicon.ico(아마도) 볼 수있을 것입니다. Stackoverflow의 favicon은 16×16 픽셀이고 Wikipedia 는 32×32입니다.

* : 파일 크기 제한이없는 브라우저 문제도 있습니다. 매우 큰 파비콘으로 브라우저를 쉽게 충돌시킬 수 있습니다. 자세한 정보는 여기에 있습니다.

답변

‘ 파비콘 ‘ 이라고 하며 웹 사이트 의 헤더 섹션에 아래 코드를 추가해야합니다 .

이것을 <head>섹션에 추가하기 만하면 됩니다.

<link rel="icon" href="/your_path_to_image/favicon.jpg">

답변

이것은 파비콘 이며 링크에 설명되어 있습니다.

예 : W3C에서

  <link rel="icon"
     type="image/png"
     href="http://example.com/myicon.png">

또한 이미지 파일은 물론 적절한 위치에 있습니다.

답변

<link rel="apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file:
'apple-touch-icon-retina.png')}">

또는 이것을 사용할 수 있습니다

<link rel="shortcut icon" sizes="114x114" href="${resource(dir: 'images', file: 'favicon.ico')}"
type="image/x-icon">

답변

웹 사이트의 루트에 “favicon.ico”라는 아이콘 파일을 추가합니다.

답변