programing

웹 사이트의 브라우저 탭 아이콘(favicon)을 추가하려면 어떻게 해야 합니까?

firstcheck 2023. 4. 8. 16:15
반응형

웹 사이트의 브라우저 탭 아이콘(favicon)을 추가하려면 어떻게 해야 합니까?

웹 사이트에서 작업 중인데 브라우저 탭에 작은 아이콘을 추가하고 싶습니다.

HTML 서 html html html html html html html html html?드의어어헤헤헤헤헤헤헤헤헤헤헤헤헤?는 나나 a a a가 있다.png이치노

관련: 브라우저 탭의 HTML 설정 이미지.

웹 사이트에 favicon을 추가하는 방법은 두 가지가 있습니다.

<link rel="icon">

다음 를 추가하기만 하면 다음 코드를 할 수 .<head>★★★★

<link rel="icon" href="http://example.com/favicon.png">

PNG favicon은 IE <= 10을 제외한 대부분의 브라우저에서 지원됩니다.하위 호환성을 위해 ICO favicon을 사용할 수 있습니다.

Atribute는 더 이상 앞에 붙일 필요가 없습니다.MDN 링크 유형:

shortcut 앞에 됩니다.icon단, 이 링크타입은 비동작성이며 무시되며 웹 작성자는 이 링크타입을 사용할 수 없습니다.

favicon.ico 내

다른 SO 답변(@mercator 사용):

4, 3.5,및는 """ (Chrome 4, Firefox 3.5, IE8, Opera 10 "Safari 4")를 합니다.favicon.ico하지 않은<link>.

'만들면 돼요'를 요./favicon.ico당신의 웹사이트에 당신의 favicon을 돌려달라고 요청하세요.안타깝게도 이 옵션에서는 PNG 아이콘을 사용할 수 없습니다.

favicon.png vs favicon.ico 참조 - ICO 대신 PNG를 사용해야 하는 이유는 무엇입니까?

  1. 도구를 사용하여 png를 ico 파일로 변환합니다."favicon generator"를 검색하면 많은 온라인 도구를 찾을 수 있습니다.

  2. 를 ico에 .head a link- - 태그:

    <link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">

제가 찾은 최고의 것은 http://www.favicomatic.com/입니다.왜냐하면 가장 선명한 favicon을 얻을 수 있었고, 변환 후 편집이 필요 없었기 때문입니다.16x16과 32x32에서 favicon을 생성하고 "Every size, sir!"라고 인용합니다.또한, 그들의 사이트는 멋지고 사용하기 쉽다.

또한 생성하는 파일에 사용해야 하는 html도 생성합니다.

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<meta name="application-name" content="&nbsp;"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />

처음 20여 개의 구글 결과를 봤는데 이게 단연 최고였어요.

다양한 디바이스용으로 설정할 수 있는 다양한 아이콘과 스플래시 스크린이 있습니다.이 답변은 모두 지원하는 방법을 통해 이루어집니다.

다음은 제가 정보를 수집한 곳의 관련 링크와 함께 사용한 몇 가지 조각입니다.ASP에 대한 자세한 내용과 자세한 내용은 블로그를 참조하십시오.NET MVC 보일러 플레이트 프로젝트 템플릿(샘플 이미지 파일 포함).

html 헤드에 다음 마크업을 추가합니다.주석으로 표시된 섹션은 완전히 옵션입니다.단, 아이콘의 모든 사용법을 설명하려면 주석 없는 섹션을 권장합니다.겁내지 마세요. 대부분 당신을 돕기 위한 댓글이라면요.

<!-- Icons & Platform Specific Settings - Favicon generator used to generate the icons below http://realfavicongenerator.net/ -->
<!-- shortcut icon - It is best to add this icon to the root of your site and only use this link element if you move it somewhere else. This file contains the following sizes 16x16, 32x32 and 48x48. -->
<!--<link rel="shortcut icon" href="favicon.ico">-->
<!-- favicon-96x96.png - For Google TV. -->
<link rel="icon" type="image/png" href="/content/images/favicon-96x96.png" sizes="96x96">
<!-- favicon-16x16.png - The classic favicon, displayed in the tabs. -->
<link rel="icon" type="image/png" href="/content/images/favicon-16x16.png" sizes="16x16">
<!-- favicon-32x32.png - For Safari on Mac OS. -->
<link rel="icon" type="image/png" href="/content/images/favicon-32x32.png" sizes="32x32">

<!-- Android/Chrome -->
<!-- manifest-json - The location of the browser configuration file. It contains locations of icon files, name of the application and default device screen orientation. Note that the name field is mandatory.
    https://developer.chrome.com/multidevice/android/installtohomescreen. -->
<link rel="manifest" href="/content/icons/manifest.json">
<!-- theme-color - The colour of the toolbar in Chrome M39+
    http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android -->
<meta name="theme-color" content="#1E1E1E">
<!-- favicon-192x192.png - For Android Chrome M36 to M38 this HTML is used. M39+ uses the manifest.json file. -->
<link rel="icon" type="image/png" href="/content/icons/favicon-192x192.png" sizes="192x192">
<!-- mobile-web-app-capable - Run Android/Chrome version M31 to M38 in standalone mode, hiding the browser chrome. -->
<!-- <meta name="mobile-web-app-capable" content="yes"> -->

<!-- Apple Icons - You can move all these icons to the root of the site and remove these link elements, if you don't mind the clutter.
    https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Introduction.html#//apple_ref/doc/uid/30001261-SW1 -->
<!-- apple-mobile-web-app-title - The name of the application if pinned to the IOS start screen. -->
<!--<meta name="apple-mobile-web-app-title" content="">-->
<!-- apple-mobile-web-app-capable - Hide the browsers user interface on IOS, when the app is run in 'standalone' mode. Any links to other pages that are clicked whilst your app is in standalone mode will launch the full Safari browser. -->
<!--<meta name="apple-mobile-web-app-capable" content="yes">-->
<!-- apple-mobile-web-app-status-bar-style - default/black/black-translucent Styles the IOS status bar. Using black-translucent makes it transparent and overlays it on top of your site, so make sure you have enough margin. -->
<!--<meta name="apple-mobile-web-app-status-bar-style" content="black">-->
<!-- apple-touch-icon-57x57.png - Android Stock Browser and non-Retina iPhone and iPod Touch -->
<link rel="apple-touch-icon" sizes="57x57" href="/content/images/apple-touch-icon-57x57.png">
<!-- apple-touch-icon-114x114.png - iPhone (with 2× display) iOS = 6 -->
<link rel="apple-touch-icon" sizes="114x114" href="/content/images/apple-touch-icon-114x114.png">
<!-- apple-touch-icon-72x72.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 6 -->
<link rel="apple-touch-icon" sizes="72x72" href="/content/images/apple-touch-icon-72x72.png">
<!-- apple-touch-icon-144x144.png - iPad (with 2× display) iOS = 6 -->
<link rel="apple-touch-icon" sizes="144x144" href="/content/images/apple-touch-icon-144x144.png">
<!-- apple-touch-icon-60x60.png - Same as apple-touch-icon-57x57.png, for non-retina iPhone with iOS7. -->
<link rel="apple-touch-icon" sizes="60x60" href="/content/images/apple-touch-icon-60x60.png">
<!-- apple-touch-icon-120x120.png - iPhone (with 2× and 3 display) iOS = 7 -->
<link rel="apple-touch-icon" sizes="120x120" href="/content/images/apple-touch-icon-120x120.png">
<!-- apple-touch-icon-76x76.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 7 -->
<link rel="apple-touch-icon" sizes="76x76" href="/content/images/apple-touch-icon-76x76.png">
<!-- apple-touch-icon-152x152.png - iPad 3+ (with 2× display) iOS = 7 -->
<link rel="apple-touch-icon" sizes="152x152" href="/content/images/apple-touch-icon-152x152.png">
<!-- apple-touch-icon-180x180.png - iPad and iPad mini (with 2× display) iOS = 8 -->
<link rel="apple-touch-icon" sizes="180x180" href="/content/images/apple-touch-icon-180x180.png">

<!-- Apple Startup Images - These are shown when the page is loading if the site is pinned https://gist.github.com/tfausak/2222823 -->
<!-- apple-touch-startup-image-1536x2008.png - iOS 6 & 7 iPad (retina, portrait) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-1536x2008.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-1496x2048.png - iOS 6 & 7 iPad (retina, landscape) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-1496x2048.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-768x1004.png - iOS 6 iPad (portrait) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-768x1004.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)">
<!-- apple-touch-startup-image-748x1024.png - iOS 6 iPad (landscape) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-748x1024.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)">
<!-- apple-touch-startup-image-640x1096.png - iOS 6 & 7 iPhone 5 -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-640x1096.png"
      media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-640x920.png - iOS 6 & 7 iPhone (retina) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-640x920.png"
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-320x460.png - iOS 6 iPhone -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-320x460.png"
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)">

<!-- Windows 8 Icons - If you add an RSS feed, revisit this page and regenerate the browserconfig.xml file. You will then have a cool live tile!
     browserconfig.xml - Windows 8.1 - Has been added to the root of the site. This points to the tile images and tile background colour. It contains the following images:
     mstile-70x70.png - For Windows 8.1 / IE11.
     mstile-144x144.png - For Windows 8 / IE10.
     mstile-150x150.png - For Windows 8.1 / IE11.
     mstile-310x310.png - For Windows 8.1 / IE11.
     mstile-310x150.png - For Windows 8.1 / IE11.
     See http://www.buildmypinnedsite.com/en and http://msdn.microsoft.com/en-gb/library/ie/dn255024%28v=vs.85%29.aspx. -->
<!-- application-name - Windows 8+ - The name of the application if pinned to the start screen. -->
<!--<meta name="application-name" content="">-->
<!-- msapplication-TileColor - Windows 8 - The tile colour which shows around your tile image (msapplication-TileImage). -->
<meta name="msapplication-TileColor" content="#5cb95c">
<!-- msapplication-TileImage - Windows 8 - The tile image. -->
<meta name="msapplication-TileImage" content="/content/images/mstile-144x144.png">

내 browserconfig.xml 파일.상기의 상세한 설명.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/Content/Images/mstile-70x70.png"/>
      <square150x150logo src="/Content/Images/mstile-150x150.png"/>
      <square310x310logo src="/Content/Images/mstile-310x310.png"/>
      <wide310x150logo src="/Content/Images/mstile-310x150.png"/>
      <TileColor>#5cb95c</TileColor>
    </tile>
  </msapplication>
</browserconfig>

manifest.json 파일입니다.상기의 상세한 설명.

{
    "name": "ASP.NET MVC Boilerplate (Required! Update This)",
    "icons": [
        {
            "src": "\/Content\/icons\/android-chrome-36x36.png",
            "sizes": "36x36",
            "type": "image\/png",
            "density": "0.75"
        },
        {
            "src": "\/Content\/icons\/android-chrome-48x48.png",
            "sizes": "48x48",
            "type": "image\/png",
            "density": "1.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-72x72.png",
            "sizes": "72x72",
            "type": "image\/png",
            "density": "1.5"
        },
        {
            "src": "\/Content\/icons\/android-chrome-96x96.png",
            "sizes": "96x96",
            "type": "image\/png",
            "density": "2.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-144x144.png",
            "sizes": "144x144",
            "type": "image\/png",
            "density": "3.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image\/png",
            "density": "4.0"
        }
    ]
}

프로젝트의 파일 목록(위의 메타 태그를 사용하지 않기 위해 일부 파일을 프로젝트의 루트에 배치하는 경우 이러한 파일의 이름이 중요합니다).

favicon.ico
browserconfig.xml
Content/Images/
    android-chrome-144x144.png
    android-chrome-192x192.png
    android-chrome-36x36.png
    android-chrome-48x48.png
    android-chrome-72x72.png
    android-chrome-96x96.png
    apple-touch-icon.png
    apple-touch-icon-57x57.png
    apple-touch-icon-60x60.png
    apple-touch-icon-72x72.png
    apple-touch-icon-76x76.png
    apple-touch-icon-114x114.png
    apple-touch-icon-120x120.png
    apple-touch-icon-144x144.png
    apple-touch-icon-152x152.png
    apple-touch-icon-180x180.png
    apple-touch-icon-precomposed.png (180x180)
    favicon-16x16.png
    favicon-32x32.png
    favicon-96x96.png
    favicon-192x192.png
    manifest.json
    mstile-70x70.png
    mstile-144x144.png
    mstile-150x150.png
    mstile-310x150.png
    mstile-310x310.png
    apple-touch-startup-image-1536x2008.png
    apple-touch-startup-image-1496x2048.png
    apple-touch-startup-image-768x1004.png
    apple-touch-startup-image-748x1024.png
    apple-touch-startup-image-640x1096.png
    apple-touch-startup-image-640x920.png
    apple-touch-startup-image-320x460.png

총 오버헤드

추가 HTML 3KB의 코멘트를 삭제한 경우 1.5KB의 스플래시 화면을 지원하지 않는 경우.HTML 컨텐츠에 GZIP 압축을 사용하고 있는 경우(요청마다 약 634바이트의 오버헤드를 발생시켜 모든 플랫폼을 지원하거나 스플래시 화면을 사용하지 않고 446바이트의 오버헤드를 발생시킵니다.저는 개인적으로 IOS, Android 및 Windows 디바이스를 지원하는 것이 가치 있다고 생각합니다만, 선택지는 선택입니다.옵션만 드리겠습니다.

현재 웹 아이콘/스플래시 화면/설정 상황에 대한 참고 사항

벤더 고유의 아이콘, 기동 화면 및 웹 브라우저 또는 핀으로 고정된 아이콘을 제어하는 특수 태그가 있는 이 상황은 말도 안 됩니다.완벽한 세계에서는 모든 사이즈가 잘 어울리고 페이지 하단에 배치되는 favicon.svg 파일을 사용합니다.작성 시점에서는 FireFox만 이 기능을 지원합니다(Can Can 참조).IUse.com )를 참조해 주세요.

그러나 요즘은 아이콘만 설정되는 것이 아니라 벤더 고유의 설정(위 그림)이 몇 가지 있지만 favicon.svg 파일은 대부분의 사용 사례를 대상으로 합니다.

갱신하다

새로운 Android/Chrome 버전 M39+ favicon/theming 옵션을 포함하도록 업데이트되었습니다.흥미롭게도 Microsoft와 유사한 방식을 취했지만 XML 대신 JSON 파일을 사용하고 있습니다.

제 웹사이트에서 성공적으로 이 작업을 수행했습니다.

를 SeaMonkey에 .<head>HTML의 favicon.ico를 사용하다또한 IE 이외의 브라우저에서는 .ico 형식뿐만 아니라 다른 유형의 이미지를 사용할 수 있습니다.이게 도움이 됐으면 좋겠어요.

http://faviconer.com 를 사용해 를 변환하는 것을 추천합니다.PNG 또는.에의 GIF.ICO 파일

둘 다 생성할 수 있습니다.16x16그리고.32x32(새로운 retina 디스플레이의 경우)를 1개로 설정합니다.ICO 파일

IE 및 Firefox에는 문제가 없습니다.

위에는 복잡한 해결책이 많이 있습니다.나에게?이미지 크기를 32 x 32 픽셀로 변경한 후 GIMP를 사용하여 원본 PNG 파일을 저장했습니다.

*.ico 파일로 저장하고

<link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">

상기의

<link rel="shortcut icon" 
href="http://someWebsiteLocation/images/imageName.ico">

아직 혼란스러운 분들을 위해 좀 더 명확하게 말씀드리겠습니다..ico 파일은 .png보다 투과성이 높은 경향이 있기 때문에 위에서 설명한 바와 같이 이미지를 변환할 것을 권장합니다.http://www.favicomatic.com/done 또한 href 안은 이미지의 위치일 뿐입니다.http://를 앞에 추가하는 것을 잊지 마십시오.그렇지 않으면 동작하지 않습니다.

HTML 표준link rel=icon

완전성을 위해 표준에는 다음과 같이 기재되어 있습니다.https://html.spec.whatwg.org/multipage/links.html#rel-icon

icon 키워드는 링크 요소와 함께 사용할 수 있습니다.이 키워드는 외부 자원 링크를 만듭니다.

지정된 리소스는 페이지 또는 사이트를 나타내는 아이콘이며 사용자 인터페이스에서 페이지를 나타낼 때 사용자 에이전트가 사용해야 합니다.

[...]

다음 스니펫은 여러 개의 아이콘이 있는 응용 프로그램의 상단 부분을 보여 줍니다.

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <title>lsForums — Inbox</title>
  <link rel=icon href=favicon.png sizes="16x16" type="image/png">
  <link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
  <link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
  <link rel=icon href=iphone.png sizes="57x57" type="image/png">
  <link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">
  <link rel=stylesheet href=lsforums.css>
  <script src=lsforums.js></script>
  <meta name=application-name content="lsForums">
 </head>
 <body>
  ...

이력상의 이유로 icon 키워드 앞에 숏컷 키워드가 붙을 수 있습니다."shortcut" 키워드가 있는 경우 rel 속성의 전체 값은 문자열 "숏컷 아이콘"에 대해 ASCII 대소문자를 구분하지 않는 일치여야 합니다(토큰 사이에 단일 U+0020 SPACE 문자가 있고 다른 ASCII 공백이 없음).

Chrome에서 페이지 아이콘(favicon)을 표시하려면 호스팅 서버에서 웹 사이트를 확인하거나 PC에서 웹 사이트를 개발 및 테스트하는 동안 로컬 호스트를 사용해야 합니다.

인덱스 파일의 헤더 섹션에 다음 코드를 사용하십시오.

<link rel="icon" href="yourfevicon.ico" />

다른 것은 사용하지 않았습니다만, https://realfavicongenerator.net/가 가장 좋은 선택인 것 같고, 아직 여기에 기재되어 있지 않습니다.

SVG를 favicon을 생성하기 위한 소스 이미지로 지원하며, 다른 플랫폼의 이미지를 덮어쓸 수 있는 유용한 옵션을 제공합니다.게다가 디폴트에서는, 모든 구식 플랫폼과의 하위 호환성이 있는 이미지는 대량으로 생성되지 않습니다.대신 원하는지 확인할 수 있는 옵션이 제공됩니다.

개발자가 보낸 메일에서 SVG favicon 생성 지원 및 SVG 테마 감도를 추가할 계획도 있다고 생각합니다.이것은 매우 훌륭한 기능이라고 생각합니다.

로 수 .favicon.png모든 HTTP 요청을 Apache에서 이름 변경/번역하여 ~모든 브라우저에서 검색해야 하는 파일.htaccess파일링 그 하는 파일링)은 다음과 

# Universal favicon
RewriteRule ^(?:fav|apple-touch-)icon.*\.(?:ico|png)$ favicon.png [L]

을 [tiny]에 추가하면 .인을 추가하기만 하면 됩니다.headHTML 드 html :

<link rel="icon" href="favicon.png">

이미지 치수에 대해서는 웹 앱(예를 들어 Android 192px)에서 기대하는 가장 높은 치수를 사용하고 나머지 치수는 사용자 에이전트에 의해 자동으로 다운샘플링됩니다(이것은 현대의 retina 디바이스에서는 문제가 되지 않습니다).

언급URL : https://stackoverflow.com/questions/4888377/how-to-add-a-browser-tab-icon-favicon-for-a-website

반응형
저작자표시

'programing' 카테고리의 다른 글

VBA 파일 존재 여부 확인  (0) 2023.04.08
Bash 스크립트로 파일에 대한 세레독을 작성하려면 어떻게 해야 합니다.  (0) 2023.04.08
Windows OS 버전을 검출하려면 어떻게 해야 합니까?  (0) 2023.04.08
도커: Alpine 기반 도커 이미지에서 bash를 사용하는 방법  (0) 2023.04.08
디렉토리를 tar하지만 완전한 절대 경로를 아카이브에 저장하지 않음  (0) 2023.04.08

'programing'의 다른글

  • 현재글웹 사이트의 브라우저 탭 아이콘(favicon)을 추가하려면 어떻게 해야 합니까?

관련글

댓글

티스토리툴바