Apa markup standar modern untuk menambahkan favicon ke situs saya? Berapa format dan ukuran gambar standar?
20
Untuk bekerja di semua browser, .icolebih disukai, karena untuk ukurannya, 32x32 adalah yang paling banyak digunakan, 16x16 juga berfungsi (ini adalah ukuran sebenarnya yang digunakan di browser di sebagian besar tempat).
Juga tidak dalam pertanyaan Anda, mereka harus kedalaman warna 8 atau 24bit.
Mungkin perlu diperhatikan, jika Anda berencana untuk iWh apa pun pengguna bookmark situs Anda, itu terpisah <link>untuk gambar, misalnya StackOverflow:
<link rel="apple-touch-icon" href="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png">Yang mana:
Anda dapat menggunakan alat seperti http://www.favicon.cc/ untuk mengimpor gambar dan mengubahnya menjadi favicon, atau cukup membuatnya dari awal.
Setelah itu, jika Anda memberi nama file Anda favicon.icodan meletakkannya di root situs web Anda, sebagian besar browser web mendapatkannya secara otomatis.
Tetapi Anda juga dapat secara eksplisit mendeklarasikannya dalam file html Anda seperti ini:
<link rel="shortcut icon" type="image/png" href="path/to/your/favicon.png" />Dengan kelebihan menggunakan format selain daripada ico, gunakan favicon differents pada halaman differents, letakkan favicon Anda ke tempat lain, gunakan nama lain selain favicondll.
Markup dengan jalur http domain penuh untuk IE dan simpan favicon di folder dokumen:
<link rel="shortcut icon" href="http://www.your-site-domain/favicon.ico">Format gambar standar:
Untuk perangkat, browser, dan OS yang berbeda, Anda dapat menggunakan ikon yang berbeda. Misalnya di bawah ini adalah daftar yang mungkin membuat Anda terinspirasi. Lakukan dengan segala cara memperbaiki / mengedit daftar sebagai hal-hal yang berkembang.
<link rel="icon" type="image/x-icon" href="/images/icons/favicon.ico" />
<link rel="icon" type="image/png" sizes="96x96" href="/images/icons/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/images/icons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/images/icons/favicon-16x16.png" />
<link rel="shortcut icon" type="image/x-icon" href="/images/icons/favicon.ico" />
<link rel="apple-touch-icon" sizes="57x57" href="/images/icons/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/images/icons/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/images/icons/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/images/icons/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/images/icons/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/images/icons/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/images/icons/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/images/icons/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/images/icons/apple-touch-icon.png" />
<link rel="icon" type="image/png" href="/images/icons/android-chrome-192x192.png" sizes="192x192" />
<link rel="mask-icon" href="/images/icons/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="msapplication-TileImage" content="/images/icons/mstile-144x144.png" />
<meta name="msapplication-config" content="/browserconfig.xml" />
<meta name="theme-color" content="#282B34" />Anda tidak memerlukan tautan lagi, tetapi ini berguna. Alih-alih, selama Anda meninggalkan file bernama favicon.ico (dan ini adalah ico) di root Anda, itu akan digunakan sebagai favicon.
Saya mengalami sedikit masalah saat membuat file .ico dengan GIMP, tetapi postingan ini memberikan instruksi terperinci. Triknya tampaknya menyimpan sebagai format GIF terlebih dahulu untuk dikonversi ke tabel warna yang diindeks, dan kemudian dikonversi ke format ICO.