Favikon yaratmaq üçün proqram. Favikon yaratmaq üçün universal bir yol. Logaster-də ikon yaratma prosesi necə işləyir?

19.11.2023 -

Bu gün biz bir daha bloq üçün şəkillər, yəni favicon adlanan layihə ikonu haqqında danışacağıq. Gəlin favikonun nə olduğunu, onu necə düzəltməyi və saytımıza qoşmağı müzakirə edək. Həm də bu şəkil hansı ölçüdə olmalıdır və niyə hər biriniz onu quraşdırmalısınız. Axı, hətta bu ikon blogunuza gələn trafikə təsir edə bilər.

Favikon nədir?

Favikon anlayışı olduqca sadədir və Latın dilində iki sözdən (əslində, İnternetdəki hər şey kimi) əmələ gəlir - favoritlər simvolu. Bu, öz növbəsində, simvol və ya nişan kimi tərcümə edilə bilər. Mənası belə ola bilər; sevimli simge və ya sevimli. Niyə bu ad? Bu sadədir, sevimlilər brauzerdəki əlfəcinlərin adıdır, ona görə də ad əlfəcin və ya brauzer nişanı üçün şəkil kimi şərh edilə bilər. Axı, bir sayt açdığınız zaman və ya əlfəcinlərinizə əlavə etdiyiniz zaman biz təkcə onun adını deyil, həm də favikon adlanan şəklini də görürük. Ümid edirəm bunun necə heyvan olduğunu izah edə bildim?

Niyə favikona ehtiyacınız ola bilər?

Yaxşı, hər şey bu qədər sadədir, İnternet layihəsini fərdiləşdirmək üçün favikon lazımdır. Yəni bloqunuzun başqa bir fərqləndirici xüsusiyyəti bu şəkil olacaq ki, bu da nəinki brauzerdə saytınızdan istifadəni daha rahat edəcək, həm də düzgün yanaşma ilə layihənizi ziyarət edənlərin sayını artıracaq.

Birincisi, brauzerdə rahat ola bilər, niyə? Məsələn, bir dəstə tab açıq olduqda, hazırda mənə lazım olan saytın simvolu ilə hərəkət edə bilirəm. Yəni mənim kimi insanlar üçün əlverişlidir.

İkincisi, bu şəkil cəlbedicidirsə və başqaları arasında fərqlənirsə, lakin fanatizm olmadan Yandex axtarış motorundan resursunuza daha çox ziyarətçi cəlb edə bilər. Yandex-in axtarış nəticələrinin ilk doqquz səhifəsində favikon qoyması sayəsində bloqunuz digərlərindən fərqlənəcək. Məhz bu səbəbdən Layihənizə favikon qoşmaq barədə düşünməyə dəyər. İlk axtarış səhifələri belə görünür.

Favikon yaradınçətin olmayacaq, çünki şəbəkədə adi şəkillərdən favikon yarada bilən və onu sıfırdan özünüz çəkməyə imkan verən çox sayda generator var. Siz həmçinin Photoshop-dan istifadə edərək şəkil yarada və sonra onu istədiyiniz formata çevirmək üçün generatorlardan istifadə edə bilərsiniz.

Adi şəkillər və nişanlar arasındakı fərqlər kiçikdir, lakin onlar mövcuddur. Şəkil sadə olmalıdır (mürəkkəb qrafik elementləri görmək çətin olacaq), 16x16 piksel ölçüdə və ico formatında olmalıdır. Siz, əlbəttə ki, png və ya gif formatlarından istifadə edə bilərsiniz, lakin bu cür şəkillər bütün brauzerlərdə göstərilməyəcək, buna görə də ən yaxşı seçim ico formatından istifadə etməkdir.

Bu ikonanın necə hazırlanacağını sizə hər addımda izah etməyin mənasını görmürəm, çünki hər kəs bunun öhdəsindən gələ bilər. Əsas odur ki, şəkillərə olan tələbləri nəzərə alın və hər şey nəticə verəcəkdir. Bir sözlə, bir şəkil yükləyin və ya çəkin və onlayn generatorlardan istifadə edərək favikon yaradın. Onlayn generatorları Google və ya Yandex axtarışında - favicon yazmaqla tapmaq olar. Və ya burada sıfırdan çəkə və ya bitmiş bir şəkildən favikon edə biləcəyiniz bir xidmətə keçid var: http://favicon.ru/

Veb sayt üçün favikonu necə bağlamaq olar?

Yaxşı, ikona hazırdır, indi brauzerləri necə işə sala bilərəm sayt üçün favikon göstərin?

Xidmətdən istifadə etdikdən sonra bloqunuz üçün hazır simvolu kompüterinizə endirin. Və şəkli FTP müştərisindən istifadə edərək bloqun kök qovluğuna (public_html/site/your_file_in_ico_format) və ya hər hansı digərinə yükləyin. Ancaq kök qovluğuna getmək daha yaxşıdır, faylın yolunu tərtib edərkən daha asandır.

Beləliklə, fayl yükləndi, sonra nə olacaq? İndi faylın kök qovluğuna yükləndiyinə şübhə etdiyinizi yoxlaya bilərsiniz: your_site/favicon.ico. Fayl kök qovluğuna endirilibsə, sonra bu ünvanda göstəriləcək. Sonra teqlər arasında resursun hər səhifəsi üçün yazmalısınız Və aşağıdakı kod:

Və simvol başqa bir qovluqdadırsa, o zaman belə olmalıdır:

Bu kod bir çox İnternet resursları üçün ümumi qəbul edilmiş hesab olunur və istənilən mühərrikdə işləyəcək. Ancaq fərqli mühərriklər üçün fərqli yaza bilərsiniz. Məsələn, WordPress üçün bu kod belə görünəcək:

/favicon.ico" />

Yalnız bu seçimdə simvol şablonun olduğu qovluqda olmalıdır. Məsələn (public_html/site/wp-content/themes/your-theme/favicon.ico).

Bu addımlardan sonra sayt üçün favikon işə başlayacaq və siz bunu brauzerinizin nişanlarında görə bilərsiniz. Ancaq Yandex axtarış nəticələrində fayl dərhal görünməyəcək, əvvəlcə Yandex robotu işarəni indeksləşdirənə qədər gözləməlisiniz və yalnız bundan sonra axtarış nəticələrində görünməyə başlayacaq və yalnız bloqunuz aktiv olduqda; axtarış nəticələrinin ilk doqquz səhifəsindən biri.

Hamısı budur. Bir şey aydın deyilsə, soruşun və biz bunu anlayacağıq. Yenidən görüşərik!

Salam, blog saytının əziz oxucuları. Bugünkü məqalədə söhbət Favicon.ico adlanan ikonlara yönəldiləcək. Favikonun nə olduğunu, niyə onu veb saytınıza quraşdırmalı olduğunuzu və lazımi ölçüdə simvolu özünüz necə yaratacağınızı anlayacağıq.

Prinsipcə, bir favikon yaratmaq üçün hər hansı bir xüsusi onlayn generatordan istifadə etmək lazım deyil, baxmayaraq ki, bu, olduqca rahat və sadədir. Siz bunu Photoshop-da etməyə cəhd edə bilərsiniz, lakin standart olaraq, təəssüf ki, şəkilləri ICO formatında saxlaya bilmir. Buna görə də, Photoshop-a ICO ilə işləməyi öyrətmək üçün xüsusi bir plagin quraşdırmalı olacaqsınız.

Ancaq Photoshop ilə (həmçinin onunla) rahat deyilsinizsə, aşağıda sadalanan çoxsaylı onlayn xidmətlərdən birini istifadə etmək sizin üçün daha rahat olacaq. Üstəlik, bəzilərində siz tamamilə sıfırdan yeni ikona çəkə, bəzilərində isə artıq mövcud olan (sizə uyğun olan) şəkli favikon formatına çevirə biləcəksiniz.

Ən asan seçim bəzi onlayn qalereyadan və ya kataloqdan Favicon kolleksiyasını yükləməkdir. Onları harada əldə edə biləcəyiniz haqqında aşağıda oxuyun.

Favikonu onlayn olaraq necə yaratmaq olar və onların kolleksiyasını haradan yükləyə bilərsiniz

Əvvəlcə xidmətlərdən nümunələr verim (sözdə favikon generatoru), burada heç bir xüsusi bacarıq olmadan veb saytınız üçün tamamilə layiqli mini-loqo dizayn edə bilərsiniz və ya ən azı avtomatik olaraq uyğun şəkli sayta favikon yükləmək üçün lazım olan formata çevirə bilərsiniz.

Faviс.cc— olduqca rahat onlayn favikon generatoru. Bundan istifadə edərək, məsələn, sıfırdan öz ikonanızı yarada bilərsiniz (tamamilə eksklüziv), onu piksel piksel çəkə bilərsiniz. Bunu etmək üçün xidmət pəncərəsinin sol tərəfindəki “Yeni Favkon Yarat” düyməsini sıxmalısınız.
Generator səhifəsinin mərkəzində hər kvadratın gələcək favikonunuzun bir pikseli olduğu bir sahə var. Taskınız bu kvadratları müxtəlif rənglərlə boyamaqdır. Bir kvadratı rənglə rəngləmək üçün "Rəng seçici" sahəsində xidmət pəncərəsinin sağ tərəfindəki qutuyu işarələməlisiniz, orada yerləşən palitradan istədiyiniz rəngi seçin və istədiyiniz kvadratı vurun. Yanlış kölgələri aradan qaldırmaq üçün "şəffaf" qutusunu seçin və kvadratı vurun, nəticədə rəngsiz (şəffaf) olacaq.
Generator kətanı boyunca bir pikseli hərəkət etdirmək üçün "hərəkət et" qutusunu yoxlamaq lazımdır. İşinizin nəticəsini kətanın altındakı “Ön baxış” sahəsində real miqyasda görə bilərsiniz. Yaratdığınız Favikon sizə uyğundursa, onu kompüterinizdə saxlamaq üçün “Yükləmə” düyməsini sıxın. Nəticədə, siz daha sonra yükləyə və hosting serverinə yükləyə biləcəyiniz bir qrafik fayl alacaqsınız.
İndi sıfırdan veb saytınız üçün mini loqotip hazırlamağı bilirsiniz. Ancaq qrafik istedadınız yoxdursa, onda onlayn generator xidmətindən istifadə edə bilərsiniz gələcək favikon üçün hər hansı bir şəkil yükləyin, boşluq kimi xidmət edəcək. Şəkil tamamilə istənilən ölçüdə və formatda ola bilər. Simge faylını onlayn xidmətə yükləmək üçün xidmət pəncərəsinin sol tərəfindəki “Şəkili idxal et” düyməsini sıxmalısınız.
Açılan pəncərədə "Gözdən keçir" düyməsini basın və kompüterinizdə uyğun bir şəkil tapın. Sonra şəklinizi 16-dan 16-ya (kvadrat) çevirərkən onun tərəf nisbəti ilə nə edəcəyinizi seçin. Yüklədiyiniz şəkil kvadrat deyilsə, bu doğrudur. Bu halda, iki seçim mümkündür: aspekt nisbətini dəyişmədən buraxın (Ölçüləri saxla) və ya şəkli kvadrat görünüşə çevirin (Kvadrata büzülmə nişanı). İkinci halda, gələcək favikonun təsviri baltalardan biri boyunca təhrif ediləcəkdir.
Onlayn generatora yükləmək və şəklinizi çevirmək üçün "Yüklə" düyməsini sıxmalısınız. Ondan yaradılmış Favicon.ico sizin çəkdiyiniz kimi redaktə edilə bilər. Şah əsəriniz üzərində işləməyi başa vurduqdan sonra onu kompüterinizə yükləmək üçün “Yükləmə” düyməsini sıxın.
Bu onlayn xidmət həmçinin digər istifadəçilər tərəfindən yaradılan və ictimaiyyətə təqdim edilən favikon kolleksiyalarından istifadə etmək imkanına malikdir. Qalereyada mövcud olan eksponatlara baxmaq üçün siz pəncərənin sol tərəfində ya yaradılma tarixinə görə çeşidlənmiş kolleksiyalara baxmaq üçün “Son Favikonlar” düyməsini, ya da baxmaq üçün “Ən yüksək qiymətləndirilən Favikonlar” düyməsini sıxmalısınız. qalereyalar reytinqə görə sıralanıb.
Favicon.ru- bir dəfə bu xidmət yuxarıda təsvir edilən onlayn generatordan daha sadə idi, lakin son vaxtlar demək olar ki, onun analoqu oldu, ancaq rus dilində. Favicon.ru nəinki sizdə (kompüterinizdə və ya internetdə) mövcud olan istənilən şəkli 16x16 piksel ölçüdə ICO formatına çevirməyə imkan vermir, həm də onu sıfırdan piksel-piksel çəkməyə imkan verir.
Onlayn favikon generatorunun bu versiyası, bəlkə də, yalnız yerli olduğuna görə diqqət çəkir. Ona görə də o, bu məqaləyə son qoydu. Beləliklə, onunla işləmək üçün əsas səhifənin yuxarısındakı "Fayl seçin" düyməsini vurmalı və kompüterinizdə istədiyiniz şəklin yolunu göstərməlisiniz. Endirilən və Favicon.ico formatına çevrilən şəkil düzəldilə və sonra kompüterinizdə saxlanıla bilər. Hər şey sadə və rahatdır.
Logaster.ru onlayn loqo generatorudur, lakin loqolardan əlavə, favikon da yaradır. Bütün digər xidmətlərdən fərqli olaraq, siz favikon dizaynını çəkmək və ya onu loqodan çevirmək lazım deyil.
Favikon yaratmaq üçün əvvəlcə saytın və ya şirkətin adını daxil etməli və fəaliyyət növünü seçməlisiniz. Xidmət istifadəyə hazır bir neçə onlarla favikon şablonu təklif edəcək. Favikonun necə yaradılması haqqında daha çox oxuya bilərsiniz. Favicon.ico yaratdıqdan sonra faylı ICO və ya PNG formatında kompüterinizə endirə bilərsiniz.

Bundan sonra, yalnız "Yarat" düyməsini sıxmaq lazımdır. Açılan səhifədə ortaya çıxan favikonu yükləmək üçün bir keçid görəcəksiniz.

Onlayn generatorların, kolleksiyaların və favikonların qalereyalarının seçimi

Əgər nədənsə yuxarıda təsvir olunan favikon generatorunu bəyənməmisinizsə, onda şansınızı aşağıdakılardan birində sınamağı təklif edə bilərəm. pulsuz onlayn xidmətlər:

FaviconGenerator - kompüterinizdən yüklənmiş istənilən şəkli istədiyiniz favikon formatına çevirməyə imkan verir (şəkilləri yükləyə bilərsiniz).
AntiFavicon olduqca maraqlı bir Favicon Generatorudur. Bunun üzərinə edə bilərsiniz yazısı olan favikon yaradın. "Üst mətn" və "Aşağı mətn" sahələrinə yazının mətnini daxil etməli və "Rənglər" sahəsində rəng sxemini tənzimləməlisiniz.
Pics-dən FavIcon başqa bir sadə onlayn xidmətdir - siz kompüterinizdə şəklin yolunu müəyyənləşdirirsiniz, nəticədə əldə olunan faylı ICO və GIF formatında çevirib yükləyirsiniz.
Iconj - diqqətəlayiq odur ki, siz ya yaradılmış simvolu yükləyə və ya onu xidmətdə qoyub bu fayla keçid ala bilərsiniz.
DeGraeve funksionallığı baxımından əvvəllər nəzərdən keçirilmiş Favicon.cc-ə bənzər kifayət qədər güclü Favicon Generatordur. Burada da hər şeyi ya sıfırdan edə bilərsiniz, ya da sonradan uyğun ölçüdə ICO formatında düzəldilə və endirilə bilən bir şəkil yükləyə bilərsiniz.
Generator - həm yüklənmiş şəkildən favikon yaratmağa, həm də onu xüsusi redaktorda sıfırdan yaratmağa imkan verir.
Onlayn ikon redaktoru favicon.ico - yaxşı, o, hər şeyi edir - sıfırdan favikonlar yaratmaq və mövcud təsviri dəyişdirmək.
Onlayn Favicon mini loqotiplər yaratmaq və redaktə etmək üçün çox funksional vasitədir
Pulsuz Favicon Generator - yuxarıdakı siyahıdan heç bir şey sizə uyğun gəlmədiyi təqdirdə.
Favicon generator - sadə və zövqlü...

Sayt üçün mini loqotipinizin eksklüzivliyi sizi maraqlandırmırsa və redaktorlar və generatorlarla məşğul ola bilmirsinizsə, o zaman bir qəpik olan saytlarda özünüz üçün uyğun bir simvol seçə bilərsiniz. Axı, əslində, İnternetdən yükləyə və ya kompüterinizin dərinliklərində tapa biləcəyiniz 16 ilə 16 piksel ölçülü hər hansı bir simvol bizə uyğun olacaq.

Ancaq yadda saxlamaq lazımdır ki, favikon ilk növbədə istifadəçilərin diqqətini cəlb etməlidir. İdeal olaraq, istifadəçi sadəcə Favicon-a baxaraq saytınızı tanıya bilər, ona görə də onun unikal olması daha yaxşı olar, lakin siz internetdə qeyri-adi nəsə axtara bilərsiniz.

Əgər arzunuz və ya imkanınız yoxdursa (sən sənətkar deyilsən və heç vaxt olmamısan), onda ən asan yol axtarışa cəhd etməkdir. pulsuz favikon kolleksiyaları olan qalereyalar:

Iconj digər insanlar tərəfindən hazırlanmış və ictimaiyyətə təqdim edilən kifayət qədər böyük nişanlar toplusudur
Favicon.cc - bütün hallar üçün 55 min müxtəlif seçim. Yalnız FireFox brauzerində görünəcək cizgi favikonları da var.
Favicon Qalereyası - uyğun ölçülü bir neçə daha çox nişanlar

Əgər başqa oxşar resursları bilirsinizsə, mən sizin linklərinizi bu siyahıya əlavə edəcəyəm.

Favicon-u vebsaytda necə quraşdırmaq və ona gedən yolu necə təyin etmək olar

Brauzeriniz və Yandex axtarış robotunuz olacaq favikonu ilk növbədə saytınızın kök qovluğunda axtarın. Buna görə də, sadəcə FTP vasitəsilə sayta qoşula və Favicon.ico faylınızı onun kök qovluğuna (adətən public_htm və ya htdocs qovluqları) yükləyə bilərsiniz (adını kiçik hərflərlə yazmaq daha yaxşıdır). İndi resursunuzu hansısa brauzerdə açın və nişandakı işarənin dəyişib-dəyişmədiyinə baxın. Dəyişib? Yox? Yaxşı, yaxşıdır.

Əgər siz favikonu bu şəkildə yerləşdirə bilmirsinizsə, o zaman məcbur ola bilərsiniz, çünki... Tez-tez olur ki, köhnə versiya keşdən yüklənir. Siz cəhd edə bilərsiniz, mənim üçün keşi təmizləmədən edilən dəyişikliklərə ən yaxşı cavab verir. Problem brauzer önbelleğinde deyilsə, bu o deməkdir ki saytınızın favikon üçün fərqli yeri var, kök qovluqdan fərqlidir. Bunu necə yoxlaya bilərəm?

Saytınızdakı istənilən səhifənin mənbə kodunu açın. Onun mənbə koduna baxmaq üçün səhifəni sağ klikləyin və müvafiq kontekst menyusunu seçin (məsələn, köhnə Opera-da “Mənbə kodu” və ya Mazila Firefox-da “Səhifənin mənbə kodu” və ya “Səhifə koduna bax”). Google Chrome və ya IE-də "HTML koduna bax") və ya Ctrl+U düymələr kombinasiyasını basın. İndi səhifənin yuxarı hissəsində favicon.ico yolunu müəyyən edən sətir koduna baxın.

Bu kimi bir şey görünə bilər:

İndi bu yolu bilərək, FTP vasitəsilə yenidən qoşula və saytda olanı əvəz edərək, göstərilən yoldan istifadə edərək favikonunuzu yükləyə bilərsiniz. Brauzerin ünvan çubuğunda yenidən heç bir dəyişiklik baş verməyibsə, brauzer önbelleğini yenidən təmizləməyə cəhd edin.

IN Joomla Favicon adətən istifadə etdiyiniz şablonun olduğu qovluqda yaşayır (Joomla 1.5-də ona gedən yol eyni şablonun kataloqundan index.php faylında yazılmışdı, lakin Joomla 3-də hər şey bir az daha mürəkkəbləşdi). Bunlar. Joomla-da favikonu dəyişdirmək üçün sizə lazım olan tək şey bu yolu izləmək və favicon.ico faylınızı ora yükləmək və dəyişdirmə ilə bağlı suala müsbət cavab verməkdir:

/templates/folder_with_the_design_template/favicon.ico

Favicon faylı WordPress defolt olaraq, istifadə etdiyiniz mövzu ilə qovluqda da ola bilər (ona gedən yol da orada qurulub):

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

Ümumiyyətlə, istəsən favikonunuza gedən yolu təyin edin və ya dəyişdirin, həm brauzerlər, həm də Yandex axtarış robotu tərəfindən başa düşüləcək, sonra onu Joomla, WordPress və ya hər hansı digər mühərrik üçün müvafiq şablon faylına, açılış və bağlama teqləri arasında yazmalısınız. BAŞ, aşağıdakı kod sətirləri:

Bu sətirləri hansı şablon faylına yazmağınız saytınızın mühərrikindən asılıdır. Məsələn, in WordPress-də redaktə üçün header.php faylını açmalısınız: wp-content/themes/Folder_with_your_theme_design. Redaktorda header.php-ni açın və ən başlanğıcda açılış Html HEAD teqini tapın. Ondan sonra istənilən yerdə, lakin HEAD-ın bağlanmasından əvvəl mini-loqo qrafik faylınızın yolunu göstərən yuxarıdakı kod sətirlərindən birini yazın.

Necə quraşdırmaq olar animasiyalı favikon? Prinsipcə, adi ilə eynidir. Yeganə fərq, brauzerlərə və Yandex axtarış robotuna istədiyiniz qrafik faylın yolunu göstərdiyiniz veb sayt şablonunuza daxil edilmiş kod olacaq. Fakt budur ki, animasiya edilmiş Favicon GIF genişlənməsinə sahib olacaq və buna görə də kod sətirlərində belə bir şey yazmalısınız:

Animasiya edilmiş favikonlarla adi olanlar arasındakı bütün fərq budur. Ancaq unutmayın ki, animasiya simvolu yalnız FireFox-da işləyəcək, digər brauzerlərdə statik olacaq. Yandex, animasiya edilmiş favikonunuzu yükləyərkən onu statik PNG formatına çevirir. Ancaq mənim fikrimcə, əziyyət çəkməyə dəyməz - bir sayt üçün adi mini loqo əvəzinə animasiya quraşdırmağın mənası yoxdur. Ancaq bu, sadəcə mənim IMHO-dur.

Sənə uğurlar! Tezliklə blog saytının səhifələrində görüşənədək

Sizi maraqlandıra bilər

Onlayn FTP müştəri Net2ftp və Google Alerts - veb ustaları üçün faydalı xidmətlər
Pr-cy, Cy-pr, Be1, Xseo və digər pulsuz onlayn xidmətlərdə veb saytların təhlili
Sayt üçün nişanlar, nişanlar, fonlar, şəkillər və loqolar (onlayn xidmətlər IconFinder, Freepik, PSDGraphics və s.)
İstifadə qabiliyyəti - veb saytınızı ziyarətçilər üçün necə rahat etmək və məqalələrinizi mümkün qədər uzun müddət oxumağa çalışmaq
MegaIndex Tools - veb ustaları və optimallaşdırıcılar üçün alətlər dəsti
Browsershots-da veb sayt tərtibatının brauzerlər arası uyğunluğunu necə yoxlamaq və yeni materiallar görünəndə ping göndərməyi necə qurmaq olar
Http - bu nədir, başlıqlara necə baxmaq və serverin cavab kodunu yoxlamaq, 200, 301, 302, 404 və 500 kodları nə deməkdir?
Crossposting - bu nədir və bunu necə düzgün etmək olar

İndi şəxsi sayt simvolu - Favicon - istənilən veb resursun bir növ vizit kartıdır. Bu işarə istədiyiniz portalı yalnız brauzer nişanlarının siyahısında deyil, həm də, məsələn, Yandex axtarış nəticələrində vurğulayır. Favicon, bir qayda olaraq, sayt məlumatlılığını artırmaqdan başqa heç bir funksiyanı yerinə yetirmir.

Öz resursunuz üçün simvol yaratmaq olduqca sadədir: uyğun bir şəkil tapırsınız və ya qrafik redaktordan istifadə edərək özünüz çəkirsiniz, sonra şəkli istədiyiniz ölçüyə - adətən 16x16 pikselə sıxırsınız. Nəticəni favicon.ico faylında qeyd edin və saytın kök qovluğuna qoyun. Lakin bu prosedur İnternetdə mövcud olan Favicon generatorlarından birini istifadə edərək əhəmiyyətli dərəcədə sadələşdirilə bilər.

Əksər veb ikon redaktorları Favikonların yaradılması üçün bütün lazımi alətləri təklif edir. Bu vəziyyətdə, sıfırdan bir şəkil çəkmək lazım deyil - hazır təsvirdən istifadə edə bilərsiniz.

Metod 1: Favicon.by

Rusdilli onlayn favikon generatoru: sadə və vizual. Daxili 16x16 kətan və qələm, silgi, damcı və doldurma kimi alətlərin minimal siyahısından istifadə edərək özünüz ikona çəkməyə imkan verir. Bütün RGB rəngləri və şəffaflıq dəstəyi ilə bir palitrası var.

İstəyirsinizsə, hazır bir görüntüyü generatora yükləyə bilərsiniz - kompüterinizdən və ya üçüncü tərəfin veb resursundan. İdxal edilən şəkil də kətan üzərinə yerləşdiriləcək və redaktə üçün əlçatan olacaq.

Nəticədə siz favicon adlı qrafik ICO faylı və 16x16 piksel təsvir ölçüsü əldə edirsiniz. Bu ikon artıq veb saytınız üçün ikona kimi istifadə olunmağa hazırdır.

Metod 2: X-Icon Redaktoru

64x64 piksel ölçüsünə qədər təfərrüatlı nişanlar yaratmağa imkan verən HTML5 brauzer proqramı. Əvvəlki xidmətdən fərqli olaraq, X-Icon Editor daha çox rəsm alətinə malikdir və onların hər biri çevik şəkildə konfiqurasiya edilə bilər.

Favicon.by-də olduğu kimi burada da hazır şəkli sayta yükləyə və lazım olduqda onu düzgün redaktə edərək favikona çevirə bilərsiniz.

Favikona çevirmək istədiyiniz şəklin təfərrüatlarını qorumaq istəyirsinizsə, X-Icon Editor bunun üçün əladır. 64x64 piksel təsvir ölçüsündə nişanlar yaratmaq imkanı bu xidmətin əsas üstünlüyüdür.

Favikon (İngiliscə: Sevimli İkon) veb-sayta, brauzer nişanına baxarkən və ya onun əlfəcinlərində (“Sevimlilər”) brauzerin ünvan çubuğunda göstərilən xüsusi formatda kiçik işarədir (şəkil, şəkil).

favicon vebsaytınız, mini loqotipiniz üçün əlavə bəzəkdir. Yandex və Google axtarışlarında saytların siyahısına baxarkən də göstərilir və saytınızı digərlərindən fərqləndirir.

Niyə vebsayt üçün favikon lazımdır?

favicon saytınızın ticarət nişanıdır. Bu gün bir çox şirkətləri rəqiblərindən fərqləndirən fərqli favikon var. İşarənin istifadəçilər tərəfindən daha yaxşı yadda qalması üçün şirkətlər orada öz loqosunu göstərməlidirlər ki, bu da saytın başlığının elementlərindən biri olmalıdır. Favikondan istifadənin digər müsbət cəhəti odur ki, brauzerdə çoxlu sayda sayta baxarkən siz bütün səhifənin başlığını deyil, yalnız işarəni görürsünüz və siz getmək istədiyiniz nişanı dərhal və asanlıqla müəyyən edə bilərsiniz.

Favikonda nəyi göstərmək daha yaxşıdır?

İşarə saytın mövzusuna uyğun olmalıdır.
veb saytınız bu marka ilə əlaqəlidirsə. Eyni zamanda, müxtəlif səhifələr üçün müxtəlif markalar göstərilə bilər;
Klikləmək istədiyiniz favikondan istifadə edin, bu, Yandex və Google axtarışlarında baxarkən kliklənmə sürətini artıracaq;
Saytınızın müxtəlif bölmələri üçün bir neçə favikon dizaynı hazırlayın.
Müxtəlif tədbirlər üçün bir neçə favikon dizaynı hazırlayın (məsələn, Yeni il, Sevgililər Günü və ya Kosmonavtika Günü, :).

Yaranan faylı əsas indeks faylının (index.php) yerləşdiyi saytınızın kökünə yerləşdirin. Səhifənin baş hissəsində saytın favikonunun yerini brauzerə göstərmək üçün aşağıdakı sətri daxil edin:

Animasiyalı favikon necə hazırlanır?

ICO formatı animasiyanı dəstəkləmir. Lakin müasir brauzerlər kiçik şəkillər üçün GIF formatından istifadə etməyə imkan verir. Müasir brauzerlər üçün bir animasiya faylını (favicon.gif), Intertet Explorer kimi qədim brauzerlər üçün digərini (favicon.ico) təyin etmək mümkündür. Bunu etmək üçün baş hissəsinə aşağıdakı iki sətir əlavə edin:

Təbii ki, əvvəlcə hər iki faylı saytın kök qovluğuna yerləşdirməlisiniz.

Brauzerdə şəkillərin göstərilməsi qadağandırsa nə etməli?

Əgər səhifə koduna daxil edilmiş şəkil ilə favikon yaratsanız:

Sonra təsvirlər söndürüldükdə belə, ikona brauzerdə görünəcək. .

Veb saytdan favikon necə əldə etmək olar

Bütün webmasterlər favicon.ico-nu saytın kökündə yerləşdirmir. Favikon ünvanını əldə etmək üçün aşağıdakı skriptdən istifadə edin:

]*)link([^>]*)(rel="icon"|rel="qısayol işarəsi")([^>]*)>/iU", $html, $out)) ( $link_tag = $out əgər (preg_match("/href([s]*)=([s]*)"([^"]*)"/iU", $link_tag, $out)) ( $favicon = trim($out) ; əgər (strpos($favicon, "://")===false) $favicon = $url ($favicon, "/" ) ?>

Axtarış motorları Google, Yandex və favicon

Axtarış motoru robotları veb sayt nişanlarını keşləyir. Keşlənmiş nişanlar aşağıdakı sorğular üçün mövcuddur:

Bundan əlavə, Yandex sizi müxtəlif saytların nişanlarından “sprite” edə bilər:

iPhone və iPad üçün nişanlar

Şəkilə keçid göstərməsəniz belə, iPhone yenə də saytın kök qovluğunda apple-touch-icon.png adlı faylı axtaracaq və onu tapsa, şəkli ondan götürəcək, yuvarlaq künclərdə və vurğu avtomatik olaraq ona tətbiq olunacaq. Bunun qarşısını almaq üçün apple-touch-icon.png əvəzinə iPhone və iPad sahiblərini apple-touch-icon-precomposed.png yazmalısınız, çünki Onlar üçün 57x57 ölçülü gözəl bir ikona düzəldirik (yeri gəlmişkən, daha böyük ola bilər, lakin bu nahar ekranındakı simvolun standart ölçüsüdür), onu belə birləşdirir:

Favikonu dinamik olaraq necə dəyişmək olar?

DOM vasitəsilə etiket xassəsinin dəyərini dəyişməyə cəhd etsəniz, istədiyiniz nəticəni əldə etməyəcəksiniz. Səhifənin ikonasını dinamik şəkildə dəyişmək üçün əvvəlcə səhifənin başlığından köhnə işarəsi olan keçid etiketini silməli, sonra onu yeni məzmunla əlavə etməlisiniz. Bu belə edilir: // Yeni ikon faylına keçid var icon="new_favicon.ico"; var head = document.getElementsByTagName("head"); // Köhnə simvolu HEAD teqindən tapın və silin var links = head.getElementsByTagName("link"); üçün (var i = 0; i< 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);

HTML5 və favikon

Ölçülər atributu HTML5-ə əlavə edildi, bu sizə eyni ikonanın bir neçə fərqli versiyasını elan etməyə imkan verir və bunlar PNG faylları ola bilər:

Windows 8-də planşetlər üçün bir kafel necə elan etmək olar?

Windows 8.0 üçün reklam belə görünür:

Windows 8.1 və IE 11 browserconfig.xml-də elan edilmiş təsvirin çoxsaylı versiyasını gözləyir. Misal üçün:

Faylın adı dəyişdirilməyibsə, bunu bəyan etmək lazım deyil:

#2b5797

Bu gün çox maraqlı bir mövzuya toxunacağıq. Veb saytınızda işləyərkən gec-tez siz favikon yaratmalı olacaqsınız. Sadə dillə desək, favikon veb-saytınızın brauzerdəki nişanda görünən simvoludur. Saytınız Sevimlilərə əlavə edilibsə, onu brauzerinizin sürətli giriş sahəsində də görə bilərsiniz.

Ən populyar saytların favikonları

Hesab edirəm ki, favikon keyfiyyətli olmalıdır deməyin mənası yoxdur, çünki o, müəyyən dərəcədə saytınızın simasıdır. Bu yazıda ehtiyaclarımıza cavab verən favikonların necə yaradılacağını öyrənəcəyik, həmçinin onları çevirmək üçün xidmətlə tanış olacağıq. Aşağıda daha ətraflı oxuyun.

Video versiyası:

Favikon necə olmalıdır?

Favikonun özünü yaratmağa başlamazdan əvvəl, onların ideal olaraq nə olması lazım olduğuna diqqət yetirmək yaxşı olardı. Beləliklə, ideal favikon:

Aydın və başa düşüləndir
Yaxşı keyfiyyətdə hazırlanıb
Saytınızın mənasını çatdırır
Saytınızla ümumi üsluba malikdir
Digər saytların ikonlarından fərqlənir

Yuxarıda göstərilən parametrləri ideal favikon kimi təsnif etmək olar. Və saytımız üçün məhz belə bir simvol yaratmalıyıq. Bununla belə, favikonda konkret olaraq nəyin təsvir olunacağı ilə bağlı mübahisələr var. İnanıram ki, bu məsələdə saytınızın ümumi üslubundan və mövzusundan çıxış etməlisiniz. O, bəzi şəkil və ya mətndən ibarət ola bilər. Mətn favikonda yerləşdirilirsə, o, 2 hərfdən çox olmamalıdır. Əks halda, heç kim belə mətni oxuya bilməyəcək, çünki favikonun ölçüləri ümumiyyətlə 16*16 pikseldir.

Veb sayt nişanları hansı ölçülərdədir?

Bildiyiniz kimi, indi çoxlu sayda brauzerlər, monitorlar və cihazlar mövcuddur. Və onların favikon ölçüləri üçün tələbləri fərqlidir. Aşağıdakı ölçü seçimləri nəzərə alınmalıdır:

16*16px - standart favikon ölçüləri, əksər brauzerlər və cihazlar üçün uyğundur
32*32px - bəzi hallarda istifadə olunur internet Explorer Və Safari
57*57px - göstərərkən istifadə olunur iPhone
72*72px - göstərərkən istifadə olunur iPad
114*114px - retina displeylərində göstərildikdə istifadə olunur (57*2=114)
144*144px - retina displeylərində göstərildikdə istifadə olunur iPad (72*2=144)

Favikonlar hansı formatda olmalıdır?

Əvvəllər brauzerlər yalnız formatda favikonları qəbul edirdilər "ico". İndi onlar digər formatları, o cümlədən də başa düşməyi öyrəndilər "png". Bizim vəziyyətimizdə bir daşla 2 quş vuracağıq. Əvvəlcə formatda favikon yaradacağıq "png", sonra onu çevirin "ico".

Favikon yaratmağın bir neçə yolu

Bu gün favikon yaratmağın iki əsas yolu var:

Xüsusi onlayn xidmətlər vasitəsilə
Photoshop və Adobe Illustrator kimi xüsusi proqramlardan istifadə edərək özünüz yaradın

Hər bir metodun öz xüsusiyyətləri var. Onlayn xidmətlər vasitəsilə favikon yaratmağın üstünlüyü ondan ibarətdir ki, bunun üçün hər hansı xüsusi bacarıqlara ehtiyacınız yoxdur. Siz sadəcə olaraq tələb olunan şəkli yükləyin, onu dəyişdirin və hazır favikonu endirin. Və ya sadəcə mətnlə işləyirsiniz və onlayn xidmətin alətlərindən istifadə edərək ikona çəkirsiniz. Ümumiyyətlə, bu metodun əsas üstünlüyü onun sadəliyidir. Bununla belə, sikkənin digər tərəfi odur ki, bu cür veb-sayt nişanlarının keyfiyyəti arzuolunmazdır. Onlayn xidmətlər üçün nişanlar qalereyasının hüdudsuz olmadığı sadə səbəbdən siz unikal favikon almayacaqsınız. Öz şəkillərinizdən istifadə edərkən, xidmət alətlərindən istifadə edərkən yüksək keyfiyyətli məhsul yaratmaq o qədər də asan deyil. Onlayn xidmətin alətlərindən istifadə edərək əl ilə işarə çəkdiyiniz halda, nəticə "ağıla gəlməyən bir şeydir".

Buna görə də biz ikinci, daha mürəkkəb, lakin uğurlu həlli seçirik. Favikon yaratmaq üçün proqramdan istifadə edəcəyik Photoshop. Bu proqramla heç bir təcrübəniz yoxdursa, o zaman yaxşıdır. Təlimatlarıma əməl etməklə, tapşırığı asanlıqla yerinə yetirəcəksiniz.

Favikonun yaradılması

Artıq qeyd etdiyim kimi, bir şəkil və ya sadəcə hərflərdən istifadə etməklə favikon yaradıla bilər. Bizim vəziyyətimizdə bir növ şəkil istifadə edəcəyəm. Məsələn, təsəvvür edək ki, bizim avtomobil saytımız var. Buna görə də, avto sahəsindən bir şəkil tapmalıyıq. Saytımızın simvolunu təkər şəklində etməyi təklif edirəm.

Şəklin seçilməsi

İstənilən yerdən şəkillər çəkə bilərsiniz. Məsələn, eyni vasitəsilə Yandex şəkillər. Əsas şərt şəklin sadə, kölgəsiz və həcmsiz olmasıdır. Bu onunla bağlıdır ki, 16 pikselə endiriləndə çox detala malik olmayacaq. Həddindən artıq həcmlər və kölgələr səbəbindən şəkil bulanıqlaşa bilər.

Axtarışdan istifadə edərək uyğun bir şəkil tapıram Google xahişi ilə "təkər". Etməli olduğum tək şey onu sağ klikləyərək “Şəkli Fərqli Saxla” seçimi ilə saxlamaqdır.

Google şəkillərində müvafiq şəkil

Sonra bu şəkli istifadə edərək açırıq Photoshop. Favikonun şəffaf fonda olması çox vacibdir. Bizim vəziyyətimizdə isə belə deyil. Fonu silmək üçün Sehrli Çubuq alətindən istifadə edirik. Onun işinin mahiyyəti çox sadədir. Bu alətlə biz təsvirdə eyni rəngli sahələri seçə bilərik. Şəkilimizin fonu təkərin özü ilə aydın şəkildə ziddiyyət təşkil etdiyi üçün bunu etmək çox asan olacaq. Bir dəfə klikləməklə bir rəngli sahə seçirik. Klaviatura qısa yolunu basaraq CTRL+Sil bu ərazini çıxarırıq.

Təkərimizin fonunu silmək

Bunu şəklin fonunun bütün hissələri ilə edirik. Beləliklə, şəklimizdə çarx şəffaf fondadır, bunu etməli idik. Beləliklə, saytımızın simvolu üçün şablon hazırdır.

2 müxtəlif ölçüdə favikon yaradın

64px və 16px ölçülü 2 favikon hazırlamağı təklif edirəm. Əvvəlcə daha böyük bir simvol yaratmalıyıq (64px). Bunu etmək üçün klaviatura qısa yolunu sıxırıq CTRL+N. Görünən pəncərədə şəklin hündürlüyünü və enini 64px olaraq seçirik.

Gələcək favikonun ölçülərinin təyin edilməsi

Sonra, çarxımızı yeni yaradılmış görüntünün sahəsinə köçürməliyik. Bunun üçün çarxla şəkilə qayıdırıq və "Move" alətini seçirik. Növbəti addım təkər şəklinə klikləmək və sol siçan düyməsini basıb tutaraq onu yeni təsvirin sahəsinə aparmaqdır. Hərəkət edərkən təkərli təbəqənin seçildiyinə əmin olun. Əks halda transfer uğursuz olacaq.

Təkərin yeni təsvirə köçürülməsi

Təkərləri yeni təsvirə köçürdükdən sonra onların uyğun gəlmədiyini görürük. Çarxı 64 pikselə endirməliyik. Bunu etmək üçün düyməni basıb saxlayın SHIFT və təsvirin diaqonal nöqtəsinə klikləməklə onu azaldırıq. Beləliklə, veb saytımız üçün ilk favikon yaratdıq. Nəzərinizə çatdırım ki, ölçülərimiz 64*64px-dir. İndi sadəcə "Fayl" sekmesinde "Veb üçün Saxla" funksiyasını seçərək onu yadda saxlamalıyıq. Format seçirik PNG-24 və qovluq şəkillər. Biz də favikonun özünü çağırırıq, yalnız latın hərfləri ilə - "favikon".

Favikonu yadda saxlayın

Əla. İndi etməli olduğumuz şey daha kiçik bir favikon yaratmaqdır. Bunu etmək üçün "Şəkil" sekmesini sıxırıq və "Şəkil ölçüsü" funksiyasını seçirik. Burada eni və hündürlüyü 16px olaraq təyin edirik. İndi etməli olduğumuz yeganə şey bu şəkli internet üçün saxlamaqdır. Biz bunu "favicon-2" adlandıra bilərik.

Beləliklə, biz veb saytımız üçün formatda 2 favikon yaradırıq "png". Biz onu asanlıqla 16px-ə endirmək üçün əvvəlcə 64px ölçüsündə bir seçim yaratdıq. Əvvəlcə 16px ilə bir seçim yaratsanız, keyfiyyətini itirmədən onu 64px-ə qədər artıra bilməyəcəksiniz. Buna görə də, ikiqat iş görməmək üçün bunu nəzərə alın.

Saytda favikonun quraşdırılması

Teq daxilində sayta favikon quraşdırmaq üçün Biz yazırıq:

Formatda favikonumuz varsa " ico" sonra biz onun yerinə" png" yaz" ico". Misal üçün:

Gördüyünüz kimi sayt işarəsi nəzərdə tutduğumuz kimi göstərilir.

Sayt üçün işarənin "ico" formatına çevrilməsi

Müasir brauzerlər favikonları asanlıqla tanıya və formatda göstərə bilər "png". Bununla belə, onu çevirmək lazım ola bilər "ico". Bu formatın üstünlüklərindən biri bütün ölçülü favikonların bir faylda saxlanmasıdır. Razılaşın ki, bu çox əlverişlidir. Beləliklə, nişanlarımızı çevirmək üçün sərin bir xidmətdən istifadə edəcəyik - xiconeditor.com. Onunla işləmək çox asandır. Hər şey 4 addımda baş verir:
1. Əvvəlcə favikonlarımızı yükləməliyik. Bunu etmək üçün düyməni sıxırıq "İdxal".

Xiconeditor.com xidmətində favikonların yüklənməsi

3. İstəsəniz, düyməni basa bilərsiniz "Ön baxış" və onların necə göstəriləcəyinə baxın. Favikonlarımızı formatda yükləmək üçün "ico" düyməsini sıxırıq "İxrac".

Beləliklə, biz burada favikon yaratmağı öyrənirik "png" və onları formata çevirin "ico". Photoshop-da təsvirin ətraflı işlənməsini xüsusi olaraq nəzərdən keçirmədim, çünki çoxları üçün bu lazımsız olardı. Lazım gələrsə, əlbəttə ki, Photoshop-da piksellərlə işləyərək favikonun keyfiyyətini daha da yaxşılaşdıra bilərsiniz. Bütün əsasları sadələşdirilmiş formada təqdim etməyə çalışdım. Və mənim üçün hamısı budur. Ümid edirəm bu dərs sizin üçün faydalı oldu. Əgər doğrudursa:

Bu məqaləni sosial şəbəkələrdə repost edin ki, daha çox insan bundan faydalansın;
Faydalı və maraqlı blog yazılarını qaçırmamaq üçün bülletenimə abunə olun.

Səninlə vidalaşmadığım yer budur. Diqqətiniz üçün təşəkkür edirik və növbəti nəşrlərdə görüşərik!