Membuat favicon online. Cara universal untuk membuat favicon

12.03.2021

Di mana mengunduh versi yang sudah jadi

Jauh dari itu pilihan terbaik, tetapi seseorang sedang menggunakannya. Anda dapat mengunduh favicon yang sudah jadi dari Internet dan tidak terlalu khawatir untuk membuatnya sendiri. Semuanya disajikan dalam format yang nyaman dan ukuran yang tepat.

Cukup masukkan kueri yang diinginkan ke mesin pencari, seperti “Unduh favicon yang sudah jadi”, setelah itu Anda akan disajikan dengan sejumlah besar variasi berbeda.

Kami mengunduh gambar ke PC kami, dan kemudian menginstalnya di situs web. Sederhana saja. Mereka tersedia secara gratis, tidak ada yang akan memarahi Anda. Meskipun jika yang sedang kita bicarakan tentang suatu perusahaan, meskipun kecil, maka jika ditemukan logo orang lain, dapat timbul kejadian yang tidak menyenangkan.

Anda dapat mencari opsi yang sudah jadi di berbagai situs web. Biasanya, terdapat seluruh koleksi berbagai logo tematik yang mungkin menarik bagi beberapa webmaster.

Tapi saya ulangi sekali lagi bahwa akan lebih baik jika membuat favicon sendiri.

Membuat favicon

Layanan daring

Anda dapat menggambar favicon di layanan online. Anda hanya perlu memasukkan kueri yang sesuai ke dalam mesin pencari, setelah itu perhatian Anda akan disajikan dengan seluruh daftar situs yang dapat membantu Anda mewujudkan rencana Anda.

Kursus ini akan membahas fitur paling penting dari penciptaan yang kompeten proyek informasi, interaksi dengan tim dan aspek berguna lainnya yang pasti Anda perlukan saat mengembangkan bisnis Anda.

Hari ini saya ingin memperkenalkan Anda pada layanan untuk membuat favicon untuk situs web Anda. Favicon merupakan singkatan dari kata bahasa Inggris favorit dan ikon. Ini adalah gambar berukuran 16 kali 16 piksel, yang disebut favicon dan memiliki ekstensi ico. Itu cocok folder akar situs Anda di hosting. Saat situs dimuat, browser secara otomatis mencari file ini, lalu menambahkannya ke bilah alamat sebelum URL halaman dan ke bookmark, menugaskannya ke situs Anda. Ikon situs web tidak memiliki kegunaan praktis dan hanya berfungsi untuk mengenalinya.

Saat ini, setiap perancang web yang memikirkan keunikan dan orisinalitas sumber dayanya wajib membuat ikon khusus untuknya. Di browser apa pun di bilah alamat, nama situs Anda beserta ikonnya akan terlihat modern dan relevan. Itu juga akan terlihat di bookmark dan favorit, yang membuatnya menonjol dari banyak situs serupa. Anda dapat memilih ikon sesuai dengan topik sumber daya Anda dan, bahkan sebelum mulai mempelajarinya, pengunjung akan dapat segera memahami tentangnya. Ini akan berdampak baik pada pengenalan situs dan pembentukannya sebagai sebuah merek.

Secara default, situs web menampilkan ikon yang disediakan di browser saat ini. Juga sebagian besar versi browser modern mendukung favicon situs pribadi. Dan masuk mesin pencari Yandex, yang kini mendominasi bersama Google di ruang berbahasa Rusia, dengan permintaan pencarian, situs berperingkat muncul bersama dengan ikonnya. Oleh karena itu, tanpa menunda-nunda lagi, sangat penting untuk memperhatikan penciptaannya.

Ada banyak sumber daya di Internet yang sudah disimpan ikon yang sudah jadi. Ada banyak sekali, tapi sekarang kami tertarik untuk membuat favicon.

Perlu membuat favicon untuk situs web Anda? Mari pertimbangkan layanan untuk membuat favicon online

Layanan paling populer untuk membuat ikon situs web. Ini cukup sederhana untuk digunakan dan bahkan pengguna pemula pun dapat mengatasinya. Kami mengunggah gambar yang ingin kami lihat sebagai ikon situs. Dia memprosesnya. Kita lihat gambar yang dihasilkan dan jika cocok, lalu klik Download. Sebuah file dengan nama . Anda dapat menggambarnya sendiri piksel demi piksel dan jika Anda suka, Anda juga dapat menyimpannya sebagai ikon. Penting agar gambar sederhana digunakan untuk membuat favicon. Jika ada banyak benda berwarna-warni, Anda akan mendapatkan tempat yang tidak mencolok.

Layanan berikutnya yang juga mudah digunakan adalah . Pekerjaan di dalamnya kira-kira mirip dengan analog sebelumnya. Satu-satunya hal adalah itu dalam bahasa Inggris dan ada lebih banyak iklan. Namun secara umum, tindakan pembangkitan cukup mirip. Unggah gambar, lihat, edit, dan simpan.

Sekarang hampir setiap sumber daya yang menyediakan layanan promosi situs web atau mengumpulkan analisis memilikinya opsi tambahan dalam membuat favicon. Misalnya, layanan terkenal yang juga memiliki opsi tambahan ini:

Tapi saya suka layanan yang dirancang khusus untuk kreasi. Ini, lihat, satu lagi yang lucu alat daring untuk menghasilkan ikon dengan berbagai ukuran dan format. Sederhana dan gurih. Mengunggah file kami. Ukuran yang dipilih. Pratinjau dan simpan ke komputer Anda.

Tentu saja, Anda dapat menggunakan Photoshop favorit semua orang untuk membuat ikon. Tapi itu tidak menyimpan gambar dengan ekstensi ico. Atau lebih tepatnya, ini menghemat, tetapi untuk ini Anda perlu membongkar plugin khusus - icoformat.8bi dan menginstalnya di folder Plug-Ins\File Formats di folder Photoshop. Ini akan memungkinkan Anda untuk menyimpan file dengan ekstensi yang kami inginkan. Bagi saya, ini cukup merepotkan.

Saya menyarankan opsi ini. Di Photoshop, kami membuat gambar yang ingin kami lihat sebagai ikon, menyimpannya dengan ekstensi apa pun dan mengirimkannya ke salah satu layanan di atas, di mana kami akan mendapatkan yang kami butuhkan dari gambar-gambar ini.

Anda juga dapat menggunakan konverter online gambar grafik dari satu format ke format lainnya. Misalnya di sini atau . Dengan menggunakannya, Anda dapat mengubah ekstensi apa pun file grafik untuk ico.

Bagaimana cara membuat ikon menjadi favicon untuk situs?

Langkah-langkah berikut diperlukan:

1 Pastikan file tersebut bernama .

2 Menggunakan Filezilla kami menempatkannya di folder root situs kami. Secara teori, tindakan ini sudah cukup dan browser akan secara otomatis menentukan lokasinya. Tapi kami bermain aman dan menulis jalur ke file ini dalam kode html.

3 Untuk melakukan ini, ambil file tema kami header.php (Anda dapat mengeditnya di panel admin langsung di WordPress, atau Anda dapat mendownloadnya dari server), buka dan tambahkan sebelum tag penutup kode berikut:

/favicon.ico"/>

4 Simpan file dan transfer kembali ke hosting.

5 Hapus cache browser saat ini dan selesai. Kami mendapatkan hasil yang diinginkan.

Omong-omong, favicon tidak perlu ditempatkan di root. Atribut href secara langsung menentukan jalur ke sana. Ternyata seperti ini:

Ikon juga tidak perlu memiliki ekstensi ico. Anda juga dapat menggunakan ekstensi png dan gif. Untuk melakukan ini, kode mengubah jenis file keluaran.

Artinya, kita mengubah jenisnya dari image/x-icon menjadi image/png atau gif .

Ngomong-ngomong, Anda bisa menambahkan satu hal lagi. Kami membuat dan memasang favicon untuk situs tersebut, tetapi di panel admin WordPress, favicon standar tetap ada secara default. Agar dapat berubah di mana pun, Anda perlu memasukkan kode php berikut ke dalam file function.php tema kita:

fungsi sp_set_favicon() ( gema " "; ) add_action("admin_head", "sp_set_favicon"); add_action("login_head", "sp_set_favicon"); add_action("wp_head", "sp_set_favicon");

fungsi sp_set_favicon() (

gema ".get_bloginfo("template_url" ) />

" ;

add_action("admin_head" , "sp_set_favicon" ) ;

add_action("login_head" , "sp_set_favicon" ) ;

add_action("wp_head" , "sp_set_favicon" ) ;

Sekarang ini akan tercermin di semua header.

Pada dasarnya hanya itu saja. Hari ini kita membahas mengapa Anda perlu membuat favicon untuk situs web dan melihat layanan online untuk membuat favicon untuk situs web dan seluk-beluk pemasangannya. Jangan lupa berlangganan pembaruan blog. Sampai berjumpa lagi!

Tonton video tentang cara membuat favicon.ico dan menyimpannya:

Sekarang ikon situs pribadi - Favicon - adalah semacam kartu nama sumber daya web apa pun. Ikon ini menyoroti portal yang diinginkan tidak hanya di daftar tab browser, tetapi juga, misalnya, di hasil pencarian Yandex. Favicon, sebagai suatu peraturan, tidak melakukan fungsi lain apa pun selain meningkatkan kesadaran situs.

Membuat ikon untuk sumber daya Anda sendiri cukup sederhana: Anda menemukan gambar yang sesuai atau menggambarnya sendiri menggunakan editor grafis, lalu mengompres gambar ke ukuran yang diinginkan - biasanya 16x16 piksel. Simpan hasilnya ke file favicon.ico dan letakkan di folder root situs. Namun prosedur ini dapat disederhanakan secara signifikan dengan menggunakan salah satu generator Favicon yang tersedia di Internet.

Kebanyakan editor ikon web menawarkan semua alat yang diperlukan untuk membuat Favicon. Dalam hal ini, tidak perlu menggambar dari awal - Anda dapat menggunakan gambar yang sudah jadi.

Metode 1: Favicon.by

Generator favicon online berbahasa Rusia: sederhana dan visual. Memungkinkan Anda menggambar ikon sendiri menggunakan kanvas 16x16 bawaan dan daftar alat minimal, seperti pensil, penghapus, pipet, dan isian. Ada palet dengan semua warna RGB dan dukungan transparansi.

Jika mau, Anda dapat mengunggah gambar yang sudah jadi ke generator - dari komputer Anda atau sumber web pihak ketiga. Gambar yang diimpor juga akan ditempatkan di kanvas dan tersedia untuk diedit.

Hasilnya, Anda mendapatkan file ICO grafis bernama favicon dan resolusi 16x16 piksel. Ikon ini sudah siap digunakan sebagai ikon website Anda.

Metode 2: Editor Ikon X

Aplikasi browser HTML5 yang memungkinkan Anda membuat ikon detail hingga ukuran 64x64 piksel. Berbeda dengan layanan sebelumnya, X-Icon Editor memiliki lebih banyak alat menggambar dan masing-masing dapat dikonfigurasi secara fleksibel.

Seperti di Favicon.by, di sini Anda dapat mengunggah gambar yang sudah jadi ke situs dan mengubahnya menjadi favicon, mengeditnya dengan benar jika perlu.

Jika Anda ingin mempertahankan detail gambar yang ingin Anda ubah menjadi favicon, X-Icon Editor sangat cocok untuk ini. Kemampuan menghasilkan ikon dengan resolusi 64x64 piksel menjadi keunggulan utama layanan ini.

Favicon (Bahasa Inggris: Ikon Favorit) adalah ikon kecil (gambar, gambar) dalam format khusus yang ditampilkan di bilah alamat browser saat melihat situs, tab browser, atau di bookmarknya (“Favorit”).

favicon adalah hiasan tambahan untuk website Anda, logo mini Anda. Itu juga ditampilkan saat melihat daftar situs di pencarian Yandex dan Google dan membuat situs Anda menonjol dari yang lain.

Mengapa Anda memerlukan favicon untuk sebuah situs web?

favicon adalah merek dagang situs Anda. Banyak perusahaan saat ini memiliki favicon khas yang membedakan mereka dari pesaingnya. Agar ikon tersebut lebih diingat oleh pengguna, perusahaan harus menampilkan logo mereka di dalamnya, yang juga harus menjadi salah satu elemen header situs. Fitur positif lainnya dari penggunaan favicon adalah ketika melihat sejumlah besar situs di browser, Anda tidak melihat keseluruhan judul halaman, tetapi hanya ikonnya, dan Anda dapat dengan segera dan mudah mengidentifikasi tab yang ingin Anda tuju.

Apa yang lebih baik untuk ditampilkan di favicon?

Ikon harus sesuai dengan tema situs.
merek, jika situs web Anda dikaitkan dengan merek ini. Pada saat yang sama, merek berbeda dapat ditampilkan untuk halaman berbeda;
Gunakan favicon yang ingin Anda klik, ini akan meningkatkan rasio klik-tayang saat melihat di pencarian Yandex dan Google;
Buat beberapa desain favicon untuk berbagai bagian situs Anda.
Buatlah beberapa desain favicon untuk acara berbeda (misalnya Tahun Baru, Hari Valentine, atau Hari Kosmonautika, :).

Tempatkan file yang dihasilkan di root situs Anda, tempat file indeks utama (index.php) berada. Untuk menunjukkan kepada browser lokasi favicon situs di bagian kepala halaman, masukkan baris berikut:

Bagaimana cara membuat favicon animasi?

Format ICO tidak mendukung animasi. Namun browser modern mengizinkan Anda menggunakan format GIF untuk gambar mini. Dimungkinkan untuk menentukan satu file animasi (favicon.gif) untuk browser modern, dan satu lagi (favicon.ico) untuk browser kuno, seperti Intertet Explorer. Untuk melakukan ini, tambahkan dua baris berikut ke bagian kepala:

Tentu saja, Anda harus terlebih dahulu menempatkan kedua file di folder root situs.

Apa yang harus dilakukan jika menampilkan gambar di browser dilarang?

Jika Anda membuat favicon dengan gambar yang disematkan di kode halaman:

Kemudian ikon tersebut akan ditampilkan di browser meskipun gambar dinonaktifkan.

.

Cara mendapatkan favicon dari website

]*)link([^>]*)(rel="icon"|rel="ikon pintasan")([^>]*)>/iU", $html, $out)) ( $link_tag = $out ; jika (preg_match("/href([s]*)=([s]*)"([^"]*)"/iU", $link_tag, $keluar)) ( $favicon = potong($keluar) ; jika (strpos($favicon, "://")===false) $favicon = $url. "/" ltrim($favicon, "/" ) ?>

Mesin pencari Google, Yandex dan favicon

Robot mesin pencari men-cache ikon situs web. Ikon cache tersedia untuk permintaan berikut:

Selain itu, Yandex dapat menjadikan Anda "sprite" dari ikon berbagai situs:

Ikon untuk iPhone dan iPad

Meskipun Anda tidak menentukan tautan ke gambar tersebut, iPhone akan tetap mencari file bernama apple-touch-icon.png di folder root situs dan jika menemukannya, ia akan mengambil gambar dari sana, bulat di sudut dan sorotan akan diterapkan ke perangkat secara otomatis.

Untuk menghindari hal ini, alih-alih apple-touch-icon.png Anda harus menulis apple-touch-icon-precompose.png pemilik iPhone dan iPad, karena Bagi mereka, kami membuat ikon cantik berukuran 57x57 (omong-omong, bisa lebih besar, tapi ini adalah ukuran standar ikon di layar makan siang), menghubungkannya seperti ini:

Bagaimana cara mengubah favicon secara dinamis?< links.length; i++) { var lnk = links[i]; if (lnk.rel=="shortcut icon") { head.removeChild(lnk); } } // Добавить новую иконку var link = document.createElement("link"); link.setAttribute("href",icon); link.setAttribute("type","image/x-icon"); link.setAttribute("rel","shortcut icon"); head.appendChild(link);

Jika Anda mencoba mengubah nilai properti tag melalui DOM, Anda tidak akan mendapatkan hasil yang diinginkan. Untuk mengubah ikon halaman secara dinamis, Anda harus terlebih dahulu menghapus tag tautan dengan ikon lama dari judul halaman, lalu menambahkannya dengan konten baru. Ini dilakukan seperti ini: // Tautan ke file ikon baru var icon="new_favicon.ico";

var head = document.getElementsByTagName("head");

// Temukan dan hapus ikon lama dari tag HEAD var links = head.getElementsByTagName("link");

untuk (var saya = 0; saya

HTML5 dan favicon

Atribut ukuran telah ditambahkan ke HTML5, memungkinkan Anda mendeklarasikan beberapa versi berbeda dari ikon yang sama, dan ini dapat berupa file PNG:

Bagaimana cara mendeklarasikan ubin untuk tablet di Windows 8?

Iklan untuk Windows 8.0 terlihat seperti ini:

Windows 8.1 dan IE 11 mengharapkan beberapa versi gambar yang dideklarasikan di browserconfig.xml. Misalnya:

Saya pikir tidak ada gunanya mengatakan bahwa favicon harus berkualitas baik, karena sampai batas tertentu, ini adalah wajah situs Anda. Pada artikel ini kita akan mempelajari cara membuat favicon yang memenuhi kebutuhan kita, dan juga mengenal layanan untuk mengonversinya. Baca selengkapnya di bawah ini.

Versi video:

Seperti apa seharusnya favicon itu?

Sebelum mulai membuat favicon itu sendiri, alangkah baiknya untuk memikirkan apa yang idealnya. Jadi, favicon yang ideal:

Jelas dan dapat dimengerti
Dibuat dengan kualitas yang baik
Menyampaikan arti situs Anda
Memiliki gaya yang sama dengan situs Anda
Menonjol dari ikon situs lain

Parameter di atas dapat digolongkan sebagai favicon yang ideal. Dan kita perlu membuat ikon seperti itu untuk situs kita. Namun, ada perdebatan mengenai apa sebenarnya yang harus digambarkan pada favicon. Saya percaya bahwa dalam hal ini Anda perlu melanjutkan dari gaya umum dan tema situs Anda. Ini mungkin berisi beberapa gambar atau teks. Jika teks ditempatkan pada favicon, sebaiknya terdiri dari tidak lebih dari 2 huruf. Jika tidak, tidak ada yang bisa membaca teks seperti itu, karena dimensi favicon umumnya 16*16 piksel.

Berapa ukuran ikon situs web?

Seperti yang Anda ketahui, saat ini terdapat berbagai macam browser, monitor, dan perangkat. Dan persyaratannya untuk ukuran favicon berbeda-beda. Ada opsi ukuran berikut yang perlu dipertimbangkan:

16*16px - ukuran favicon standar, cocok untuk sebagian besar browser dan perangkat
32*32px - digunakan dalam beberapa kasus di Penjelajah Internet Dan Safari
57*57px - digunakan saat menampilkan iPhone
72*72px - digunakan saat menampilkan iPad
114*114px - digunakan saat menampilkan di layar retina (57*2=114)
144*144px - digunakan saat menampilkan di layar retina iPad (72*2=144)

Apa format favicon yang seharusnya?

Sebelumnya, browser hanya menerima favicon dalam format "iko". Sekarang mereka telah belajar memahami format lain, termasuk "png". Dalam kasus kami, kami akan membunuh 2 burung dengan satu batu. Pertama kita akan membuat favicon dalam format "png", lalu ubah menjadi "iko".

Beberapa cara untuk membuat favicon

Saat ini ada dua cara utama untuk membuat favicon:

Melalui layanan online khusus
Buat sendiri menggunakan program khusus seperti Photoshop dan Adobe Illustrator

Setiap metode memiliki karakteristiknya masing-masing. Keuntungan membuat favicon melalui layanan online adalah Anda tidak perlu memiliki keahlian khusus untuk melakukannya. Anda cukup mengunggah gambar yang diperlukan, memodifikasinya, dan mengunduh favicon yang sudah jadi. Atau Anda cukup mengerjakan teks dan menggambar ikon menggunakan alat layanan online. Secara umum, keuntungan utama dari metode ini adalah kesederhanaannya. Namun, sisi lain dari hal ini adalah kualitas ikon situs web tersebut masih jauh dari yang diharapkan. Anda tidak akan menerima favicon unik karena alasan sederhana bahwa galeri ikon untuk layanan online tidak terbatas. Dan ketika menggunakan gambar Anda sendiri, menggunakan alat layanan, tidak mudah untuk membuat produk berkualitas tinggi. Dalam kasus menggambar ikon secara manual menggunakan alat layanan online, hasilnya adalah “sesuatu yang tidak terbayangkan”.

Oleh karena itu, kami memilih solusi kedua yang lebih kompleks namun berhasil. Untuk membuat favicon kita akan menggunakan program photoshop. Jika Anda tidak memiliki pengalaman dengan program ini, tidak apa-apa. Dengan mengikuti instruksi saya, Anda akan menyelesaikan tugas dengan mudah.

Membuat favicon

Seperti yang sudah saya sebutkan, favicon dapat dibuat menggunakan gambar atau huruf saja. Dalam kasus kami, saya akan menggunakan beberapa jenis gambar. Misalnya saja kita mempunyai website otomotif. Oleh karena itu, kita perlu mencari gambar dari area auto. Saya mengusulkan untuk membuat ikon situs kita dalam bentuk roda.

Memilih gambar

Anda dapat mengambil gambar dari mana saja. Misalnya melalui hal yang sama Gambar Yandex. Syarat utamanya adalah gambarnya harus sederhana, tanpa bayangan atau volume. Pasalnya, jika diperkecil menjadi 16 piksel, detailnya tidak akan banyak. Karena kelebihan volume dan bayangan, gambar mungkin menjadi buram.

Saya menemukan gambar yang cocok menggunakan pencarian google berdasarkan permintaan "roda". Yang harus saya lakukan adalah menyimpannya dengan mengklik kanan dan memilih “Save Image As”.

Gambar yang relevan di gambar google

Selanjutnya kita buka gambar ini menggunakan photoshop. Sangat penting bahwa favicon memiliki latar belakang transparan. Dalam kasus kami, hal ini tidak terjadi. Untuk menghapus latar belakang kami menggunakan alat Magic Wand. Inti dari karyanya sangat sederhana. Dengan alat ini kita dapat memilih area dengan warna yang sama pada suatu gambar. Karena latar belakang gambar kita jelas kontras dengan roda itu sendiri, hal ini akan sangat mudah dilakukan. Dengan mengklik sekali kita memilih area satu warna. Dengan menekan pintasan keyboard CTRL+Hapus kami menghapus area ini.

Menghapus latar belakang roda kita

Kami melakukan ini dengan semua bagian latar belakang gambar. Jadi, dalam gambar kita, roda berada pada latar belakang transparan, itulah yang perlu kita lakukan. Jadi, template untuk ikon website kita sudah siap.

Buat favicon dalam 2 ukuran berbeda

Saya sarankan membuat 2 favicon dengan ukuran 64px dan 16px. Pertama kita perlu membuat ikon yang lebih besar (64px). Untuk melakukan ini kita menekan pintasan keyboard CTRL+N. Pada jendela yang muncul, kita pilih tinggi dan lebar gambar menjadi 64px.

Menetapkan dimensi favicon masa depan

Selanjutnya, kita perlu menggerakkan roda ke area gambar yang baru dibuat. Untuk melakukan ini, kita kembali ke gambar dengan roda dan memilih alat Pindah. Langkah selanjutnya adalah mengklik gambar roda dan sambil menahan tombol kiri mouse, pindahkan ke area gambar baru. Pastikan layer dengan roda dipilih saat bergerak. Jika tidak, transfer akan gagal.

Memindahkan roda ke gambar baru

Setelah memindahkan roda ke gambar baru, kami melihat bahwa roda tersebut tidak pas. Kita perlu mengurangi roda menjadi 64 px. Untuk melakukan ini kita tahan kuncinya MENGGESER dan dengan mengklik titik diagonal gambar kita memperkecilnya. Jadi kami membuat favicon pertama untuk website kami. Izinkan saya mengingatkan Anda bahwa ukuran kami adalah 64*64px. Sekarang yang harus kita lakukan adalah menyimpannya dengan memilih fungsi “Simpan untuk Web” di tab “File”. Kami memilih formatnya PNG-24 dan map gambar. Kami juga menyebut favicon itu sendiri, hanya dalam huruf latin - "favikon".

Simpan faviconnya

Besar. Sekarang yang harus kita lakukan adalah membuat favicon yang lebih kecil. Untuk melakukan ini, kita klik pada tab “Gambar” dan pilih fungsi “Ukuran Gambar”. Di sini kita mengatur lebar dan tinggi menjadi 16px. Sekarang yang harus kita lakukan adalah menyimpan gambar ini untuk web. Kita bisa menyebutnya "favicon-2".

Jadi, inilah kita, membuat 2 favicon untuk website kita dalam format "png". Kami pertama kali membuat opsi dengan ukuran 64px untuk kemudian dengan mudah menguranginya menjadi 16px. Jika Anda pertama kali membuat opsi dengan 16px, maka Anda tidak akan dapat meningkatkannya menjadi 64px tanpa kehilangan kualitas. Oleh karena itu, ingatlah hal ini agar tidak melakukan pekerjaan ganda.

Memasang favicon di situs

Untuk memasang favicon di situs di dalam tag kami menulis:

Jika kita memiliki favicon dengan format " ikon" maka kita sebagai gantinya" png" menulis " ikon". Misalnya:

Seperti yang Anda lihat, ikon situs ditampilkan sesuai keinginan kami.

Mengonversi ikon situs ke format "ico".

Browser modern dapat dengan mudah mengenali dan menampilkan favicon dalam format "png". Namun, Anda mungkin perlu mengonversinya menjadi "iko". Salah satu kelebihan format ini adalah menyimpan favicon semua ukuran dalam satu file. Setuju bahwa ini sangat nyaman. Jadi, untuk mengonversi ikon kami, kami akan menggunakan layanan keren - xiconeditor.com. Sangat mudah untuk dikerjakan. Semuanya terjadi dalam 4 langkah:
1. Pertama, kita perlu mengunggah favicon kita. Untuk melakukan ini kita klik tombolnya "Impor".

Mengunggah favicon di layanan xiconeditor.com

3. Jika diinginkan, Anda dapat mengklik tombol tersebut "Pratinjau" dan lihat bagaimana mereka akan ditampilkan. Untuk mengunduh favicon kami dalam format "iko" kita klik tombolnya "Ekspor".

Jadi, inilah kita, mempelajari cara membuat favicon "png" dan mengubahnya menjadi format "iko". Saya secara khusus tidak mempertimbangkan pemrosesan gambar secara mendetail di Photoshop, karena bagi banyak orang hal itu tidak diperlukan. Jika perlu, tentu saja Anda dapat lebih meningkatkan kualitas favicon dengan bekerja dengan piksel di Photoshop. Saya mencoba menyajikan semua hal penting dalam bentuk yang disederhanakan. Dan itu saja untukku. Saya harap pelajaran ini bermanfaat bagi Anda. Jika demikian:

Posting ulang artikel ini di jejaring sosial agar lebih banyak orang dapat memperoleh manfaat darinya;
Berlangganan buletin saya agar tidak ketinggalan postingan blog yang bermanfaat dan menarik.

Di sinilah aku tidak mengucapkan selamat tinggal padamu. Terima kasih atas perhatian Anda dan sampai jumpa di publikasi berikutnya!

Membuat favicon online. Cara universal untuk membuat favicon

Baca juga

Di mana mengunduh versi yang sudah jadi

Membuat favicon

Layanan daring

Perlu membuat favicon untuk situs web Anda? Mari pertimbangkan layanan untuk membuat favicon online

Bagaimana cara membuat ikon menjadi favicon untuk situs?

Metode 1: Favicon.by

Metode 2: Editor Ikon X

Mengapa Anda memerlukan favicon untuk sebuah situs web?

Apa yang lebih baik untuk ditampilkan di favicon?

Bagaimana cara membuat favicon animasi?

Apa yang harus dilakukan jika menampilkan gambar di browser dilarang?

.

Mesin pencari Google, Yandex dan favicon

Ikon untuk iPhone dan iPad

// Temukan dan hapus ikon lama dari tag HEAD var links = head.getElementsByTagName("link");

Seperti apa seharusnya favicon itu?

Berapa ukuran ikon situs web?

Apa format favicon yang seharusnya?

Beberapa cara untuk membuat favicon

Membuat favicon

Memilih gambar

Buat favicon dalam 2 ukuran berbeda

Memasang favicon di situs

Mengonversi ikon situs ke format "ico".