favicon -(kependekan dari kata-kata "Ikon Favorit") adalah ukuran gambar yang kecil 16x16 piksel, yang akan dilihat oleh pengunjung situs Anda. Itu muncul di sebelah URL situs di bilah alamat browser. Selain itu, ikon ini muncul di samping nama situs Anda pada daftar tab terbuka, bookmark, dan hasil pencarian, sehingga memudahkan pengguna menemukan situs Anda dengan cepat di antara situs lain.

Bawaan sebagai ikon situs ikon browser ditampilkan. Agar situs ini berbeda dari yang lain dan tidak tersesat di tab abu-abu yang tak terhitung jumlahnya yang dibuka oleh pengguna, Anda perlu membuat favicon asli Anda sendiri.

Meskipun banyak browser web modern mendukung favicon dalam GIF, PNG, atau format file populer lainnya, semua versi Internet Explorer masih memerlukan favicon sebagai file ICO(Format Microsoft). Dalam format ini, browser apa pun akan memahami ikon Anda.

Mengapa Anda membutuhkan favicon?

Favicon diperlukan agar situs Anda menonjol dari keramaian di halaman hasil pencarian dan terlihat di banyak tab terbuka di browser. Ikon yang baik seperti logo situs Anda, yang akan dikenali dan menciptakan sikap tertentu serta membangkitkan tingkat kepercayaan khusus.

Tentu saja, favicon dapat menarik perhatian pengguna dan dia akan membaca judul-link artikel Anda. Judul, dikombinasikan dengan cuplikan yang bagus dan ikon yang indah, akan meningkatkan rasio klik-tayang dan, karenanya, lalu lintas ke sumber daya.

Saya ingin segera mencatat bahwa untuk situs yang memiliki label “GS”, ikon itu sendiri tidak mampu meningkatkan kesan sumber daya. Tapi ini seperti pertemuan soal pakaian. Favicon yang indah pasti akan menciptakan kesan pertama dari sebuah situs yang mengundang untuk dikunjungi.

Cara membuat favicon

Anda, tentu saja, dapat mencoba mencari file favicon.ico yang sudah jadi di situs web www.iconfinder.com, tetapi saya rasa banyak yang ingin membuatnya sendiri. Bagaimanapun, faviconlah yang akan menyorot situs Anda di hasil pencarian. Anda sekarang tahu bagaimana melakukan ini. Jadi mari kita mulai.

Logaster adalah layanan online untuk membuat logo dan elemen identitas perusahaan. Di dalamnya, Anda akan secara otomatis menerima, hanya dalam beberapa klik, ikon situs dalam format ICO dan PNG.

Namun perlu diingat bahwa tidak ada pembuat logo otomatis yang dapat menggantikan kreativitas manusia.

Tentu saja, perusahaan besar tidak akan menggunakan alat tersebut. Mereka akan menemukan desainer mahal untuk membuatkan logo profesional untuk mereka. Namun bagi perusahaan kecil dan pengusaha swasta, alat seperti itu mungkin berguna.

Bagaimana cara kerja proses pembuatan ikon di Logaster?

1. Untuk memastikan favicon cocok dengan logo Anda, Anda akan diminta membuat logo terlebih dahulu (gratis).
2. Tulis nama dan, jika Anda mau, slogan, tunjukkan jenis kegiatannya, dan Logaster akan secara mandiri menyiapkan banyak pilihan logo untuk Anda.
3. Pilih logo yang cocok, nanti bisa diubah.

Inilah yang saya dapatkan

Sekarang Anda dapat mengklik tombol “Unduh logo”. Pada versi gratisnya akan ada watermark Logaster.com di atasnya

Logonya bisa dibeli. Setelah itu, Anda dapat mengunduh dalam format yang dipilih (PNG, JPEG, PDF, SVG) dan ukuran (1024 px, 5000 px).

Sekarang mari kita beralih ke pembuatan favicon.

1. Sekali lagi, pilih opsi yang Anda suka.
2. Anda bisa mengubah bentuknya menjadi persegi, bulat, bulat, atau tanpa bentuk sama sekali.
3. Jika diinginkan, tambahkan guratan berwarna dengan mengklik alat Stroke.
4. Klik tombol "Simpan".

Beginilah hasil faviconnya. Pada prinsipnya, ini terlihat bagus.

Bagaimana cara menambahkan favicon ke situs web Anda

1. Beli dan aktifkan favicon.
2. Unduh itu.
3. Buka zip file yang diunduh ke folder root situs Anda.
4. Tempelkan kode berikut di semua halaman situs di tag :

Paket desain dengan diskon

Selain itu, Anda dapat membeli seluruh rangkaian identitas perusahaan. Inilah salah satu pilihannya.

Artikel terkait: Tombol tambahkan file dan banyak lagi tidak berfungsi di WordPress

Plugin untuk membuat favicon

Ada banyak sekali program berbeda untuk membuat favicon. Pada dasarnya, mereka primitif, memungkinkan Anda membuat ikon menggunakan 16 warna.

Anda dapat membuat favicon langsung di Photoshop. Untuk melakukan ini, Anda memerlukan sebuah plugin yang dapat diunduh dari www.telegraphics.com.au. Untuk menginstalnya, salin file tersebut ICOFormat.8bi ke direktori c:\Program Files\Adobe\Adobe Photoshop CS2\Plug-Ins\File Formats\.

Menggunakan plugin ICOFormat.8bi, Anda dapat menyimpan gambar sebagai “file .ico”.

Cara menginstal plugin Format ICO (Ikon Windows).

1. Windows 64-bit (Vista/Windows 7):
   • Mulai ulang sebelum menginstal;
   • Tempatkan plugin di folder C:\Program Files\Adobe\Photoshop\Plug-Ins\File Formats, tetapi saya memiliki struktur yang berbeda, saya menyimpan file ini di sini: C:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit)\ Plug-in.
   • Jika Anda menjalankan sistem Windows 64-bit dan meluncurkan Photoshop CS4 atau CS5 versi 64-bit, unduh plugin versi 64-bit dan letakkan di folder Plug-Ins yang sesuai dengan Photoshop 64-bit (yaitu, yang ada di “Program Files” bukan “Program Files (x86)”).
2. Pindahkan plugin ke folder “File Formats” di dalam folder Plugin Photoshop Anda:
   • Untuk Windows (32-bit), ICOFormat.8bi
   • Untuk Windows (64-bit), ICOFormat64.8bi
   • Untuk Mac OS X, ICOFormat.plugin(perhatikan bahwa versi terpisah disediakan untuk CS2, CS3/4 dan CS5)
   • Untuk Mac OS X/Klasik, icoformat
   • Untuk MacOS 68K, ikoformat(68K)
3. Jika menggunakan Corel PSP Photo X2, letakkan plugin di C:\Program Files\Corel\Corel Paint Shop Pro Photo X2\Languages\EN\PlugIns
4. Keluar dan luncurkan kembali Photoshop, jika sudah berjalan.

Ada juga layanan online www.convertico.com. ConvertICO adalah pengonversi file ICO/PNG online gratis. Ia bekerja dengan cepat dan mudah digunakan. Ini digunakan untuk mengonversi ikon desktop, ikon aplikasi, dan favicon untuk situs web.

Cara membuat favicon.ico sendiri

1. Buka Photoshop.
2. Buat dokumen 32x32 piksel.
3. Sisipkan objek pintar dari gambar yang sudah jadi dari Illustrator.
4. Menggunakan perintah “Save As”, simpan favicon dalam format .ICO*.
5. Unggah favicon yang dihasilkan ke root situs dan sambungkan melalui tema WordPress, atau daftarkan secara manual di templat situs. Saya sudah menulis tentang cara menghubungkan favicon sebelumnya.

*Jika Anda belum menginstal plugin khusus Format ICO (Ikon Windows)., Anda dapat mendownloadnya dari www.telegraphics.com.au/sw/. Ada untuk Mac, Windows 32, 64-bit dengan dukungan semua versi Photoshop, termasuk CS6.

tampilan favicon

Ke situs Anda menampilkan favicon, itu cukup ditempatkan di root situs. Browser dan mesin pencari sendiri akan menentukan bahwa Anda memiliki file favicon.ico dan akan menampilkannya secara otomatis. Metode ini adalah yang paling sederhana dan efektif pada 95% kasus. Namun, Anda juga dapat menghubungkan favicon secara eksplisit.

Halo, para pembaca situs blog yang budiman. Percakapan dalam artikel hari ini adalah tentang apa yang disebut ikon Favicon.ico. Kami akan mencari tahu apa itu favicon, mengapa Anda harus menginstalnya di situs web Anda, dan cara membuat sendiri ikon dengan ukuran yang diperlukan.

Pada prinsipnya, untuk membuat favicon, sama sekali tidak perlu menggunakan generator online khusus apa pun, meskipun cukup nyaman dan sederhana. Anda bisa mencoba membuatnya di Photoshop, namun secara default sayangnya tidak bisa menyimpan gambar dalam format ICO. Oleh karena itu, untuk mengajarkan Photoshop cara bekerja dengan ICO, Anda perlu menginstal plugin khusus.

Tetapi jika Anda merasa tidak nyaman dengan Photoshop (dan juga dengannya), maka akan lebih nyaman bagi Anda untuk menggunakan salah satu dari banyak layanan online yang tercantum di bawah ini. Selain itu, di beberapa diantaranya Anda dapat menggambar ikon baru sepenuhnya dari awal, dan di beberapa lainnya Anda akan dapat mengonversi gambar yang sudah Anda miliki (yang cocok untuk Anda) ke dalam format favicon.

Nah, opsi termudah adalah mengunduh koleksi Favicon dari beberapa galeri atau katalog online. Baca di bawah tentang di mana Anda bisa mendapatkannya.

Cara membuat Favicon online dan di mana Anda dapat mendownload koleksinya

Izinkan saya memberikan contoh layanan terlebih dahulu (yang disebut pembuat favicon), di mana Anda dapat, tanpa keahlian khusus, merancang logo mini yang layak untuk situs web Anda, atau setidaknya secara otomatis mengonversi gambar yang sesuai ke dalam format yang diperlukan untuk mengunggah favicon ke situs.

1. Faviсon.cc— generator favicon online yang cukup nyaman. Dengan menggunakannya, Anda dapat, misalnya, membuat ikon Anda sendiri dari awal (sepenuhnya eksklusif), menggambarnya piksel demi piksel. Untuk melakukan ini, Anda perlu mengklik tombol “Buat Favcon Baru” di sisi kiri jendela layanan.

   

   Di tengah halaman generator terdapat area di mana setiap kotak adalah piksel favicon masa depan Anda. Tugas Anda adalah mengecat kotak-kotak ini dengan warna berbeda. Untuk mengecat satu kotak dengan warna, Anda perlu mencentang kotak di sisi kanan jendela layanan di bidang "Pemilih Warna", pilih warna yang diinginkan dari palet yang terletak di sana dan klik pada kotak yang diinginkan. Untuk menghilangkan bayangan yang salah, centang kotak “transparan” dan klik pada kotak, sehingga menjadi tidak berwarna (transparan).

   Untuk memindahkan piksel melintasi kanvas generator, Anda perlu mencentang kotak “pindah”. Anda dapat melihat hasil karya Anda dalam skala nyata di area “Preview” di bawah kanvas. Jika Favicon yang Anda buat cocok untuk Anda, klik tombol “Unduh” untuk menyimpannya ke komputer Anda. Hasilnya, Anda akan menerima file grafik yang kemudian dapat Anda unduh dan unggah ke server hosting.

   Sekarang Anda tahu cara membuat logo mini untuk website Anda dari awal. Namun jika Anda tidak memiliki bakat grafis, maka Anda bisa menggunakan layanan generator online unggah gambar apa pun untuk favicon mendatang, yang akan berfungsi sebagai blank. Gambar dapat memiliki ukuran dan format apa pun. Untuk mengunggah file ikon ke layanan online, Anda perlu mengklik tombol “ Impor Gambar” di sisi kiri jendela layanan.

   

   Di jendela yang terbuka, klik tombol "Jelajahi" dan temukan gambar yang sesuai di komputer Anda. Kemudian pilih apa yang akan dilakukan dengan rasio aspek gambar Anda saat mengonversinya menjadi 16 kali 16 (persegi). Hal ini berlaku jika gambar yang Anda unggah tidak berbentuk persegi. Dalam hal ini, ada dua pilihan yang mungkin: biarkan rasio aspek tidak berubah (Pertahankan dimensi), atau ubah gambar menjadi tampilan persegi (ikon Kecilkan menjadi persegi). Dalam kasus kedua, gambar favicon masa depan akan terdistorsi di sepanjang salah satu sumbu.

   Untuk mengunggah ke generator online dan mengonversi gambar Anda, Anda perlu mengklik tombol “Unggah”. Favicon.ico yang dibuat darinya akan dapat diedit dengan cara yang sama seperti yang Anda gambar. Ketika Anda selesai mengerjakan karya Anda, klik tombol “Unduh” untuk mengunduhnya ke komputer Anda.

   Layanan online ini juga memiliki kesempatan untuk menggunakan koleksi favicon yang dibuat oleh pengguna lain dan tersedia untuk umum. Untuk melihat pameran yang tersedia di galeri, Anda perlu mengklik sisi kiri jendela pada tombol “Favicon Terbaru” untuk melihat koleksi yang diurutkan berdasarkan tanggal pembuatan, atau pada tombol “Favicon Nilai Tertinggi” untuk melihat galeri diurutkan berdasarkan peringkat.

2. Favicon.ru- dulunya layanan ini jauh lebih sederhana daripada generator online yang dijelaskan di atas, tetapi baru-baru ini layanan ini hampir menjadi analognya, tetapi hanya dalam bahasa Rusia. Favicon.ru tidak hanya memungkinkan Anda mengonversi gambar apa pun yang Anda miliki (di komputer atau di Internet) ke dalam format ICO dengan ukuran 16 kali 16 piksel, tetapi juga memungkinkan untuk menggambarnya dari awal, piksel demi piksel.

   

   Versi generator favicon online ini mungkin terkenal hanya karena versi domestik. Itu sebabnya dia berakhir di artikel ini. Jadi, untuk menggunakannya, Anda perlu mengklik tombol "Pilih file" di bagian atas halaman utama dan menentukan jalur ke gambar yang diinginkan di komputer Anda. Gambar yang diunduh dan dikonversi ke format Favicon.ico dapat diperbaiki dan kemudian disimpan ke komputer Anda. Semuanya sederhana dan nyaman.

3. Logaster.ru adalah pembuat logo online, namun selain logo juga membuat favicon. Tidak seperti layanan lainnya, Anda tidak perlu menggambar desain favicon atau mengubahnya menjadi logo.

   

   Untuk membuat favicon, Anda harus memasukkan nama situs atau perusahaan terlebih dahulu dan memilih jenis aktivitas. Layanan ini akan menawarkan beberapa lusin template favicon yang siap digunakan. Anda dapat membaca lebih lanjut tentang cara membuat favicon. Setelah membuat Favicon.ico, Anda dapat mengunduh file ke komputer Anda dalam format ICO atau PNG.

Setelah itu, yang perlu Anda lakukan hanyalah mengklik tombol “Buat”. Pada halaman yang terbuka Anda akan melihat link untuk mendownload favicon yang dihasilkan.

Pilihan generator online, koleksi dan galeri favicon

Jika karena alasan tertentu Anda tidak menyukai generator favicon yang dijelaskan di atas, maka saya sarankan untuk mencoba keberuntungan Anda di salah satu dari yang berikut ini layanan daring gratis:

1. FaviconGenerator - memungkinkan Anda mengonversi gambar apa pun yang diunduh dari komputer Anda ke format favicon yang diinginkan (Anda dapat mengunggah gambar).
2. AntiFavicon adalah Generator Favicon yang cukup menarik. Di atasnya Anda bisa buat favicon dengan tulisan. Anda perlu memasukkan teks prasasti di kolom “Teks atas” dan “Teks bawah”, dan menyesuaikan skema warna di area “Warna”.
3. FavIcon dari Pics adalah layanan online sederhana lainnya - Anda menentukan jalur ke gambar di komputer Anda, mengonversi dan mengunduh file yang dihasilkan dalam format ICO dan GIF.
4. Iconj - yang luar biasa adalah Anda dapat mengunduh ikon yang dibuat atau membiarkannya di layanan dan menerima tautan ke file ini
5. DeGraeve adalah Generator Favicon yang cukup kuat, fungsinya mirip dengan Favicon.cc yang telah diulas sebelumnya. Di sini juga, Anda dapat melakukan semuanya baik dari awal, atau mengunggah gambar, yang nantinya dapat disesuaikan dan diunduh dalam format ICO dengan ukuran yang sesuai.
6. Generator - memungkinkan Anda membuat favicon dari gambar yang diunggah, dan membuatnya dari awal di editor khusus.
7. Editor ikon online favicon.ico - ya, ia melakukan semuanya - membuat favicon dari awal dan memodifikasi gambar yang ada.
8. Favicon Online adalah alat yang sangat fungsional untuk membuat dan mengedit logo mini
9. Generator Favicon Gratis - seandainya daftar di atas tidak cocok untuk Anda.
10. Generator Favicon - sederhana dan enak...

Jika Anda tidak peduli dengan eksklusivitas logo mini Anda untuk situs tersebut, dan Anda tidak dapat mengutak-atik editor dan generator, maka Anda dapat memilih sendiri ikon yang sesuai di situs yang jumlahnya sangat banyak. Faktanya, ikon apa pun berukuran 16 kali 16 piksel, yang dapat Anda unduh dari Internet atau temukan di kedalaman komputer Anda, akan cocok untuk kami.

Namun perlu Anda ingat bahwa favicon pertama-tama harus menarik perhatian pengguna. Idealnya, pengguna akan mengenali situs Anda hanya dengan melihat Favicon, jadi lebih baik jika situs tersebut unik, namun Anda juga dapat mencari sesuatu yang unik di Internet.

Jika Anda tidak memiliki keinginan atau kesempatan (Anda bukan seorang seniman dan belum pernah menjadi seorang seniman), maka cara termudah adalah dengan mencoba mencari di galeri dengan koleksi favicon gratis:

1. Galeri ikon untuk situs favicon.ico - lebih dari 15.000 mini-logo untuk situs Anda untuk setiap selera dan warna
2. Iconj adalah kumpulan ikon yang cukup besar yang dirancang oleh orang lain dan tersedia untuk umum
3. Favicon.cc - 55 ribu opsi berbeda untuk semua kesempatan. Ada juga favicon animasi yang hanya dapat dilihat di browser FireFox.
4. Galeri Favicon - beberapa ikon lagi yang sesuai ukurannya

Jika Anda mengetahui sumber serupa lainnya, saya akan menambahkan tautan Anda ke daftar ini.

Cara memasang Favicon di situs web dan menentukan jalur ke sana

Browser Anda dan robot pencarian Yandex akan melakukannya cari favicon terutama di folder root situs Anda. Oleh karena itu, Anda cukup terhubung ke situs melalui FTP dan mengunggah file Favicon.ico Anda ke direktori root (biasanya folder public_htm atau htdocs) (lebih baik menulis namanya dengan huruf kecil). Sekarang buka sumber daya Anda di beberapa browser dan lihat apakah ikon pada tab telah berubah. Apakah sudah berubah? TIDAK? Yah, tidak apa-apa.

Jika Anda tidak dapat menempatkan favicon dengan cara ini, Anda mungkin harus melakukannya, karena... Sering terjadi versi lama dimuat dari cache. Anda dapat mencobanya, bagi saya ini merespons perubahan yang dilakukan paling baik tanpa membersihkan cache. Jika masalahnya bukan pada cache browser, maka itu artinya situs Anda memiliki lokasi berbeda untuk favicon, berbeda dari folder root. Bagaimana cara memeriksanya?

Buka kode sumber halaman mana pun di situs Anda. Untuk melihat kode sumbernya, cukup klik kanan pada halaman dan pilih item menu konteks yang sesuai (misalnya, “Kode sumber” di Opera lama, atau “Kode sumber halaman” di Mazila Firefox, atau “Lihat kode halaman” di Google Chrome , atau “Lihat kode HTML” di IE) atau tekan pintasan keyboard Ctrl+U. Sekarang lihat di bagian atas kode halaman untuk baris yang menentukan jalur ke favicon.ico.

Mungkin terlihat seperti ini:

Sekarang, mengetahui jalur ini, Anda dapat terhubung kembali melalui FTP dan mengunggah favicon Anda menggunakan jalur yang ditentukan, menggantikan yang sudah ada di situs dengan jalur tersebut. Jika tidak ada perubahan lagi pada bilah alamat browser, coba bersihkan kembali cache browser.

DI DALAM Joomla Favicon biasanya berada di folder dengan template yang Anda gunakan (path ke sana di Joomla 1.5 ditulis dalam file index.php dari direktori template yang sama, tetapi di Joomla 3 semuanya menjadi sedikit lebih rumit). Itu. Untuk mengubah favicon di Joomla, yang perlu Anda lakukan hanyalah mengikuti jalur ini dan mengunggah file favicon.ico Anda di sana, dan menjawab pertanyaan tentang penggantian dengan setuju:

/templates/folder_with_the_design_template/favicon.ico

File favicon masuk WordPress secara default, itu juga bisa berada di folder dengan tema yang Anda gunakan (jalur ke sana juga diatur di sana):

/wp-content/themes/Folder_with_theme_you_are_using/favicon.ico

Secara umum, jika Anda mau atur atau ubah jalur ke favicon Anda, yang dapat dipahami oleh browser dan robot pencarian Yandex, maka Anda harus menuliskannya di file template yang sesuai untuk Joomla, WordPress atau mesin lainnya, di antara tag pembuka dan penutup KEPALA, baris kode berikut:

Di file templat mana baris-baris ini perlu ditulis bergantung pada mesin situs Anda. Misalnya, di di WordPress Anda perlu membuka file header.php untuk diedit: wp-content/themes/Folder_with_your_theme_design. Buka header.php di editor dan di awal temukan tag Html HEAD pembuka. Di mana saja setelahnya, tetapi sebelum penutup HEAD, tulis salah satu baris kode di atas yang menunjukkan jalur ke file grafik mini-logo Anda.

Bagaimana cara menginstal favicon animasi? Pada dasarnya sama persis dengan yang biasa. Satu-satunya perbedaan adalah kode yang dimasukkan ke dalam templat situs web Anda, yang dengannya Anda menunjukkan ke browser dan robot pencari Yandex jalur ke file grafik yang diinginkan. Faktanya adalah Favicon animasi akan memiliki ekstensi GIF, dan oleh karena itu, di baris kode Anda perlu menulis sesuatu seperti ini:

Itulah perbedaan antara favicon animasi dan favicon biasa. Namun perlu diingat bahwa ikon animasi hanya akan berfungsi di FireFox; di browser lain, ikon tersebut akan bersifat statis. Yandex, saat memuat favicon animasi Anda, mengubahnya menjadi format PNG statis. Namun, menurut saya, ini tidak sebanding dengan masalahnya - memasang logo mini animasi alih-alih logo mini biasa untuk sebuah situs tidak masuk akal. Tapi itu hanya IMHO saya.

Semoga beruntung untukmu! Sampai jumpa lagi di halaman situs blog

Anda dapat menonton lebih banyak video dengan mengunjungi

Anda mungkin tertarik

Analisis website di layanan online gratis Pr-cy, Cy-pr, Be1, Xseo dan lain-lain
Kegunaan - bagaimana membuat situs web Anda nyaman bagi pengunjung dan berusaha membuat mereka tetap membaca artikel Anda selama mungkin
Klien FTP online Net2ftp dan Google Alerts - layanan yang berguna untuk webmaster
Ikon, lencana, latar belakang, gambar dan logo untuk situs (layanan online IconFinder, Freepik, PSDGraphics, dan lainnya)

Dalam pelajaran hari ini saya akan menceritakannya kepada Anda Ikon favicon (favicon). akan kutunjukkan padamu cara membuat favicon.ico untuk website(atau untuk blog, tidak masalah) dan saya akan menunjukkan kepada Anda bagaimana hal itu mungkin masukkan favicon.

Pastinya masih banyak yang belum mengetahui “keajaiban” apa yang saya maksud. Sederhananya, Favicon adalah gambar (icon) yang muncul di browser sebelum alamat situs. Saya akan menunjukkan kepada Anda Favicon blog saya:

Ikon ini adalah semacam logo untuk blog Anda. Oleh karena itu, pembuatan favicon harus dilakukan dengan penuh tanggung jawab. Ingat, itu bisa membuat blog Anda menonjol dari yang lain.

Rencana Pelajaran:

1. Membuat Favicon dari awal.
2. Membuat favicon dari gambar yang sudah jadi.
3. Layanan dengan ikon siap pakai untuk situs.
4. Melampirkan ikon yang dihasilkan ke situs.

Cara membuat Favicon dari awal

Ada satu layanan yang sangat nyaman. Itu memiliki alamat favicon.cc. Layanan pembuatan favicon ini terlihat seperti ini:

Ke menggambar favicon Yang harus Anda lakukan hanyalah memilih warna dan mengecat saja. Jika Anda menggambar sesuatu, di suatu tempat yang salah, untuk menghapus sebagian gambar, pilih alat transparan (centang kotak) dan “tusuk” piksel (“kotak”) yang ingin Anda hapus:

Saya menggambar favicon berikut:

Yang paling saya suka dari favicon.cc adalah Anda bisa langsung melihat hasil karya Anda dalam ukuran aslinya. Untuk melakukan ini, Anda perlu turun sedikit ke bagian Pratinjau:

Atau Anda bisa melihat hasil pekerjaannya langsung di browser Anda (Opera, Firefox, Internet Explorer, dll):

Membuat favicon dari gambar yang sudah jadi

Katakanlah Anda tidak ingin membuat ikon untuk situs web Anda dari awal, namun ingin membuatnya dari gambar yang sudah jadi. Dalam hal ini, layanan untuk membuat favicon favicon.ru akan nyaman bagi Anda.

Layanan ini dalam bahasa Rusia, jadi Anda seharusnya tidak mengalami masalah. Cukup tunjukkan gambar yang ingin Anda lihat sebagai ikon situs Anda (tombol “Jelajahi”), lalu klik “ Buat favicon.ico", kemudian " Unduh favicon.ico”.

Hari ini kita akan berbicara lagi tentang gambar untuk blog, yaitu tentang ikon proyek yang disebut favicon. Mari kita bahas apa itu favicon, cara membuatnya dan menghubungkannya ke situs kita. Dan juga, berapa ukuran gambar ini dan mengapa Anda masing-masing harus menginstalnya. Lagi pula, ikon ini pun dapat memengaruhi lalu lintas ke blog Anda.

Apa itu favicon?

Konsep favicon cukup sederhana dan dibentuk dari dua kata dalam bahasa Latin (sebenarnya, seperti semua hal lain di Internet) - ikon favorit. Hal ini pada gilirannya dapat diterjemahkan sebagai ikon atau lencana. Maknanya mungkin seperti ini; ikon favorit atau favorit. Mengapa nama ini? Sederhana saja, favorit hanyalah nama bookmark di browser, jadi namanya bisa diartikan sebagai gambar untuk bookmark atau tab browser. Lagi pula, Anda pasti memperhatikan bahwa ketika Anda membuka sebuah situs atau menambahkannya ke bookmark, kita tidak hanya melihat namanya, tetapi juga gambarnya, yang disebut favicon. Saya harap saya bisa menjelaskan hewan apa ini?

Mengapa Anda memerlukan favicon?

Semuanya sesederhana itu, favicon diperlukan untuk mengindividualisasikan proyek Internet. Artinya, ciri khas lain dari blog Anda adalah gambar ini, yang tidak hanya akan membuat situs Anda lebih nyaman digunakan di browser, tetapi juga, dengan pendekatan yang tepat, akan meningkatkan jumlah pengunjung proyek Anda.

Pertama, ini bisa menjadi nyaman di browser, mengapa? Misalnya, ketika saya membuka banyak tab, saya dapat menavigasi berdasarkan ikon situs yang saya perlukan saat ini. Artinya, nyaman bagi orang seperti saya.

Kedua, gambar ini dapat menarik lebih banyak pengunjung ke sumber daya Anda dari mesin pencari Yandex jika menarik dan menonjol dari yang lain, tetapi tanpa fanatisme. Berkat Yandex menyisipkan favicon di sembilan halaman pertama hasil pencarian, blog Anda akan berbeda dari yang lain. Justru karena alasan ini Ada baiknya memikirkan untuk menghubungkan favicon ke proyek Anda. Seperti inilah tampilan halaman pencarian pertama.

Buatlah favicon tidak akan sulit, karena ada banyak sekali generator di jaringan yang dapat membuat favicon dari gambar biasa dan memungkinkan untuk menggambarnya sendiri dari awal. Anda juga dapat membuat gambar menggunakan Photoshop dan kemudian menggunakan generator untuk mengubahnya ke format yang diinginkan.

Perbedaan antara gambar biasa dan ikon kecil, namun tetap ada. Gambar harus sederhana (elemen grafis yang rumit akan sulit dilihat), berukuran 16x16 piksel dan harus dalam format ico. Anda tentu saja dapat menggunakan format png atau gif, tetapi gambar seperti itu tidak akan ditampilkan di semua browser, jadi pilihan terbaik adalah menggunakan format ico.

Saya tidak mengerti gunanya memberi tahu Anda setiap langkah cara membuat ikon ini, karena semua orang bisa mengatasinya. Hal utama adalah mempertimbangkan persyaratan gambar dan semuanya akan berhasil. Singkatnya, unduh atau gambar gambar dan buat favicon menggunakan generator online. Generator online dapat ditemukan dengan mengetik di pencarian Google atau Yandex - favicon. Atau berikut ini tautan ke layanan yang dapat Anda gunakan untuk menggambar dari awal atau membuat favicon dari gambar yang sudah jadi: http://favicon.ru/

Bagaimana cara menghubungkan favicon untuk situs web?

Oke, ikonnya sudah siap, sekarang bagaimana cara memulai browser tampilkan favicon untuk situs tersebut?

Setelah menggunakan layanan ini, unduh ikon siap pakai untuk blog Anda ke komputer Anda. Dan unggah gambar tersebut menggunakan klien FTP ke folder root blog (public_html/site/your_file_in_ico_format) atau ke folder lainnya. Namun sebaiknya masuk ke folder root, hanya saja lebih mudah saat mengkompilasi path ke file.

Nah, file sudah diupload, selanjutnya apa? Sekarang, Anda dapat memeriksa apakah Anda ragu bahwa file tersebut diunggah ke folder root: your_site/favicon.ico. Jika file diunduh ke folder root, maka akan ditampilkan di alamat ini. Selanjutnya Anda perlu menulis untuk setiap halaman sumber daya di antara tag Dan kode berikut:

Dan jika iconnya ada di folder lain, maka tampilannya akan seperti ini:

Kode ini dianggap diterima secara umum untuk banyak sumber daya Internet dan dapat berfungsi di mesin apa pun. Namun Anda dapat menulisnya secara berbeda untuk mesin yang berbeda. Misalnya untuk WordPress, kode ini akan terlihat seperti ini:

/favicon.ico" />

Hanya saja, pada opsi ini, ikonnya harus berada di folder dengan template. Misalnya (public_html/site/wp-content/themes/your-theme/favicon.ico).

Setelah langkah-langkah ini favicon untuk situs tersebut akan mulai bekerja dan Anda dapat melihatnya di tab browser Anda. Namun di hasil pencarian Yandex, file tersebut tidak akan langsung ditampilkan; Anda harus menunggu terlebih dahulu hingga robot Yandex mengindeks ikon tersebut dan baru setelah itu akan mulai muncul di hasil pencarian, dan hanya dengan syarat blog Anda aktif. salah satu dari sembilan halaman pertama hasil pencarian.

Itu saja. Jika ada yang tidak jelas, tanyakan dan kami akan mencari tahu. Sampai jumpa lagi!

Pelajaran baru dalam gaya bengkel dan kali ini kita mempelajari rahasia favicon. favicon - ikon kecil yang muncul di bookmark dan bilah browser. Jika Anda memiliki situs web sendiri dan ingin menonjol dari yang lain bahkan dalam hal-hal kecil - favicon diperlukan. Tentu saja, ini terlihat paling menguntungkan di antara penanda, dengan latar belakang daftar alamat yang memudar tanpa identifikasi grafis apa pun. Namun, pelajaran kita bukan tentang cara memasang favicon ke bilah browser, melainkan tentang cara menggambar favicon Anda sendiri di Photoshop.

Dalam format apa saya harus menyimpan favicon?

Itu semua tergantung pada browsernya. Untuk Microsoft Penjelajah format ikon yang sesuai ICO. Kami telah menemukan format ini ketika kami membuat kursor. Untuk browser lain dari Google Chrome ke Apple Safari biasa akan berhasil GIF atau PNG. favicon mungkin tembus cahaya. Untuk melakukan ini, Anda perlu menyimpannya dalam bentuk tembus cahaya PNG, lalu konversikan ke format ICO. Hal ini dapat dilakukan dengan program yang baik IcoFX. Namun, ada banyak situs pihak ketiga untuk menghasilkan favicon, dan yang paling jelas adalah www.favicon.ru

Bagaimana cara menempatkan favicon di situs web?

Bagaimana cara memastikannya favicon akankah itu berhasil? 4 syarat harus dipenuhi.

• File tersebut harus diberi nama - favicon.
• Ukuran favicon 16 pada 16 piksel
• Tempat optimal untuk favicon adalah folder root situs.
• Tulis alamat ikon di tag meta heder dalam indeks situs.

Dalam ekspresi HTML terlihat seperti ini:

Anda dapat membuat beberapa ikon untuk browser yang berbeda, misalnya satu dalam format ICO, dan yang lainnya di PNG dan tunjukkan semua ini melalui tag link . Browser modern paling sering mencari file di root situs bernama favicon, namun yang pasti, tidak ada salahnya untuk menunjukkan tautan persisnya.

Buat favicon di Photoshop

Membuat favicon sangat sederhana. Apakah Anda ingin membuat yang seperti ini? favicon seperti VKontakte atau Odnoklassniki? Bagus favicon tidak dapat dilakukan dengan memperkecil gambar besar di semua jenis “generator” favicon, yang penuh dengan gambar tersebut di Internet. Faviconnya sangat kecil. Sebenarnya kami adalah sejenisnya seni piksel, yang memiliki ciri khas tersendiri. Anda tidak bisa menulis surat dan hanya mempersingkatnya menjadi 16 piksel .

Menyukai favicon akan buram dan tidak jelas, karena tepi huruf akan tumpang tindih beberapa piksel saat diubah ukurannya. Ini akan menjadi seperti itu anti-alias, yang biasanya bagus, namun dalam kasus seni piksel, transisi seperti itu tidak diperlukan. Di sisi lain, Anda harus menghindari “robek” yang berlebihan pada bagian yang bulat, jika tidak, Anda akan mendapatkan gif halo 1999.

Buat file berukuran 16 X 16 piksel . Kami akan membuat tembus pandang yang sangat sederhana favicon s berbentuk huruf, dengan sedikit kedalaman. Kedalaman akan diciptakan melalui bayangan dan gradien.

Menggambar latar belakang

Mengapa di bagian pendahuluan pelajaran ini Anda melihat sesuatu yang sangat halus dan dijilat favicon? Karena saya memperbesarnya untuk intro pelajaran. Bagaimana cara saya memperbesar gambar secara kualitatif? 16 piksel? Sederhananya, saya selalu bekerja dalam vektor jika memungkinkan untuk menggunakannya dan jika masuk akal. Dan vektor dengan mudah menanggung transformasi apa pun dan tidak kehilangan kualitas.

Pilih alat Alat Persegi Panjang Bulat. Di panel pengaturan, pilih mode yang memungkinkan Anda menggambar vektor. Di menu tarik-turun panel ada tanda centang - Jepret Ke Piksel. Hal ini diperlukan agar jalur vektor dijepret menjadi piksel dan tidak digambar “di antara” piksel tersebut.

Kami memiliki permukaan favicon, dan tepinya yang tembus cahaya akan menghasilkan kebulatan yang mulus. Sekarang saatnya menghilangkan background putih, itu tidak diperlukan. Matikan visibilitasnya. Atau klik dua kali pada layer tersebut, ubah menjadi layer biasa, lalu hapus.