Program untuk mencipta favicon dalam talian. Cara universal untuk mencipta favicon. Di mana untuk memuat naik favicon supaya ia dalam talian

Hello pembaca yang dikasihi! Artikel hari ini adalah tentang mencipta favicon (favicon.ico) untuk tapak web anda. Daripada siaran tersebut anda akan mengetahui apa itu favicon, apakah saiz ikon ini dan mengapa ia mesti dibuat dan dipasang pada blog anda. Di samping itu, artikel itu akan menyediakan penjana favicon yang membolehkan anda membuat favicon dalam talian dalam beberapa minit, serta tapak di mana anda boleh memuat turun galeri dan koleksi favicon siap sedia.

Sebagai permulaan, mari kita fikirkan apa itu Favicon, mengapa ia diperlukan, mungkin anda boleh melakukannya tanpanya sama sekali?

1. Apakah ikon favicon dan untuk apa ia

konsep favicon berasal daripada dua perkataan Inggeris Ikon Kegemaran, yang boleh diterjemahkan sebagai ikon (imej kecil) untuk "kegemaran". "Kegemaran" ialah nama penanda halaman dalam pelayar Internet Explorer asas. Mereka kelihatan, sebagai contoh, seperti ini dalam penyemak imbas Chrome:

Untuk setiap sumber, terdapat imej kecil, seperti mini . Setuju bahawa adalah lebih mudah untuk menanda buku bukan alamat url tapak, tetapi logo kecil mereka - favicon. Dengan cara ini, sebagai tambahan kepada ini, favicon dipaparkan dalam bar alamat penyemak imbas sejurus sebelum URL halaman terbuka tapak atau dalam tajuk penanda halaman:

favicon ialah fail kecil (16×16 piksel) dengan sambungan .ico (sambungan ini digunakan oleh sistem pengendalian untuk menyimpan ikon). Hampir setiap tapak mempunyai favicon.ico, tidak kira di mana pengehosan ia ditempatkan atau enjin/tema yang digunakannya. Penjana dan galeri favicon dalam talian membolehkan anda membuat ikon dalam beberapa minit dari mana-mana imej, melukisnya dari awal atau memuat turun yang sudah siap, jadi jika anda belum menggunakan favicon di blog anda, kemudian betulkan keadaan seperti secepat mungkin.

Gambar kecil ini untuk apa? Pertama, ia adalah logo mini untuk tapak anda, pelawat anda akan mengingatinya dengan lebih baik. Oleh itu, jika anda memutuskan untuk menciptanya, cuba pastikan favicon itu menarik perhatian pelawat dan mudah diingati. Dan kedua, Yandex, enjin carian paling popular di Runet, meletakkan faviconnya di sebelah setiap tapak dalam hasilnya, yang membolehkan anda membezakan sumber anda daripada orang lain yang tidak mempunyai ikon. Pengguna lebih cenderung untuk melawati tapak yang bersebelahan dengan imej yang dipamerkan (tidak kira yang mana satu), yang bermaksud favicon membenarkan.

Dengan cara ini, Yandex juga mempunyai bot khas yang tidak mengindeks kandungan di tapak, tetapi hanya mengindeks favicon sumber. Selepas mencipta favicon dan memasangnya di tapak, anda perlu menunggu sedikit sehingga bot Yandex ini mengindeksnya, dan proses ini biasanya berlangsung dari seminggu hingga sebulan. Terdapat tiga cara untuk menyemak sama ada Yandex telah mengindeks favicon anda:

• Taipkan alamat tapak anda dalam kotak carian Yandex (contohnya, http: // tapak) dan lihat jika terdapat favicon berdekatan.
• Ikuti pautan http://favicon.yandex.net/favicon/ tapak(di mana anda perlu menggantikan "tapak" dengan URL tapak anda). Jika ikon diindeks, maka anda akan melihatnya.
• Pergi ke Yandex.Webmaster (http://webmaster.yandex.ru) dan semak favicon.ico

2. Penjana dan Galeri Favicon Dalam Talian

Oleh itu, kami telah mengetahui apa itu favicon, sangat diperlukan untuk tapak tersebut. Kami mengetahui bahawa ia mestilah 16 kali 16 dalam piksel dan sambungannya hendaklah .ico. Kini terdapat beberapa cara untuk mencipta favicon.ico:

1. Muat turun ikon sedia dari galeri favicon.
2. Buat favicon dari awal menggunakan Photoshop atau penjana dalam talian.
3. Buat favicon daripada imej yang telah siap (dimensi imej tidak penting).

2.1 Koleksi dan galeri favicon

1. http://www.thefavicongallery.com/ — galeri kecil yang merangkumi ikon pelbagai subjek. Mengandungi kira-kira 300 imej. Untuk memuat turun gambar yang anda suka, anda perlu klik kanan padanya dan pilih "simpan sebagai", kemudian simpan favicon ke komputer anda.
2. http://www.iconj.com/- lebih daripada 3 ribu ikon untuk setiap rasa dan warna. Anda boleh menyimpan imej dalam format .gif atau .ico. Anda juga boleh mengambil kod-html ikon. Terdapat favicon animasi. Satu-satunya kelemahan koleksi ialah terdapat hanya 30 ikon pada satu halaman, jadi anda perlu melihat melalui banyak halaman untuk memilih imej yang betul.
3. http://www.favicon.cc/- koleksi favicon yang besar, tetapi terdapat hanya 20 keping pada satu halaman, ia akan mengambil masa yang lama untuk menatal.
4. http://www.favicon.co.uk/- juga galeri yang bagus yang mengandungi banyak favicon. Terdapat 144 ikon pada setiap halaman, yang menjadikan penyemakan imbas sangat mudah. Favicon mempunyai tema yang berbeza.
5. - koleksi kecil (84 keping) imej mini untuk tapak anda.

2.2 Cara membuat favicon untuk laman web dari awal

Kelebihan mencipta favicon dari awal ialah favicon yang dihasilkan akan menjadi unik, dan keunikan adalah sangat penting! Oleh itu, lebih baik jangan malas dan luangkan masa 5-10 minit untuk mencipta favicon anda sendiri.

Tidak sepatutnya ada masalah dengan menjana ikon, kerana semuanya jelas di sini.

2.2.4 Favicon-Generator.org

Satu lagi penjana favicon dalam talian yang bagus. Ia boleh diakses melalui pautan ini - http://favicon-generator.org/.

Seharusnya tiada masalah dengan penjana ini sama ada. Pada skrin, fungsi penjana favicon dalam talian diterjemahkan.

2.3 Cara membuat favicon untuk tapak daripada imej sedia ada

Jika anda tidak mahu membuat favicon untuk tapak anda dari awal, anda boleh menggunakan imej yang akan menjadi asas kepada logo mini. Dalam kes ini, anda perlu menyediakan gambar terlebih dahulu (sebaik-baiknya gambar segi empat sama, jika tidak corak mungkin diherotkan semasa membuat favicon.ico), dan kemudian gunakannya dalam perkhidmatan dalam talian penjana favicon. Mari lihat dua sumber yang paling popular.

2.3.1 Favicon.ru

Penjana dalam talian adalah sangat mudah untuk digunakan, ia dengan mudah akan menukar mana-mana imej dari sebarang saiz kepada ikon kecil 16x16 piksel. Sekarang anda akan melihat sendiri betapa mudahnya menggunakan perkhidmatan ini.

Terdapat dua cara untuk menambah imej:

• Gunakan butang "Pilih fail" untuk mencari imej yang dikehendaki pada komputer dan muat naiknya.
• Masukkan alamat gambar di Internet dalam medan (dalam kes ini, fail ini mungkin tidak ada pada komputer anda), dan perkhidmatan akan melakukan segala-galanya sendiri.

Selepas fail dimuat naik, anda hanya perlu klik pada " Cipta favicon.ico!' dan tunggu beberapa saat. Seterusnya, anda hanya perlu memuat turun favicon ke komputer anda.

2.3.2 Favicon.cc

Penjana dalam talian ini lebih berkuasa daripada yang sebelumnya, tetapi juga lebih rumit daripadanya. Untuk bermula, ikuti pautan - favicon.cc, dan kemudian klik "Import Imej" (dalam tetingkap kiri).

Seterusnya, klik pada butang "Pilih fail" dan muat naik imej yang dikehendaki. Berdasarkan itu, favicon akan dibuat untuk tapak anda. Dalam kes ini, anda perlu memilih apa yang perlu dilakukan dengan imej apabila ia dikurangkan:

• Kekalkan dimensi - biarkan nisbah bidang imej tidak berubah.
• Ikon Kecilkan kepada segi empat sama - bawa sisi imej kepada bentuk segi empat sama, manakala imej mungkin diherotkan.

Selepas memuat naik gambar, anda boleh mengeditnya dalam penjana dalam talian atau biarkan ia tidak berubah. Jika favicon.ico yang dihasilkan sesuai dengan anda, kemudian muat turunnya ke komputer anda.

3. Cara memasang favicon pada blog WordPress

Selalunya, favicon terletak di folder akar tapak, di samping itu, ia lebih mudah, jadi kami akan mempertimbangkan pilihan ini. Ini dilakukan dalam dua langkah.

LANGKAH PERTAMA. Pertama, anda perlu mencari baris kod html dalam tema yang menentukan laluan ke favicon. Untuk blog WordPress, anda perlu mencari fail header.php (Header) dan mencari baris, ia sepatutnya kelihatan seperti ini (ia mungkin berbeza sedikit bergantung pada tema):

Anda perlu menggantikan baris ini dengan dua yang berikut:

< link rel= "icon" href= "/favicon.ico" type= "image/x-icon" >

< link rel= "shortcut icon" href= "/favicon.ico" type= "image/x-icon" >

PENTING! Garisan ini hendaklah diletakkan di dalam tag dan

LANGKAH KEDUA. Kini anda perlu menambah favicon pada folder akar tapak. Pergi ke pengehosan anda dan letakkan fail dengan nama favicon.ico(saiz 16×16 piksel).

Jika anda melakukan semuanya dengan betul, kini tapak anda telah mendapat faviconnya sendiri.

Salam sejahtera wahai pengunjung blog saya. Hari ini saya telah menyediakan untuk anda pilihan 10 perkhidmatan yang akan membantu anda membuat favicon dalam talian. Dan juga pada akhir artikel, saya menyerlahkan 5 laman web yang paling mudah, pada pendapat saya.

Sebagai permulaan, ia patut memahami apa itu favicon? Saya rasa ramai di antara anda sudah biasa dengan konsep ini, tetapi saya akan memberitahu anda sekali lagi. Dalam satu perkataan, ia adalah ikon tapak anda. Semasa mencari dalam Yandex, anda melihat ikon kecil 16x16 di sebelah tapak, jadi ini adalah favicon. Ia juga boleh dilihat dalam bar alamat dan dalam penanda halaman beberapa pelayar.

Gambar kecil ini adalah jenama anda yang pertama sekali. Orang akan mengenali tapak anda dengannya. Oleh itu, ia mestilah asli dan tidak dapat dilupakan supaya ia dapat dilihat dengan serta-merta dalam carian Yandex. Sukar untuk melukis ikon sekecil itu sendiri, dan perkhidmatan dalam talian datang untuk menyelamatkan yang akan membantu anda membuat favicon dari gambar. Mari kita lihat beberapa daripada mereka mengikut susunan dan kenal pasti kekuatan dan kelemahan mereka.

• Mudah digunakan.
• Anda boleh membuat favicon daripada gambar atau melukisnya sendiri.
• Anda boleh memesan daripada profesional.
• Pratonton keputusan.
• Saya fikir mereka tidak ada di sana, semua yang anda perlukan ada di laman web ini, saya hanya boleh menyerlahkan bahawa tiada galeri ikon siap pakai.

1. 
   

   • Ia adalah mungkin untuk mencipta daripada gambar atau melukisnya sendiri.
   • Selepas penjanaan, contoh pautan untuk ditambahkan ke tapak ditunjukkan.
   • Semuanya dalam bahasa Inggeris.
   • Reka bentuk hodoh.
   • Tidak boleh memangkas imej semasa penciptaan.

2. 3 www.chami.com

3. 
   

   • Antara muka mesra pengguna yang cantik.
   • Anda boleh membuat favicon daripada gambar atau melukisnya sendiri.
   • Palet warna yang besar untuk lukisan.
   • Tiada pratonton.
   • Semuanya dalam bahasa Inggeris.
   • Tiada galeri ikon sedia.

4. 
   

   • Antara muka yang mudah.
   • Tiada apa-apa tambahan.
   • Tiada galeri ikon sedia.
   • Anda tidak boleh melukis sendiri.
   • Anda tidak boleh memangkas imej semasa penjanaan.

5. 
   

   • Antara muka cantik yang mudah.
   • Tiada apa-apa tambahan.
   • Ia adalah mungkin untuk melukis sendiri atau menjana daripada gambar.
   • Terdapat galeri ikon sedia.
   • Anda boleh mengekalkan saiz ikon apabila anda menciptanya atau memampatkannya.
   • Pratonton.
   • Anda boleh membuat ikon animasi.
   • Sebilangan besar warna untuk dilukis.
   • Semuanya dalam bahasa Inggeris.

6. 
   

   • Terdapat pilihan saiz ikon 16x16 dan 32x32.
   • Tiada fungsi tambahan, hanya penciptaan favicon daripada imej.
   • Tiada pratonton.

7. 
   

   • Pratonton.
   • Koleksi besar ikon sedia.
   • Terdapat pilihan untuk memangkas imej.
   • Semuanya dalam bahasa Inggeris.
   • Terdapat ralat di tapak.
   • Antara muka yang menyusahkan.

8. 
   

   • Anda boleh memilih saiz ikon 16x16, 32x32, 48x48 dan 64x64.
   • Semuanya dalam bahasa Inggeris.

9. 
   

   • Tiada apa-apa tambahan.
   • Ia adalah mungkin untuk memilih saiz ikon.
   • Anda boleh melukis sendiri atau membuat favicon dalam talian daripada gambar.
   • Tiada pilihan untuk memangkas imej.
   • Tiada pratonton.

Saya memperkenalkan anda kepada hanya 10 perkhidmatan dalam talian, walaupun terdapat banyak lagi. Pada pendapat saya, ini adalah yang paling popular di kalangan semua. Jika anda menggunakan mana-mana yang lain, tulis mereka dalam komen, ia akan menjadi menarik bagi saya dan pembaca lain untuk mengetahui tentang mereka.

Dan sekarang, seperti yang dijanjikan, TOP-5 perkhidmatan yang mudah dan berkualiti tinggi, pada pendapat saya.

Ini adalah lima teratas saya. Saya ingin tahu perkhidmatan mana yang akan anda letakkan di tempat pertama, dan yang mana pada akhirnya? Saya akan gembira mendengar jawapan dalam komen.

P.S. Jika anda masih belum membuat favicon untuk diri sendiri, maka pastikan anda menyemak tapak tersebut faviconka.ru. Di atasnya anda akan menemui lebih daripada 2,000 ikon sedia untuk setiap citarasa. Saya harap artikel itu berguna kepada anda dan anda mendapati perkhidmatan anda untuk membuat favicon dalam talian.

Bahagian penting tapak web moden ialah ikon Favicon, yang membolehkan anda mengenal pasti sumber tertentu dengan cepat dalam senarai tab penyemak imbas. Sukar juga untuk membayangkan program komputer tanpa label uniknya sendiri. Pada masa yang sama, tapak dan perisian dalam kes ini disatukan oleh perincian yang tidak sepenuhnya jelas - kedua-duanya menggunakan ikon dalam format ICO.

Imej-imej kecil ini boleh dibuat terima kasih kepada program khas dan dengan bantuan perkhidmatan dalam talian. Ngomong-ngomong, ia adalah yang terakhir untuk tujuan sedemikian yang lebih popular, dan kami akan mempertimbangkan beberapa sumber sedemikian dengan anda dalam artikel ini.

Kerja grafik bukanlah kategori perkhidmatan web yang paling popular, tetapi mengenai penjanaan ikon, pastinya terdapat banyak pilihan. Menurut prinsip operasi, sumber tersebut boleh dibahagikan kepada sumber di mana anda melukis gambar sendiri, dan tapak yang membolehkan anda menukar imej yang sudah siap menjadi ICO. Tetapi pada asasnya semua penjana ikon menawarkan kedua-duanya.

Kaedah 1: Editor Ikon X

Perkhidmatan ini ialah penyelesaian yang paling berfungsi untuk mencipta imej ICO. Aplikasi web membolehkan anda melukis ikon secara terperinci secara manual atau menggunakan imej yang sudah siap. Kelebihan utama alat ini ialah keupayaan untuk mengeksport imej dengan resolusi sehingga 64×64.

Jadi, jika anda perlu mencipta satu set keseluruhan jenis ikon yang sama dengan saiz yang berbeza, anda tidak akan menemui apa-apa yang lebih baik daripada Editor X-Icon untuk tujuan ini.

Kaedah 2: Favicon.ru

Jika anda perlu menjana ikon favicon dengan resolusi 16x16 untuk tapak web, perkhidmatan dalam talian bahasa Rusia Favicon.ru juga boleh berfungsi sebagai alat yang sangat baik. Seperti dalam kes penyelesaian sebelumnya, di sini anda boleh melukis ikon sendiri, mewarna setiap piksel secara berasingan, atau mencipta favicon daripada imej yang telah siap.

Akibatnya, fail ICO disimpan pada PC anda, iaitu imej 16x16 piksel. Perkhidmatan ini sesuai untuk mereka yang hanya perlu menukar imej menjadi ikon kecil. Walau bagaimanapun, ia tidak dilarang untuk menunjukkan imaginasi di Favicon.ru.

Kaedah 3: Favicon.cc

Sama seperti yang sebelumnya dalam nama dan dalam prinsip operasi, tetapi penjana ikon yang lebih maju. Selain mencipta imej 16×16 biasa, perkhidmatan ini memudahkan untuk melukis favicon.ico animasi untuk tapak anda. Selain itu, sumber tersebut mengandungi beribu-ribu ikon tersuai yang tersedia untuk muat turun percuma.

Jika antara muka bahasa Inggeris tidak mengganggu anda, maka sama sekali tidak ada hujah yang memihak untuk bekerja dengan perkhidmatan sebelumnya. Selain fakta bahawa Favicon.cc boleh menjana ikon animasi, sumber itu juga mengiktiraf dengan betul ketelusan pada imej yang diimport, yang, malangnya, rakan sejawat bahasa Rusia itu dilucutkan.

Kaedah 4: Favicon.by

Pilihan lain untuk penjana ikon favicon untuk tapak web. Ia adalah mungkin untuk mencipta ikon dari awal atau berdasarkan imej tertentu. Di antara perbezaannya, seseorang boleh memilih fungsi mengimport gambar daripada sumber web pihak ketiga dan antara muka yang agak bergaya dan ringkas.

Secara umum, tidak ada perbezaan dalam bekerja dengan perkhidmatan yang telah dibincangkan dalam artikel ini, bagaimanapun, sumber Favicon.by mengatasi dengan lebih baik dengan menukar imej kepada ICO, dan ini agak mudah untuk diperhatikan.

Kaedah 5: Tukar Dalam Talian

Berkemungkinan anda sudah mengetahui tapak ini sebagai penukar fail dalam talian yang hampir omnivor. Tetapi tidak semua orang tahu bahawa ini adalah salah satu alat terbaik untuk menukar mana-mana imej kepada ICO. Hasilnya, anda boleh mendapatkan ikon dengan resolusi sehingga 256×256 piksel.

Seperti yang anda lihat, mencipta ikon ICO menggunakan tapak web Tukar Dalam Talian tidak sukar sama sekali, dan ia dilakukan hanya dalam beberapa klik tetikus.

Pengajaran baru dalam gaya bengkel dan kali ini kita belajar rahsia favicon. favicon - ikon kecil yang dipaparkan dalam penanda halaman dan bar penyemak imbas. Jika anda mempunyai tapak web anda sendiri dan ingin membandingkan dengan orang lain walaupun dalam perkara kecil - favicon perlu. Yang paling berfaedah, sudah tentu, ia kelihatan antara penanda halaman, dengan latar belakang senarai pudar alamat tanpa sebarang pengenalan grafik. Walau bagaimanapun, pelajaran kami bukan tentang cara melampirkan favicon pada baris penyemak imbas, tetapi tentang cara melukis favicon anda sendiri di Photoshop.

Dalam format apakah favicon harus disimpan?

Semuanya bergantung pada penyemak imbas. Untuk Microsoft Explorer format ikon muat ICO. Kami telah menemui format ini semasa kami membuat kursor. Untuk pelayar lain dari Google Chrome sebelum ini Apple Safari fit biasa gif atau PNG. favicon mungkin lut sinar. Untuk melakukan ini, ia mesti disimpan dalam lut sinar PNG, dan kemudian tukar kepada format ICO. Anda boleh melakukannya dalam program yang baik IcoFX. Walau bagaimanapun, terdapat banyak tapak pihak ketiga untuk menjana favicon, dan yang paling jelas ialah www.favicon.ru

Bagaimana untuk meletakkan favicon di laman web?

Bagaimana untuk memastikan itu favicon adakah ia akan berkesan? 4 syarat mesti dipenuhi.

• Fail itu hendaklah dipanggil - favicon.
• Saiz favicon 16 pada 16px
• Tempat terbaik untuk favicon ialah folder akar tapak.
• Tulis alamat ikon dalam tag meta kepala dalam indeks tapak.

Dalam HTML ia kelihatan seperti ini:

Anda boleh mencipta beberapa ikon untuk pelayar yang berbeza, contohnya satu dalam format ICO, dan yang lain dalam PNG dan semua ini ditunjukkan melalui tag pautan . Pelayar moden selalunya mencari fail dalam tapak akar yang dipanggil favicon, walau bagaimanapun, yang pasti, tidak ada salahnya untuk menunjukkan pautan yang tepat.

Buat favicon dalam Photoshop

Buat favicon sangat ringkas. Adakah anda mahu melakukan perkara yang sama favicon seperti Vkontakte atau Odnoklassniki? Baik favicon Anda tidak boleh melakukannya dengan mengurangkan gambar besar dalam semua jenis "penjana" favicon, yang banyak terdapat di Internet. Favicon sangat kecil. Sebenarnya, kami adalah sejenis seni piksel, yang mempunyai ciri-ciri tersendiri. Anda tidak boleh menulis surat dan hanya mengurangkannya 16px .

Suka favicon akan menjadi kabur dan kabur, kerana tepi huruf akan memanjang beberapa piksel apabila diubah saiznya. Dapatkan agak anti alias, yang biasanya merupakan perkara yang baik, tetapi dalam kes seni piksel, peralihan sedemikian tidak diperlukan. Sebaliknya, adalah wajar untuk mengelakkan "koyak" yang berlebihan pada kebulatan, jika tidak, ia akan menjadi hello gif 1999.

Buat fail bersaiz 16 X 16px . Kami akan mencipta lut sinar yang sangat mudah favicon dengan dalam bentuk surat, dengan sedikit mendalam. Kedalaman akan dicipta oleh bayang-bayang dan kecerunan.

Lukis latar belakang

Mengapa dalam intro pelajaran ini anda melihat yang besar licin dan dijilat favicon? Kerana saya menambahnya untuk pengenalan kepada pelajaran. Bagaimana saya berjaya membesarkan imej 16px? Sangat mudah, saya sentiasa bekerja dalam vektor jika boleh menggunakannya dan jika ia masuk akal. Dan vektor dengan mudah memindahkan sebarang transformasi dan tidak kehilangan kualiti.

Pilih alat Alat Segiempat Bulat. Pada panel tetapan, pilih mod, yang akan membolehkan anda melukis dalam vektor. Dalam menu lungsur turun panel, tanda semak - Snap To Pixels. Ini adalah perlu supaya laluan vektor terkunci kepada piksel dan tidak melukis "di antara" mereka.

Kami mempunyai permukaan favicon, dan tepi lut sinar akan menghasilkan kebulatan yang licin. Kini tiba masanya untuk menghilangkan latar belakang putih, kita tidak memerlukannya. Matikan keterlihatannya. Atau klik dua kali pada lapisan, mengubahnya menjadi lapisan biasa, dan kemudian padamkannya.