Am'am fost de lucru pe un site si mi-am'd place să adăugați o pictogramă mică la browser-ul tab.
Cum pot face acest lucru în HTML și în cazul în care în codul ar trebui să-l loc (de exemplu antet)? Am o .png
logo-ul fișierului pe care am'd place să se convertească la o icoana.
Legate de: https://stackoverflow.com/questions/2359866/html-set-image-on-browser-tab.
Există de fapt două moduri de a adăuga un favicon pentru un site web.
<link rel="icon">
Pur și simplu adăugați următorul cod la `
element:<link rel="icon" href="http://example.com/favicon.png">
PNG favicons sunt acceptate de cele mai multe browsere, cu excepția IE <= 10. Pentru compatibilitate, puteți utiliza ICO favicons.
Rețineți că don't trebuie să preceadă icon
în atribut " rel " cu "shortcut" mai. De MDN tipuri de Link:
"shortcut" de tip link-ul este de multe ori văzut înainte de
icon
, dar acest tip de legătură este non-conforme, ignorat și web autorii trebuie să nu-l mai folosesc.
favicon.ico
în directorul rădăcinăDe DECI un alt raspuns (cu @mercator):
Toate browserele moderne (testat cu Chrome 4, Firefox 3.5, IE8, Opera 10 și Safari 4) va solicita întotdeauna un favicon.ico
dacă nu'am specificat o pictogramă de comandă rapidă prin
`.
Deci, tot ce trebuie să faceți este de a face /favicon.ico
cerere pentru site-ul tău întoarcerea ta favicon. Această opțiune, din păcate, nu't vă permite să utilizați un PNG pictograma.
A se vedea, de asemenea, https://stackoverflow.com/q/1344122/3853934
Cel mai bun pe care l-am găsit este http://www.favicomatic.com/ Eu zic cel mai bine pentru că mi-a dat crispest favicon, și necesară nici o editare după transformarea lor. Acesta va genera favicon la 16x16 și 32x32 și să le citez "Fiecare al naibii de dimensiune, domnule!" De asemenea, site-ul lor arată bine și este ușor de utilizat.
Ei au, de asemenea, de a genera html-ul care aveți nevoie pentru a utiliza pentru fișierele pe care le generează.
<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" />
M-am uitat la primele 20 de rezultate google, iar acest lucru a fost de departe cel mai bun.
Există un număr de diferite icoane și chiar ecrane splash pe care le puteți seta pentru diverse dispozitive. Acest răspuns a merge prin modul de a le susține.
Aici sunt unele fragmente mi-au folosit cu link-uri relevante pentru a în cazul în care am adunat informații. Vedea pe blog pentru mai multe informații și mai multe informații despre ASP.NET MVC Șabloane model de proiect cu toate astea construit în drept afară de la cutie (Inclusiv proba de fișiere de imagine).
Se adaugă următorul text mark-up html, cap. A comentat secțiuni sunt în întregime opțională. În timp ce necomentate secțiuni sunt recomandate pentru a acoperi toate icon utilizări. Don't fi speriat, cele mai multe, dacă este de comentarii pentru a vă ajuta.
<!-- 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">
Mea browserconfig.xml fișierul. Explicație completă de mai sus.
<?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>
Mi manifest.fișier json. Explicație completă de mai sus.
{
"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"
}
]
}
O listă de fișiere în proiect (Rețineți că numele acestor fișiere sunt important, dacă vă decideți pentru a pune unele dintre ele, la rădăcina proiectului, pentru a evita utilizarea de mai sus meta tag-uri):
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
Total Regie
Dacă luați comentariile pe care's 3KB de HTML suplimentare, dacă nu't de sprijin ecrane splash, care's 1.5 KB. Dacă sunteți folosind GZIP compression pe conținut HTML, pe care toată lumea ar trebui să fac în aceste zile, care te lasa cu aproximativ 634 de Bytes de deasupra capului per cerere pentru a sprijini toate platformele sau 446 Bytes fără ecrane splash. Eu personal cred ca merita sa-l sprijini IOS, dispozitive Android și Windows dar alegerea ta, I'm doar oferind opțiuni!
Notă Despre Actuala Web Icon/Splash Screen/Setări De Situație
Această situație cu vânzătorul de pictograme specifice, ecrane splash și etichete speciale pentru a controla browser-ul web sau fixate icoane este ridicol. Într-o lume perfectă, ne-ar folosi toate un favicon.fișier svg, care ar putea să arate bine la orice dimensiune și pot fi plasate la baza paginii. Doar FireFox suporta acest lucru la momentul de scris (a se Vedea CanIUse.com).
Cu toate acestea, icoanele nu sunt singurul cadru în aceste zile, există mai multe alte furnizor de setări specifice (prezentate mai sus), dar un favicon.fișier svg ar acoperi cele mai multe cazuri de utilizare.
Update
Actualizat pentru a include noul Android/Chrome versiunea M39+ favicon/temelor opțiuni. Interesant, ei au plecat cu o abordare similară la Microsoft, dar sunt folosind un fișier JSON în loc de XML.
Am'am făcut acest lucru cu succes pentru site-ul meu.
Singura excepție este, Mozilla browser-ul necesită cod HTML introdus în <head>
; întrucât, celelalte browsere va afișa în continuare favicon.ico fără nici un HTML de inserție. De asemenea, orice alt browser decat IE pot utiliza alte tipuri de imagini, nu doar .format ico. Sper că acest lucru ajută.
Am creat un on-line Favicon Generator cu care puteți crea un favicon la Icoane Awesome Font. Puteți previzualiza creat favicon live în browser-ul.
Dacă doriți caracteristici suplimentare, vă rugăm să nu ezitați să prezinte o problemă sau o cerere de tragere aici :).
Există o mulțime de soluții complicate de mai sus. Pentru mine? Am folosit GIMP pentru a salva o copie a originalului PNG după schimbarea imaginii dimensiunea de 32 x 32 pixeli.
Doar asigurați-vă că să-l salvați ca un *.ico fișiere și de a folosi
<link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">
enumerate mai sus
Am'd vă recomandăm să încercați http://faviconer.com pentru a converti .PNG sau .GIF la un .Fișier ICO.
Puteți crea atât 16x16 " și " 32x32
(pentru noul retina display) într-o singură .Fișier ICO.
Nici probleme cu IE si Firefox
Pentru Chrome pentru a afișa pictograma paginii (favicon), aveți nevoie pentru a verifica site-ul de la un server de hosting sau puteți utiliza calculatorul local, în timp ce în curs de dezvoltare și de testare site-ul dvs. de pe PC.
<link rel="shortcut icon"
href="http://someWebsiteLocation/images/imageName.ico">
Dacă am putea adăuga mai multă claritate pentru cei dintre voi care sunt încă confuză. A .fișier ico tinde să ofere mai multă transparență decât .png, care este de ce am recomanda conversia imagine aici cum sa menționat mai sus: http://www.favicomatic.com/done de asemenea, în interiorul href este doar locația imaginii, poate fi orice locație de server, amintiți-vă pentru a adăuga http:// in fata, altfel nu o't de lucru.