I've telah bekerja pada sebuah situs web dan I'd ingin menambahkan sebuah ikon kecil pada tab browser.
Bagaimana saya bisa melakukan ini di HTML dan di mana kode yang akan saya perlu tempat itu (misalnya header)? Aku punya .png
logo file yang saya'd ingin mengkonversi ke ikon.
Terkait: https://stackoverflow.com/questions/2359866/html-set-image-on-browser-tab.
kepala
dengan link
-tag:Sebenarnya ada dua cara untuk menambahkan favicon untuk website.
<link rel="icon">
Cukup tambahkan kode berikut ke <head>
elemen:
<link rel="icon" href="http://example.com/favicon.png">
PNG favicons yang didukung oleh kebanyakan browser kecuali IE <= 10. Untuk kompatibilitas ke belakang, anda dapat menggunakan ICO favicon.
Perhatikan bahwa anda don't harus mendahului icon
di rel
atribut dengan jalan pintas
lagi. Dari MDN jenis Link:
jalan pintas
link jenis ini sering terlihat sebelumikon
, tapi link ini adalah jenis non-conforming, diabaikan dan web penulis tidak harus menggunakannya lagi.
favicon.ico
di direktori rootDari lain SEHINGGA jawaban (oleh @mercator):
Semua browser modern (diuji dengan Chrome 4, Firefox 3.5, IE8, Opera 10, dan Safari 4) akan selalu meminta
favicon.ico
kecuali anda've ditentukan ikon shortcut melalui<link>
.
Jadi semua harus anda lakukan adalah untuk membuat /favicon.ico
permintaan ke situs web anda kembali favicon anda. Opsi ini sayangnya tidak't memungkinkan anda untuk menggunakan PNG ikon.
Lihat juga https://stackoverflow.com/q/1344122/3853934
Salah satu yang terbaik yang saya temukan adalah http://www.favicomatic.com/ Saya katakan terbaik karena itu memberi saya crispest favicon, dan tidak membutuhkan editing setelah transformasi mereka. Ini akan menghasilkan favicons pada 16 x 16 dan 32 x 32 dan mengutip mereka "sialan Setiap ukuran, pak!" Juga, situs mereka terlihat keren dan mudah digunakan.
Mereka juga menghasilkan html yang anda perlu menggunakan untuk file-file yang mereka hasilkan.
<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" />
Saya melihat pertama 20 atau jadi hasil google, dan ini adalah jauh terbaik.
Ada sejumlah besar ikon yang berbeda dan bahkan percikan layar yang dapat diatur untuk berbagai perangkat. Jawaban ini berjalan melalui cara mendukung mereka semua.
Berikut ini adalah beberapa cuplikan yang saya telah digunakan dengan link yang relevan untuk di mana saya mengumpulkan informasi. Lihat my blog untuk informasi lebih lanjut dan informasi lebih lanjut tentang ASP.NET MVC Boilerplate proyek template dengan semua ini dibangun tepat di luar kotak (Termasuk sampel file gambar).
Tambahkan berikut mark-up ke kepala html. Yang berkomentar bagian sepenuhnya opsional. Sedangkan tanda komentar bagian yang direkomendasikan untuk menutupi semua ikon penggunaan. Don't takut, paling jika komentar untuk membantu anda.
<!-- 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">
Saya browserconfig.xml file. Penuh dengan penjelasan di atas.
<?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>
Saya terwujud.file json. Penuh dengan penjelasan di atas.
{
"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"
}
]
}
Daftar file dalam proyek (Perhatikan bahwa nama file-file ini penting jika anda memutuskan untuk menempatkan beberapa dari mereka pada akar dari proyek anda untuk menghindari menggunakan meta tag di atas):
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 Overhead
Jika anda mengambil keluar komentar-komentar yang's 3KB ekstra HTML, jika anda don't dukungan layar splash yang's 1.5 MB. Jika anda menggunakan kompresi GZIP pada konten HTML, yang setiap orang harus lakukan hari ini, yang membuat anda dengan sekitar 634 Byte overhead per permintaan untuk mendukung semua platform atau 446 Byte tanpa layar splash. Saya pribadi berpikir yang layak untuk mendukung IOS, Android, dan perangkat Windows tapi pilihan anda, saya'm hanya memberikan pilihan!
Catatan Tentang Web Saat Ini Ikon/Layar Splash/Pengaturan Situasi
Situasi ini dengan vendor tertentu ikon, layar splash dan tag khusus untuk mengontrol browser web atau disematkan ikon konyol. Dalam dunia yang sempurna kita semua akan menggunakan favicon.svg file yang bisa terlihat baik di berbagai ukuran dan bisa ditempatkan pada akar halaman. Hanya FireFox mendukung ini pada saat menulis (Lihat CanIUse.com).
Namun, ikon yang tidak hanya mengatur hari-hari ini, ada beberapa vendor lain yang spesifik pengaturan (ditampilkan di atas) tapi favicon.svg file yang akan menutupi sebagian besar kasus penggunaan.
Update
Diperbarui untuk menyertakan baru Android/Chrome versi M39+ favicon/tema pilihan. Menariknya, mereka telah pergi dengan pendekatan yang sama untuk Microsoft tapi menggunakan JSON file, bukan XML.
I've berhasil melakukan hal ini untuk website saya.
Satu-satunya pengecualian adalah, SeaMonkey browser memerlukan kode HTML yang dimasukkan ke dalam <head>
; sedangkan browser lain masih akan menampilkan favicon.ico tanpa HTML penyisipan. Juga, browser lain selain IE dapat menggunakan jenis lain dari gambar, bukan hanya .format ico. Saya harap ini membantu.
Saya telah menciptakan sebuah online Favicon Generator dengan mana anda dapat membuat favicons dari Font Mengagumkan Ikon. Anda dapat melihat pratinjau dibuat favicon hidup di browser.
Jika anda ingin fitur tambahan, jangan ragu untuk mengirimkan sebuah masalah atau permintaan tarik di sini :).
Ada banyak solusi yang rumit di atas. Bagi saya? Saya menggunakan GIMP untuk menyimpan salinan asli PNG file setelah mengubah ukuran gambar ke 32 x 32 piksel.
Hanya pastikan untuk menyimpannya sebagai *.ico file dan menggunakan
<link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">
yang tercantum di atas
I'd sarankan anda untuk mencoba http://faviconer.com untuk mengkonversi .PNG atau .GIF untuk .ICO file.
Anda dapat membuat kedua 16 x 16
dan 32 x 32
(untuk layar retina baru) dalam satu .ICO file.
Tidak ada masalah dengan IE dan Firefox
<link rel="shortcut icon"
href="http://someWebsiteLocation/images/imageName.ico">
Jika saya dapat menambahkan lebih banyak kejelasan bagi anda yang masih bingung. Yang .ico file cenderung untuk memberikan transparansi yang lebih dari satu .png, itulah sebabnya mengapa saya merekomendasikan mengkonversi gambar anda di sini seperti yang disebutkan di atas: http://www.favicomatic.com/done juga, dalam href hanya lokasi dari gambar, dapat setiap lokasi server, ingat untuk menambahkan http:// di depan, jika tidak maka tidak't bekerja.