Ukuran favicon. Pertanyaan: Berapa ukuran ikon PNG? Membuat favicon langkah demi langkah

Wikipedia menjawab pertanyaan ini dengan paling baik:
favicon(disingkat dari bahasa Inggris FAVorites ICON - “icon for favorites”, dari nama folder bookmark di MSIE) - ikon untuk situs web atau halaman web. Itu ditampilkan oleh browser di bilah alamat sebelum URL halaman, serta gambar di sebelah bookmark, di tab, dan di elemen antarmuka lainnya.

Berikut adalah contoh menampilkan favicon di peramban Google krom:

Saya juga ingin menarik perhatian pada area penting lainnya dalam penggunaan favicon: dalam penerbitan beberapa mesin pencari, katalog dan layanan bookmark sosial:

Secara tradisional, gambar berukuran 16x16 piksel dalam format ICO digunakan, ditempatkan di root situs dengan nama favicon.ico.

Semua browser modern memahami indikasi eksplisit posisi ikon dalam kode HTML (X) (dalam suatu elemen ), yang memungkinkan, jika tidak ada /favicon.ico, untuk menggunakan ikon berbeda untuk setiap halaman: , Di mana:

Oleh karena itu tidak boleh dibesar-besarkan. Kesimpulan: Ada banyak cara untuk mengoptimalkan halaman. Tidak semua orang dibutuhkan. Namun dari daftar tindakan ini, opsi pengoptimalan yang tepat dapat disusun untuk hampir semua situs. Anda dapat menguji kecepatan halaman sepanjang prosesnya.

Ikon standar dan berbagai jenis dan ukuran file

Jika file ini hilang, tidak berdampak besar dan halaman web juga dapat ditampilkan tanpa file tersebut. Nama file berasal dari favorit dan ikon. Selain itu, ikon tersebut muncul di entri browser favorit Anda. Ini membuatnya lebih mudah untuk menyorot entri. Ikon tambahan mungkin disediakan. Mereka sering kali harus berbeda dari format dan format file dan harus diberi nama yang berbeda. Keragaman perangkat dan sistem telah meningkat sejauh ini sehingga ikon standar dengan ukuran kecil saja tidak lagi cukup.


  • rel juga dapat berisi "ikon pintasan" (Microsoft Penjelajah Internet akan merespons string "ikon pintasan", dan browser yang memenuhi standar terhadap kata "ikon")

  • href berisi URI absolut atau relatif terhadap file (dalam Mozilla Firefox 3.0, misalnya, mendukung URI yang sama dengan tag img).

  • Format filenya bisa png atau gif, berukuran 16x16 atau 32x32 dan dengan kedalaman warna 8-bit atau 24-bit (di Mozilla Firefox misalnya, tidak hanya ini, tetapi juga seperti tag img). Dalam hal ini, atribut type harus berisi tipe format MIME (misalnya, image/png untuk PNG). Jika Internet Explorer menggunakan format ICO, tipe MIME-nya harus image/vnd.microsoft.icon. Tipe image/x-icon tidak digunakan lagi pada tahun 2003 setelah tipe tersebut distandarisasi untuk ICO.

Anda dapat menentukan banyak gambar di dalamnya format yang berbeda- misalnya garis dengan ikon pintasan dan ikon di format ICO untuk Internet Explorer, dan garis dengan ikon dan ikon dalam format GIF atau PNG untuk browser alternatif.

Bagian kedua. Seperti apa seharusnya favicon itu?

Jadi, kami mengetahui apa itu favicon dan di mana penggunaannya. Sekarang tentang apa yang seharusnya menjadi favicon yang bagus.

1. Jelas sekali favicon- itu semacam itu kartu nama, jadi itu harus dijalankan dengan gaya yang sama dengan situs. Semakin umum situs dan faviconnya, semakin baik. Saat mengembangkan favicon, disarankan untuk menggunakan warna dan elemen desain situs web atau logo yang sesuai. Favicon harus dikaitkan dengan situs - ini adalah fungsi utamanya.

Membuat Ikon Default

Anda dapat memilih salah satu dari tiga berikut untuk jenis file. Browser biasanya memanggil file secara otomatis ketika Anda mengakses halaman web dari direktori root. Konflik dengan beberapa browser yang seharusnya dilihat dengan ikon berbeda dapat dihindari. Nilai yang mungkin adalah:

Oleh karena itu banyak rasi bintang yang harus diperhatikan. Berikut beberapa kemungkinannya. Ini adalah opsi yang disarankan. Ini tidak disarankan. Namun, terkadang hal ini mungkin diperlukan, misalnya, contoh kode untuk kedua entri adalah sebagai berikut. Ini adalah konstelasi yang sangat tidak menguntungkan.

2. favicon harus mudah dimengerti: pengguna harus segera memahami apa yang digambar di favicon. Anda tidak boleh mencoba menempatkan seluruh gambar di favicon: satu atau dua elemen yang dapat dikenali sudah cukup.

3. Anda dapat menampilkan ikon tema situs di favicon (misalnya, nomor telepon toko telepon online) - tetapi hanya jika ikon ini sepenuhnya menggambarkan situs tersebut (Anda tidak boleh menampilkannya di favicon barang rumah tangga toko mesin cuci, jika mereka juga menjual setrika dan penyedot debu).

Saat pengguna menambahkan halaman web ke permukaan ubin, cuplikan halaman web akan ditampilkan. Jadi kodenya dapat diperluas sebagai berikut. Seperti yang Anda lihat, menyediakan ikon standar dapat menimbulkan banyak ketidakpastian.

Perkecil gambar aslinya atau gunakan pensil

Tantangan saat membuat ikon standar adalah menggunakan atau mengembangkannya topik yang cocok untuk website yang juga terlihat bagus dengan ukuran gambar yang sangat kecil. Ada dua metode. Saat menggunakan pensil, sebaiknya aktifkan fungsi zoom agar piksel terlihat jelas. Ini mungkin berfungsi pada beberapa browser.

4. Sangat diinginkan untuk membuat favicon mudah diingat, jadi akan lebih baik menggunakan gambar yang familiar bagi pengguna, yang dapat dia sebut dengan beberapa kata (favicon LJ, misalnya, adalah “Pensil”).

Diskusikan artikel di LiveJournal saya.