웹 사이트에 브라우저 탭 아이콘 (favicon)을 추가하는 방법은 무엇입니까?
웹 사이트에서 작업하고 있으며 브라우저 탭에 작은 아이콘을 추가하고 싶습니다.
HTML에서 어떻게 할 수 있으며 코드의 어디에 위치해야합니까 (예 : 헤더)? 나는이 .png내가 아이콘으로 변환하고 싶은 것을 로고 파일을.
관련 : 브라우저 탭의 HTML 세트 이미지 .
웹 사이트에 즐겨 찾기 아이콘을 추가하는 방법에는 실제로 두 가지가 있습니다.
<link rel="icon">
<head>요소에 다음 코드를 추가하기 만하면됩니다 .
<link rel="icon" href="http://example.com/favicon.png">
PNG 파비콘 은 IE <= 10을 제외한 대부분의 브라우저에서 지원됩니다 . 이전 버전과의 호환성을 위해 ICO 즐겨 찾기 아이콘을 사용할 수 있습니다.
당신이주의 앞에 필요가 없습니다 icon에 rel와 속성을shortcut 더 이상. 에서 MDN 링크 유형 :
shortcut링크 유형은 종종 전에 볼 수icon있지만,이 링크 유형이 부적합하고, 무시하고 웹 저자는 더 이상 사용하지 않아야합니다 .
favicon.ico 루트 디렉토리에
모든 최신 브라우저 (Chrome 4, Firefox 3.5, IE8, Opera 10 및 Safari 4에서 테스트)는를
favicon.ico통해 바로 가기 아이콘을 지정하지 않은 경우 항상 요청합니다<link>.
따라서 /favicon.ico웹 사이트 요청으로 즐겨 찾기 아이콘을 반환하면됩니다. 불행히도이 옵션을 사용하면 PNG 아이콘을 사용할 수 없습니다.
favicon.png vs favicon.ico 도 참조하십시오. ICO 대신 PNG를 사용해야하는 이유는 무엇입니까?
- 도구를 사용하여 png를 ico 파일로 변환하십시오. "favicon generator"를 검색하면 많은 온라인 도구를 찾을 수 있습니다.
ico 주소를 -tag
head와 함께link넣습니다.<link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">
내가 찾은 가장 좋은 것은 http://www.favicomatic.com/ 입니다 . 가장 선명한 파비콘을 제공하고 변형 후에 편집 할 필요가 없기 때문에 가장 잘 말합니다. 16x16과 32x32에서 파비콘을 생성하고 "모든 크기, 선생님!" 또한, 그들의 사이트는 시원하고 사용하기 쉽습니다.
또한 생성 한 파일에 사용해야하는 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=" "/>
<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 Boilerplate 프로젝트 템플릿 에 대한 자세한 내용과 자세한 내용은 샘플 이미지 파일을 포함하여 기본적으로 제공되는 내 블로그 를 참조하십시오 .
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
총 오버 헤드
3KB의 추가 HTML 인 주석을 제거하는 경우 스플래시 화면을 지원하지 않는 경우 1.5KB입니다. 요즘 모두가해야 할 HTML 컨텐츠에 GZIP 압축을 사용하는 경우 모든 플랫폼을 지원하기 위해 요청 당 약 634 바이트의 오버 헤드가 발생하거나 스플래시 화면이없는 446 바이트가 남습니다. 개인적으로 IOS, Android 및 Windows 장치를 지원하는 것이 가치가 있다고 생각하지만 원하는 선택은 옵션을 제공하는 것입니다!
현재 웹 아이콘 / 스플래시 화면 / 설정 상황에 대한 참고 사항
벤더 특정 아이콘, 스플래시 화면 및 웹 브라우저 또는 고정 된 아이콘을 제어하는 특수 태그가있는 상황은 어리 석습니다. 완벽한 세상에서 우리는 모두 favicon.svg 파일을 사용합니다.이 파일은 크기에 상관없이 페이지의 루트에 배치 할 수 있습니다. 작성시 FireFox 만이를 지원합니다 ( CanIUse.com 참조 ).
그러나 아이콘은 요즘에만 설정되는 것이 아니라 위와 같이 여러 공급 업체별 설정이 있지만 favicon.svg 파일은 대부분의 사용 사례를 다룹니다.
최신 정보
새로운 Android / Chrome 버전 M39 + favicon / theming 옵션을 포함하도록 업데이트되었습니다. 흥미롭게도 Microsoft와 비슷한 접근 방식을 사용했지만 XML 대신 JSON 파일을 사용하고 있습니다.
내 웹 사이트에서이 작업을 성공적으로 수행했습니다.
예외적으로 SeaMonkey 브라우저에는 HTML 코드를 삽입해야합니다 <head>. 반면 다른 브라우저는 HTML 삽입없이 favicon.ico를 계속 표시합니다. 또한 IE 이외의 브라우저는 .ico 형식뿐만 아니라 다른 유형의 이미지를 사용할 수 있습니다. 이게 도움이 되길 바란다.
Font Awesome Icons 에서 즐겨 찾기 아이콘을 만들 수 있는 온라인 Favicon Generator 를 만들었습니다 . 생성 된 파비콘을 브라우저에서 실시간으로 미리 볼 수 있습니다.
추가 기능을 원하면 여기에 문제 또는 풀 요청을 제출 하십시오 . :)
위의 복잡한 솔루션이 많이 있습니다. 나를 위해? 이미지 크기를 32 x 32 픽셀로 변경 한 후 김프를 사용하여 원본 PNG 파일의 사본을 저장했습니다.
* .ico 파일로 저장하고
<link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">
위에 나열된
.PNG 또는 .GIF를 .ICO 파일로 변환하려면 http://faviconer.com 을 시도하는 것이 좋습니다 .
하나의 .ICO 파일에서 16x16및 32x32(새로운 망막 디스플레이 용)을 모두 만들 수 있습니다 .
IE 및 Firefox에 문제가 없습니다
Chrome에서 페이지 아이콘 (favicon)을 표시하려면 호스팅 서버에서 웹 사이트를 확인하거나 PC에서 웹 사이트를 개발하고 테스트하는 동안 로컬 호스트를 사용할 수 있습니다.
<link rel="shortcut icon"
href="http://someWebsiteLocation/images/imageName.ico">
여전히 혼란스러워하는 사람들을 위해 더 명확성을 더할 수 있다면. .ico 파일은 .png보다 더 많은 투명성을 제공하는 경향이 있으므로 위에서 언급 한대로 여기에서 이미지를 변환하는 것이 좋습니다. http://www.favicomatic.com/done 또한 href 내부는 이미지의 위치입니다. 서버 위치가 될 수 있습니다. 앞에 http : //를 추가해야합니다. 그렇지 않으면 작동하지 않습니다.
참고 URL : https://stackoverflow.com/questions/4888377/how-to-add-a-browser-tab-icon-favicon-for-a-website
'Programing' 카테고리의 다른 글
| Git에서 처음 두 커밋을 스쿼시 하시겠습니까? (0) | 2020.02.11 |
|---|---|
| 세그먼테이션 결함이란 무엇입니까? (0) | 2020.02.11 |
| htmlentities () 대 htmlspecialchars () (0) | 2020.02.11 |
| Android Studio에서 전체 프로젝트에서 모든 문자열을 검색하십시오. (0) | 2020.02.11 |
| 다른 div 안에 div를 세로로 가운데에 맞추기 (0) | 2020.02.11 |