578

Saya telah mengerjakan sebuah situs web dan saya ingin menambahkan ikon kecil ke tab browser.

Bagaimana saya bisa melakukan ini dalam HTML dan di mana dalam kode saya harus meletakkannya (misalnya header)? Saya memiliki .pngfile logo yang ingin saya konversi menjadi ikon.

Terkait: HTML mengatur gambar pada tab browser .

html icons favicon knookie
sumber

1

periksa tautan untuk info lebih lanjut. Anda berada di jalur yang benar.

Reggie

Unggah gambar (favicon.ico) dengan FTP (baca tutorial FTP kami) ke bagian root situs web Anda. Bagian root adalah area file utama, tempat Anda menyimpan file index.html (index.asp, index.php, dll) untuk halaman utama Anda. davesite.com akan menjadi root davesite.com/webstation tidak akan menjadi root davesite.com/webstation/html juga bukan root. File ini, yang ditempatkan dengan benar, akan dimuat sebagai default untuk seluruh domain Anda.

knookie

tekan tombol enter sebelum waktunya - toh terima kasih atas jawabannya. Apakah hanya akan mengatakan bagian pertama (yang saya tempelkan di atas) pada tautan yang Anda berikan tampaknya tidak berfungsi? Namun bagian kedua bekerja dengan sempurna - terima kasih

knookie

3

Inilah rekomendasi w3.org dengan peringatan bahwa IE sebelum IE11 tidak mendukung .png sebagai ikon favorit .

Denys Séguret

416

Sebenarnya ada dua cara untuk menambahkan favicon ke situs web.

`<link rel="icon">`

Cukup tambahkan kode berikut ke <head>elemen:

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

Favicons PNG didukung oleh sebagian besar browser, kecuali IE <= 10 . Untuk kompatibilitas mundur, Anda dapat menggunakan favicons ICO.

Perhatikan bahwa Anda tidak harus mendahului icondalam relatribut denganshortcut lagi. Dari jenis MDN Link :

The shortcutjenis link sering terlihat sebelumnya icon, tetapi jenis link ini tidak sesuai, diabaikan dan web penulis tidak harus menggunakannya lagi .

`favicon.ico` di direktori root

Dari jawaban SO lainnya (oleh @mercator ):

Semua browser modern (diuji dengan Chrome 4, Firefox 3.5, IE8, Opera 10 dan Safari 4) akan selalu meminta a favicon.icokecuali Anda telah menentukan ikon cara pintas melalui <link>.

Jadi yang harus Anda lakukan adalah membuat /favicon.icopermintaan ke situs web Anda mengembalikan favicon Anda. Sayangnya opsi ini tidak memungkinkan Anda untuk menggunakan ikon PNG.

Lihat juga favicon.png vs favicon.ico - mengapa saya harus menggunakan PNG dan bukan ICO?

Michał Perłakowski
sumber

1

Jika Anda ingin SEMUA ikon secara otomatis (termasuk seluler, ikon 'tambahkan ke layar awal', bookmark seluler, iOS / Droid, tab desktop, dll.), Pembuatan file ICO, dll, serta kode HTML yang dapat disalin dengan copy untuk file meta yang disebutkan, semua dengan satu klik, Anda dapat menggunakan alat praktis ini (saya tidak berafiliasi) realfavicongenerator.net

Albert Renshaw

2

Ingin menambahkan: ikon Anda harus dalam dimensi persegi, itu berarti lebar sama dengan tinggi.

Nguyen Tan Dat

3

Jangan lupa untuk menekan Ctrl + F5 saat mengujinya. Terkadang di-cache.

Hairi

Saya tidak menemukan bahwa hanya menempatkan file ICO bernama favicon.ico di direktori root situs saya menyebabkan FireFox atau Chrome memuatnya. Jadi saya pergi <link relrute. NAMUN, alamat situs saya tidak terdaftar dalam DNS, jadi saya tidak bisa mengandalkan href="http://example.com"untuk mengambilnya. Jadi saya tiba di solusi ini dalam index.htmfile saya :<link rel="icon" href="favicon.ico">

CODE-REaD

426

Gunakan alat untuk mengkonversi png Anda ke file ico. Anda dapat mencari "generator favicon" dan Anda dapat menemukan banyak alat online.

Tempatkan alamat ico di headdengan linktanda-:

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

Gustavo Costa De Oliveira
sumber

3

Terima kasih! Saya mengikuti langkah-langkah dengan benar dan itu bekerja dengan sangat baik pada IE dan Firefox, tetapi untuk beberapa alasan itu tidak berfungsi di Google Chrome, apakah saya harus menghapus cache? atau apa yang harus saya lakukan dari sana?

PatrickGamboa

1

Saya suka menggunakan Plugin Photoshop: telegraphics.com.au/svn/icoformat/trunk/dist/README.html

Ben_Coding

2

Bagian "pintasan" dapat dihapus dalam banyak keadaan: stackoverflow.com/questions/13211206/… , mathiasbynens.be/notes/rel-shortcut-icon

bbc

72

Yang terbaik yang saya temukan adalah http://www.favicomatic.com/ Saya mengatakan yang terbaik karena itu memberi saya favicon yang paling segar, dan tidak memerlukan pengeditan setelah transformasi mereka. Ini akan menghasilkan favicons pada 16x16 dan 32x32 dan mengutipnya "Setiap ukuran, pak!" Juga, situs mereka terlihat keren dan mudah digunakan.

Mereka juga menghasilkan html yang perlu Anda gunakan untuk 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="&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" />

Saya melihat 20 atau lebih pertama hasil google, dan sejauh ini yang terbaik.

Jared Menard
sumber

4

Saya harus meletakkan semua ini di tag kepala saya untuk setiap halaman?

Noumenon

1

Saya tidak akan memasukkan semua itu di tag kepala Anda. Saya hanya akan memasukkan tag yang diperlukan untuk mendukung perangkat yang Anda butuhkan untuk mendukung. Jujur Anda bisa bertahan dengan satu <link rel = "icon" type = "image / ico" href = "/ images / favicon.ico">

Jared Menard

5

Halaman git ini menjelaskan untuk apa sebagian besar ikon ini digunakan: github.com/audreyr/favicon-cheat-sheet

Jared Menard

14

Ada sejumlah ikon berbeda dan bahkan layar splash yang dapat Anda atur untuk berbagai perangkat. Jawaban ini melewati bagaimana mendukung mereka semua.

Berikut beberapa cuplikan yang saya gunakan dengan tautan yang relevan ke tempat saya mengumpulkan informasi. Lihat blog saya untuk informasi lebih lanjut dan informasi lebih lanjut tentang template proyek ASP.NET MVC Boilerplate dengan semua ini dibangun langsung di luar kotak (Termasuk file gambar sampel).

Tambahkan mark-up berikut ke kepala html Anda. Bagian yang dikomentari sepenuhnya opsional. Sementara bagian yang tidak diautomasi disarankan untuk mencakup semua penggunaan ikon. Jangan takut, kebanyakan jika itu adalah 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">

File browserconfig.xml saya. Penjelasan lengkap 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>

File manifest.json saya. Penjelasan lengkap 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 ini penting jika Anda memutuskan untuk meletakkannya di root proyek Anda untuk menghindari penggunaan 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

Overhead total

Jika Anda mengeluarkan komentar yang 3KB dari HTML tambahan, jika Anda tidak mendukung splash screen yang 1.5KB. Jika Anda menggunakan kompresi GZIP pada konten HTML Anda, yang harus dilakukan semua orang hari ini, yang membuat Anda memiliki sekitar 634 Bytes biaya tambahan per permintaan untuk mendukung semua platform atau 446 Bytes tanpa splash screen. Saya pribadi berpikir itu sangat berharga untuk mendukung perangkat iOS, Android dan Windows tetapi itu pilihan Anda, saya hanya memberikan opsi!

Catatan Samping Tentang Ikon Web Saat Ini / Situasi Layar / Pengaturan Splash

Situasi ini dengan ikon khusus vendor, layar splash, dan tag khusus untuk mengontrol browser web atau ikon yang disematkan adalah konyol. Dalam dunia yang sempurna kita semua akan menggunakan file favicon.svg yang bisa terlihat bagus dalam ukuran berapa pun dan dapat ditempatkan di akar halaman. Hanya FireFox yang mendukung ini pada saat penulisan (Lihat CanIUse.com ).

Namun, ikon bukan satu-satunya pengaturan hari ini, ada beberapa pengaturan khusus vendor lainnya (ditunjukkan di atas) tetapi file favicon.svg akan mencakup sebagian besar kasus penggunaan.

Memperbarui

Diperbarui untuk menyertakan opsi Android / Chrome versi M39 + favicon / tema baru. Menariknya, mereka menggunakan pendekatan yang mirip dengan Microsoft tetapi menggunakan file JSON alih-alih XML.

Muhammad Rehan Saeed
sumber

11

Saya telah membuat Generator Favicon online yang dengannya Anda dapat membuat favicon dari Font Awesome Icons . Anda dapat melihat pratinjau favicon yang dibuat langsung di browser.

Jika Anda ingin fitur tambahan, silakan kirimkan masalah atau permintaan tarik di sini :).

gerhana
sumber

10

Saya telah berhasil melakukan ini untuk situs web saya.

Satu-satunya pengecualian adalah, peramban SeaMonkey memerlukan kode HTML yang dimasukkan di Anda <head>; sedangkan, browser lain masih akan menampilkan favicon.ico tanpa penyisipan HTML. Juga, browser apa pun selain IE dapat menggunakan jenis gambar lain, bukan hanya format .ico. Saya harap ini membantu.

Gamer laptop Barbie
sumber

5

Ada banyak solusi rumit di atas. Untuk saya? Saya menggunakan GIMP untuk menyimpan salinan file PNG asli setelah mengubah ukuran gambar menjadi 32 x 32 piksel.

Pastikan untuk menyimpannya sebagai file * .ico dan gunakan

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

tercantum di atas

beep_check
sumber

4

Saya sarankan Anda untuk mencoba http://faviconer.com untuk mengonversi .PNG atau .GIF Anda menjadi file .ICO.

Anda dapat membuat keduanya 16x16dan 32x32(untuk tampilan retina baru) dalam satu file .ICO.

Tidak ada masalah dengan IE dan Firefox

Dmitri A
sumber

3

Agar Chrome menampilkan ikon halaman (favicon), Anda perlu memeriksa situs web Anda dari server hosting atau Anda dapat menggunakan host lokal saat mengembangkan dan menguji situs web Anda pada PC Anda.

Miloud Eloumri
sumber

2

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

Jika saya dapat menambahkan lebih banyak kejelasan bagi Anda yang masih bingung. File .ico cenderung memberikan lebih banyak transparansi daripada .png, itulah sebabnya saya sarankan untuk mengonversi gambar Anda di sini seperti yang disebutkan di atas: http://www.favicomatic.com/done juga, di dalam href hanyalah lokasi gambar , dapat berupa lokasi server apa pun, jangan lupa menambahkan http: // di depan, jika tidak, tidak akan berfungsi.

dizad87
sumber

1

Saya belum pernah menggunakan yang lain, tetapi https://realfavicongenerator.net/ tampaknya menjadi pilihan utama, dan belum disebutkan di sini.

Ini mendukung SVG sebagai sumber gambar untuk menghasilkan favicon, dan menyediakan opsi yang bermanfaat untuk menimpa gambar untuk platform yang berbeda. Selain itu, secara default tidak menghasilkan banyak gambar yang kompatibel dengan setiap platform yang ketinggalan jaman. Sebaliknya, itu memberi Anda opsi untuk memeriksa apakah Anda menginginkannya.

Dari email yang dikirim pengembang kepada saya, mereka juga memiliki rencana untuk menambahkan dukungan untuk menghasilkan SVG favicons, serta sensitivitas tema SVG , saya pikir, yang merupakan fitur yang sangat mengagumkan.

mbomb007
sumber

0

Silakan gunakan kode di bawah ini di bagian header file indeks Anda.

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

bairathee chitraksh
sumber

Bagaimana cara menambahkan ikon tab browser (favicon) untuk situs web?

Jawaban:

`<link rel="icon">`

`favicon.ico` di direktori root