Favicon kūrimo programa. Universalus būdas sukurti faviconus. Kaip „Logaster“ veikia piktogramos kūrimo procesas?

19.11.2023 -

Šiandien vėl kalbėsime apie tinklaraščio nuotraukas, tai yra apie projekto piktogramą, vadinamą favicon. Aptarkime, kas yra favicon, kaip jį sukurti ir prijungti prie mūsų svetainės. Be to, kokio dydžio turėtų būti šis vaizdas ir kodėl kiekvienas iš jūsų tiesiog privalo jį įdiegti. Galų gale, net ši piktograma gali turėti įtakos srautui į jūsų tinklaraštį.

Kas yra favicon?

Favicon sąvoka yra gana paprasta ir sudaryta iš dviejų lotyniškų žodžių (iš tikrųjų, kaip ir visa kita internete) - mėgstamiausių piktograma. Tai savo ruožtu gali būti išversta kaip piktograma arba ženklelis. Reikšmė gali būti tokia; mėgstamiausia piktograma arba mėgstamiausia. Kodėl šis vardas? Tai paprasta, parankiniai yra tik žymių pavadinimas naršyklėje, todėl pavadinimą galima interpretuoti kaip žymės ar naršyklės skirtuko paveikslėlį. Juk negalėjote nepastebėti, kad atidarius svetainę ar įtraukus ją į žymes, matome ne tik jos pavadinimą, bet ir paveikslėlį, kuris vadinamas favicon. Tikiuosi, galėjau paaiškinti, koks tai gyvūnas?

Kodėl jums gali prireikti favicon?

Na, čia viskas paprasta kaip garuose virta ropė; norint individualizuoti interneto projektą, būtinas favicon. Tai yra, dar vienas išskirtinis jūsų tinklaraščio bruožas bus šis vaizdas, kuris ne tik leis patogiau naudotis svetaine naršyklėje, bet ir, tinkamai naudojant, padidins jūsų projekto lankytojų skaičių.

Pirma, tai gali būti patogu naršyklėje, kodėl? Pavyzdžiui, kai turiu atidarytą daugybę skirtukų, galiu naršyti pagal svetainės piktogramą, kurios man šiuo metu reikia. Tai yra, tai patogu tokiems žmonėms kaip aš.

Antra, ši nuotrauka gali pritraukti daugiau lankytojų į jūsų išteklius iš „Yandex“ paieškos variklio, jei jis yra patrauklus ir išsiskiria iš kitų, bet be fanatizmo. Dėl to, kad „Yandex“ įterpia favicon pirmuose devyniuose paieškos rezultatų puslapiuose, jūsų tinklaraštis skirsis nuo kitų. Būtent dėl šios priežasties Verta pagalvoti apie favicon prijungimą prie projekto. Taip atrodo pirmieji paieškos puslapiai.

Padarykite faviconą nebus sunku, nes tinkle yra daugybė generatorių, kurie gali sukurti faviconą iš įprastų vaizdų ir suteikti galimybę jį nupiešti nuo nulio. Taip pat galite sukurti vaizdą naudodami „Photoshop“, o tada naudodami generatorius konvertuoti jį į norimą formatą.

Skirtumai tarp įprastų vaizdų ir piktogramų yra nedideli, tačiau jie egzistuoja. Paveikslėlis turi būti paprastas (sudėtingi grafiniai elementai bus sunkiai įžiūrimi), 16x16 pikselių dydžio ir turi būti ico formato. Žinoma, galite naudoti png arba gif formatus, tačiau tokie vaizdai bus rodomi ne visose naršyklėse, todėl geriausias pasirinkimas yra naudoti ico formatą.

Nematau prasmės pasakoti apie kiekvieną žingsnį, kaip sukurti šią piktogramą, nes kiekvienas gali su ja susitvarkyti. Svarbiausia atsižvelgti į vaizdams keliamus reikalavimus ir viskas susitvarkys. Trumpai tariant, atsisiųskite arba nupieškite vaizdą ir sukurkite favicon naudodami internetinius generatorius. Internetinius generatorius galima rasti įvedus Google arba Yandex paieškoje – favicon. Arba čia yra nuoroda į paslaugą, su kuria galite piešti nuo nulio arba sukurti favicon iš baigto vaizdo: http://favicon.ru/

Kaip prijungti svetainės favicon?

Gerai, piktograma paruošta, kaip paleisti naršykles rodyti svetainės adresyną?

Pasinaudoję paslauga, atsisiųskite paruoštą tinklaraščio piktogramą į savo kompiuterį. Ir įkelkite paveikslėlį naudodami FTP klientą į pagrindinį tinklaraščio aplanką (public_html/site/your_file_in_ico_format) arba bet kurį kitą. Bet geriausia eiti į šakninį aplanką, tai paprasčiau, kai sudaromas kelias į failą.

Taigi, failas įkeltas, kas toliau? Dabar galite patikrinti, ar abejojate, ar failas įkeltas į šakninį aplanką: your_site/favicon.ico. Jei failas atsisiunčiamas į šakninį aplanką, tada jis bus rodomas šiuo adresu. Toliau reikia rašyti kiekvienam ištekliaus puslapiui tarp žymų Iršis kodas:

Ir jei piktograma yra kitame aplanke, ji turėtų būti tokia:

Šis kodas laikomas visuotinai priimtu daugeliui interneto išteklių ir veiks su bet kokiu varikliu. Tačiau skirtingiems varikliams galite rašyti skirtingai. Pavyzdžiui, „WordPress“ šis kodas atrodytų taip:

/favicon.ico" />

Tik šioje parinktyje piktograma turi būti aplanke su šablonu. Pavyzdžiui (public_html/site/wp-content/themes/your-theme/favicon.ico).

Po šių veiksmų svetainės favicon pradės veikti ir galėsite tai matyti savo naršyklės skirtukuose. Tačiau „Yandex“ paieškos rezultatuose failas nebus rodomas iš karto; pirmiausia turite palaukti, kol „Yandex“ robotas indeksuos piktogramą ir tik po to ji pradės būti rodoma paieškos rezultatuose, o tada tik su sąlyga, kad jūsų tinklaraštis bus įjungtas. vienas iš pirmųjų devynių paieškos rezultatų puslapių.

Tai viskas. Jei kas neaišku, klauskite ir išsiaiškinsime. Iki pasimatymo!

Sveiki, mieli tinklaraščio svetainės skaitytojai. Šios dienos pokalbis bus apie vadinamąsias Favicon.ico piktogramas. Išsiaiškinsime, kas yra favicon, kodėl privalote ją įdiegti savo svetainėje ir kaip patiems susikurti reikiamo dydžio piktogramą.

Iš esmės, norint sukurti faviconą, visai nebūtina naudoti specialių internetinių generatorių, nors tai gana patogu ir paprasta. Galite pabandyti tai padaryti naudodami „Photoshop“, bet pagal numatytuosius nustatymus, deja, jis negali išsaugoti vaizdų ICO formatu. Todėl norint išmokyti „Photoshop“ dirbti su ICO, reikės įdiegti specialų papildinį.

Bet jei jums nepatinka „Photoshop“ (kaip ir su juo), jums bus daug patogiau naudotis viena iš daugelio toliau išvardytų internetinių paslaugų. Be to, kai kuriuose iš jų galėsite nupiešti naują piktogramą visiškai nuo nulio, o kitose galėsite perdaryti esamą paveikslėlį (kuris jums tinka) į favicon formatą.

Na, o paprasčiausias variantas yra atsisiųsti Favicon kolekciją iš kokios nors internetinės galerijos ar katalogo. Skaitykite toliau, kur galite juos gauti.

Kaip sukurti Favicon internete ir kur galite atsisiųsti jų kolekciją

Pirmiausia leiskite man pateikti paslaugų (vadinamųjų favicon generatorius), kur be ypatingų įgūdžių galite sukurti visiškai padorų mini logotipą savo svetainei arba bent jau automatiškai konvertuoti tinkamą paveikslėlį į formatą, reikalingą favicon įkėlimui į svetainę.

Faviсon.cc- gana patogus internetinis favicon generatorius. Ją naudodami galite, pavyzdžiui, sukurti savo piktogramą nuo nulio (visiškai išskirtinę), piešdami ją po pikselį. Norėdami tai padaryti, kairėje paslaugų lango pusėje turėsite spustelėti mygtuką „Sukurti naują Favcon“.
Generatoriaus puslapio centre yra sritis, kurioje kiekvienas kvadratas yra jūsų būsimo favicon pikselis. Jūsų užduotis yra nudažyti šiuos kvadratus skirtingomis spalvomis. Norėdami nudažyti vieną kvadratą spalva, reikia pažymėti langelį dešinėje paslaugų lango pusėje laukelyje „Spalvų parinkiklis“, iš ten esančios paletės pasirinkti norimą spalvą ir spustelėti norimą kvadratą. Norėdami pašalinti netinkamą atspalvį, pažymėkite langelį „skaidrus“ ir spustelėkite kvadratą, dėl kurio jis taps bespalvis (skaidrus).
Norėdami perkelti pikselį per generatoriaus drobę, turėsite pažymėti laukelį „perkelti“. Savo darbo rezultatą realiu mastu galite pamatyti po drobe esančioje srityje „Peržiūra“. Jei jūsų sukurtas Favicon jums tinka, spustelėkite mygtuką „Atsisiųsti“, kad išsaugotumėte jį savo kompiuteryje. Dėl to gausite grafinį failą, kurį galėsite atsisiųsti ir įkelti į prieglobos serverį.
Dabar jūs žinote, kaip nuo nulio sukurti savo svetainės mini logotipą. Bet jei neturite grafinių gabumų, galite naudotis internetine generatoriaus paslauga įkelkite bet kokį vaizdą būsimam favicon, kuris pasitarnaus kaip ruošinys. Paveikslėlis gali būti absoliučiai bet kokio dydžio ir formato. Norėdami įkelti piktogramos failą į internetinę paslaugą, turėsite spustelėti mygtuką „Importuoti vaizdą“, esantį kairėje paslaugos lango pusėje.
Atsidariusiame lange spustelėkite mygtuką „Naršyti“ ir savo kompiuteryje raskite tinkamą vaizdą. Tada pasirinkite, ką daryti su savo nuotraukos formato santykiu, konvertuodami jį į 16 x 16 (kvadratinį). Tai tiesa, jei įkeliamas vaizdas nėra kvadratinis. Tokiu atveju galimos dvi parinktys: palikti nepakeistą formato santykį (išlaikyti matmenis) arba konvertuoti vaizdą į kvadratinį vaizdą (sutraukti į kvadratą piktograma). Antruoju atveju būsimo favicono vaizdas bus iškraipytas išilgai vienos iš ašių.
Norėdami įkelti į internetinį generatorių ir konvertuoti vaizdą, turėsite spustelėti mygtuką „Įkelti“. Iš jo sukurtą Favicon.ico bus galima redaguoti taip pat, kaip ir nupieštą. Kai baigsite dirbti su savo šedevru, spustelėkite mygtuką „Atsisiųsti“, kad atsisiųstumėte jį į savo kompiuterį.
Ši internetinė paslauga taip pat turi galimybę naudoti kitų vartotojų sukurtas ir viešai prieinamas favicon kolekcijas. Norėdami peržiūrėti galerijoje esančius eksponatus, turėsite spustelėti kairėje lango pusėje esantį mygtuką „Naujausios Favicons“, kad peržiūrėtumėte kolekcijas, surūšiuotas pagal sukūrimo datą, arba mygtuką „Geriausiai įvertinti Favicons“, kad pamatytumėte. galerijos surūšiuotos pagal įvertinimą.
Favicon.ru- kažkada ši paslauga buvo daug paprastesnė nei aukščiau aprašytas internetinis generatorius, tačiau pastaruoju metu ji tapo beveik jos analogu, bet tik rusų kalba. Favicon.ru ne tik leidžia konvertuoti bet kokį vaizdą (kompiuteryje ar internete) į ICO formatą, kurio dydis yra 16 x 16 pikselių, bet ir leidžia nupiešti jį nuo nulio, pikselis po pikselio.
Ši internetinio favicon generatoriaus versija pastebima galbūt tik todėl, kad ji yra vietinė. Štai kodėl jis atsidūrė šiame straipsnyje. Taigi, norėdami su juo dirbti, turite spustelėti pagrindinio puslapio viršuje esantį mygtuką „Pasirinkti failą“ ir kompiuteryje nurodyti kelią iki norimo vaizdo. Atsisiųstas ir konvertuotas į Favicon.ico formatą vaizdas gali būti pataisytas ir išsaugotas kompiuteryje. Viskas paprasta ir patogu.
Logaster.ru yra internetinis logotipų generatorius, tačiau be logotipų jis taip pat sukuria favicon. Skirtingai nuo visų kitų paslaugų, jums nereikia piešti favicon dizaino ar konvertuoti jo iš logotipo.
Norėdami sukurti favicon, pirmiausia turite įvesti svetainės ar įmonės pavadinimą ir pasirinkti veiklos tipą. Paslauga pasiūlys kelias dešimtis paruoštų naudoti favicon šablonų. Galite perskaityti daugiau apie tai, kaip sukurti favicon. Sukūrę Favicon.ico, galite atsisiųsti failą į savo kompiuterį ICO arba PNG formatu.

Po to viskas, ką jums reikia padaryti, tai paspausti mygtuką „Sukurti“. Atsidariusiame puslapyje pamatysite nuorodą, skirtą atsisiųsti gautą favicon.

Internetinių generatorių, favikonų kolekcijų ir galerijų pasirinkimas

Jei dėl kokių nors priežasčių jums nepatiko aukščiau aprašytas favicon generatorius, galiu pasiūlyti išbandyti laimę vienu iš šių nemokamos internetinės paslaugos:

FaviconGenerator – leidžia konvertuoti bet kokį iš kompiuterio atsisiųstą vaizdą į norimą favicon formatą (galite įkelti paveikslėlius).
„AntiFavicon“ yra gana įdomus „Favicon“ generatorius. Ant jo galite sukurti favicon su užrašu. Laukuose „Top text“ ir „Bottom tex“ turėsite įvesti užrašo tekstą, o srityje „Spalvos“ pakoreguoti spalvų schemą.
FavIcon from Pics yra dar viena paprasta internetinė paslauga – kompiuteryje nurodote paveikslėlio kelią, konvertuojate ir atsisiunčiate gautą failą ICO ir GIF formatu.
Iconj – nuostabu yra tai, kad galite atsisiųsti sukurtą piktogramą arba palikti ją paslaugoje ir gauti nuorodą į šį failą
DeGraeve yra gana galingas Favicon Generator, savo funkcionalumu panašus į anksčiau apžvelgtą Favicon.cc. Čia taip pat galite padaryti viską arba nuo nulio, arba įkelti vaizdą, kurį vėliau galėsite koreguoti ir atsisiųsti tinkamo dydžio ICO formatu.
Generatorius – leidžia generuoti favicon iš įkelto vaizdo ir sukurti jį nuo nulio specialioje redaktoriuje.
Internetinė piktogramų rengyklė favicon.ico – tai tarsi daro viską – sukuria favicons nuo nulio ir modifikuoja esamą vaizdą.
Online Favicon yra labai funkcionalus įrankis, skirtas kurti ir redaguoti mini logotipus
Nemokamas Favicon Generator – jei niekas iš aukščiau pateikto sąrašo jums netinka.
Favicon generatorius - paprastas ir skoningas...

Jei jums nerūpi svetainės mini logotipo išskirtinumas ir negalite dirbti su redaktoriais ir generatoriais, svetainėse, kuriose jos yra keliolika centų, galite pasirinkti sau tinkamą piktogramą. Juk iš tikrųjų mums tiks absoliučiai bet kuri 16 x 16 pikselių dydžio piktograma, kurią galite parsisiųsti iš interneto ar rasti savo kompiuterio gilumoje.

Tačiau reikia atsiminti, kad favicon pirmiausia turi pritraukti vartotojų dėmesį. Idealiu atveju vartotojas galėtų atpažinti jūsų svetainę tiesiog pažvelgęs į „Favicon“, todėl geriau, jei ji būtų unikali, bet taip pat galite ieškoti kažko neįprasto internete.

Jei neturite noro ar galimybių (nesate menininkas ir niekada nebuvote), paprasčiausias būdas būtų pabandyti ieškoti galerijos su nemokamų faviconų kolekcijomis:

Iconj yra gana didelė piktogramų kolekcija, kurią sukūrė kiti žmonės ir buvo prieinama visuomenei
Favicon.cc – 55 tūkstančiai skirtingų variantų visoms progoms. Taip pat yra animuotų faviconų, kurios bus matomos tik „FireFox“ naršyklėje.
Favicon Gallery – dar kelios piktogramos, atitinkančios dydį

Jei žinote kitų panašių šaltinių, pridėsiu jūsų nuorodas į šį sąrašą.

Kaip įdiegti „Favicon“ svetainėje ir nurodyti kelią į ją

Jūsų naršyklė ir „Yandex“ paieškos robotas Favicon pirmiausia ieškokite savo svetainės šakniniame aplanke. Todėl galite tiesiog prisijungti prie svetainės per FTP ir įkelti Favicon.ico failą į jos šakninį katalogą (dažniausiai tai yra public_htm arba htdocs aplankai) (geriau jos pavadinimą parašyti mažomis raidėmis). Dabar atidarykite savo šaltinį tam tikroje naršyklėje ir pažiūrėkite, ar skirtuko piktograma nepasikeitė. Ar pasikeitė? Ne? Na, viskas gerai.

Jei nepavyko tokiu būdu įdėti favicon, gali tekti, nes... Dažnai atsitinka, kad iš talpyklos įkeliama sena versija. Galite pabandyti, man jis geriausiai reaguoja į pakeitimus, padarytus neišvalius talpyklos. Jei problema nėra naršyklės talpykloje, tai reiškia jūsų svetainėje yra kita favicon vieta, skiriasi nuo šakninio aplanko. Kaip galiu tai patikrinti?

Atidarykite bet kurio svetainės puslapio šaltinio kodą. Norėdami peržiūrėti šaltinio kodą, tiesiog dešiniuoju pelės mygtuku spustelėkite puslapį ir pasirinkite atitinkamą kontekstinio meniu elementą (pavyzdžiui, „Šaltinio kodas“ senoje „Opera“ arba „Puslapio šaltinio kodas“ „Mazila Firefox“ arba „Peržiūrėti puslapio kodą“ „Google Chrome“ arba „Žiūrėti HTML kodą“ IE) arba paspauskite klavišų kombinaciją Ctrl+U. Dabar pažiūrėkite, ar puslapio viršuje yra eilutė, nurodanti kelią į favicon.ico.

Tai gali atrodyti maždaug taip:

Dabar, žinodami šį kelią, galite vėl prisijungti per FTP ir įkelti savo favicon naudodami nurodytą kelią, pakeisdami jau esantį svetainėje. Jei naršyklės adreso juostoje vėl neįvyko jokių pakeitimų, pabandykite dar kartą išvalyti naršyklės talpyklą.

IN Joomla Favicon paprastai gyvena aplanke su jūsų naudojamu šablonu (kelias į jį Joomla 1.5 buvo įrašytas index.php faile iš to paties šablono katalogo, bet Joomla 3 viskas tapo šiek tiek sudėtingesnė). Tie. Norėdami pakeisti Favicon Joomla, tereikia eiti šiuo keliu ir įkelti ten failą favicon.ico bei atsakyti į klausimą apie pakeitimą teigiamai:

/templates/folder_with_the_design_template/favicon.ico

Favicon failas WordPress pagal numatytuosius nustatymus jis taip pat gali būti aplanke su jūsų naudojama tema (ten taip pat nustatytas kelias į ją):

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

Apskritai, jei norite nustatykite arba pakeiskite kelią į savo mėgstamą piktogramą, kurį suprastų ir naršyklės, ir „Yandex“ paieškos robotas, tuomet turėsite įrašyti jį į atitinkamą „Joomla“, „WordPress“ ar bet kurio kito variklio šablono failą tarp atidarymo ir uždarymo žymų. GALVA, šios kodo eilutės:

Kuriame šablono faile reikia įrašyti šias eilutes, priklauso nuo jūsų svetainės variklio. Pavyzdžiui, į „WordPress“. reikia atidaryti header.php failą redaguoti: wp-content/themes/Folder_with_your_theme_design. Atidarykite header.php redaktoriuje ir pačioje pradžioje suraskite atidaromą HTML HEAD žymą. Bet kurioje vietoje po jo, bet prieš baigiamąjį HEAD, parašykite vieną iš aukščiau pateiktų kodo eilučių, nurodančių kelią į jūsų mini logotipo grafinį failą.

Kaip įdiegti animuotas favicon? Iš esmės lygiai toks pat, kaip ir įprastas. Vienintelis skirtumas bus į jūsų svetainės šabloną įdėtas kodas, kuriuo naršyklėms ir „Yandex“ paieškos robotui nurodysite kelią į norimą grafinį failą. Faktas yra tas, kad animuotasis „Favicon“ turės GIF plėtinį, todėl kodo eilutėse turėsite parašyti kažką panašaus:

Tai ir yra skirtumas tarp animuotų ir įprastų. Tačiau atkreipkite dėmesį, kad animuota piktograma veiks tik „FireFox“, kitose naršyklėse ji bus statinė. „Yandex“, įkeldama animuotą piktogramą, konvertuoja ją į statinį PNG formatą. Tačiau, mano nuomone, neverta vargti - įdiegti animuotą, o ne įprastą mini logotipą svetainėje, nėra prasmės. Bet tai tik mano IMHO.

Sėkmės tau! Greitai pasimatysime tinklaraščio svetainės puslapiuose

Jums gali būti įdomu

Internetinis FTP klientas Net2ftp ir Google Alerts – naudingos paslaugos žiniatinklio valdytojams
Svetainių analizė nemokamose internetinėse paslaugose Pr-cy, Cy-pr, Be1, Xseo ir kt
Svetainės piktogramos, ženkleliai, fonai, paveikslėliai ir logotipai (internetinės paslaugos IconFinder, Freepik, PSDGraphics ir kt.)
Naudojamumas – kaip padaryti svetainę patogią lankytojams ir stengtis, kad jie kuo ilgiau skaitytų jūsų straipsnius
MegaIndex Tools – įrankių rinkinys žiniatinklio valdytojams ir optimizuotojams
Kaip patikrinti svetainės išdėstymo suderinamumą su keliomis naršyklėmis programoje „Browsershots“ ir nustatyti ping siuntimą, kai pasirodo nauja medžiaga
Http - kas tai yra, kaip peržiūrėti antraštes ir patikrinti serverio atsako kodą, ką reiškia kodai 200, 301, 302, 404 ir 500?
Crossposting - kas tai yra ir kaip tai padaryti teisingai

Dabar asmeninė svetainės piktograma „Favicon“ yra savotiška bet kurio žiniatinklio šaltinio vizitinė kortelė. Ši piktograma pažymi norimą portalą ne tik naršyklės skirtukų sąraše, bet ir, pavyzdžiui, „Yandex“ paieškos rezultatuose. Favicon, kaip taisyklė, neatlieka jokių kitų funkcijų, išskyrus svetainės žinomumo didinimą.

Sukurti piktogramą savo ištekliui yra gana paprasta: surandate tinkamą paveikslėlį arba patys nupiešite jį naudodami grafinį redaktorių, o tada suspaudžiate vaizdą iki norimo dydžio - dažniausiai 16x16 pikselių. Išsaugokite gautą rezultatą faile favicon.ico ir įdėkite jį į svetainės šakninį aplanką. Tačiau šią procedūrą galima žymiai supaprastinti naudojant vieną iš internete esančių Favicon generatorių.

Dauguma žiniatinklio piktogramų redaktorių siūlo visus reikalingus įrankius Favicons kūrimui. Tokiu atveju nebūtina piešti paveikslėlio nuo nulio – galite naudoti jau paruoštą vaizdą.

1 būdas: Favicon.by

Rusų kalba internetinis favicon generatorius: paprastas ir vaizdingas. Leidžia patiems nupiešti piktogramą naudojant įmontuotą 16x16 drobę ir minimalų įrankių sąrašą, pvz., pieštuką, trintuką, lašintuvą ir užpildą. Yra paletė su visomis RGB spalvomis ir skaidrumo palaikymu.

Jei norite, galite įkelti gatavą vaizdą į generatorių - iš savo kompiuterio arba trečiosios šalies žiniatinklio šaltinio. Importuota nuotrauka taip pat bus patalpinta ant drobės ir ją bus galima redaguoti.

Dėl to gausite grafinį ICO failą, vadinamą favicon, ir 16x16 pikselių skiriamąją gebą. Ši piktograma jau paruošta naudoti kaip jūsų svetainės piktograma.

2 būdas: X-Icon Editor

HTML5 naršyklės programa, leidžianti kurti išsamias iki 64x64 pikselių dydžio piktogramas. Skirtingai nuo ankstesnės paslaugos, X-Icon Editor turi daugiau piešimo įrankių ir kiekvieną iš jų galima lanksčiai konfigūruoti.

Kaip ir Favicon.by, čia galite įkelti gatavą vaizdą į svetainę ir konvertuoti jį į favicon, jei reikia, tinkamai jį redaguodami.

Jei norite išsaugoti vaizdo, kurį ketinate paversti favicon, detales, X-Icon Editor tam puikiai tinka. Galimybė generuoti piktogramas su 64x64 pikselių raiška yra pagrindinis šios paslaugos privalumas.

Favicon (angliškai: Favorite Icon) – tai maža specialaus formato piktograma (vaizdas, paveikslėlis), kuri rodoma naršyklės adreso juostoje peržiūrint svetainę, naršyklės skirtuką arba jos žymėse („Mėgstamiausi“).

favicon yra papildoma jūsų svetainės puošmena, jūsų mini logotipas. Jis taip pat rodomas peržiūrint svetainių sąrašą „Yandex“ ir „Google“ paieškose, todėl jūsų svetainė išsiskiria iš kitų.

Kodėl jums reikia svetainės piktogramos?

favicon yra jūsų svetainės prekės ženklas. Daugelis kompanijų šiandien turi savitą favicon, kuris išskiria jas iš konkurentų. Kad piktogramą geriau įsimintų vartotojai, įmonės turėtų joje rodyti savo logotipą, kuris taip pat turėtų būti vienas iš svetainės antraštės elementų. Dar viena teigiama favicon naudojimo savybė yra ta, kad naršyklėje peržiūrint daug svetainių nematote viso puslapio pavadinimo, o tik piktogramą ir galite iš karto ir lengvai atpažinti skirtuką, į kurį norite patekti.

Ką geriau rodyti favicon?

Piktograma turi atitikti svetainės temą.
prekės ženklas, jei jūsų svetainė yra susijusi su šiuo prekės ženklu. Tuo pačiu metu skirtingiems puslapiams gali būti rodomi skirtingi prekių ženklai;
Naudokite favicon, kurį norite spustelėti, tai padidins paspaudimų rodiklį žiūrint „Yandex“ ir „Google“ paieškose;
Sukurkite keletą skirtingų svetainės skilčių favicon dizainų.
Padarykite keletą favicon dizainų įvairiems renginiams (pvz., Naujiesiems metams, Valentino dienai ar Kosmonautikos dienai :).

Įdėkite gautą failą į savo svetainės šaknį, kur yra pagrindinis indekso failas (index.php). Norėdami naršyklei nurodyti svetainės adresyno vietą puslapio antraštėje, įterpkite šią eilutę:

Kaip sukurti animuotą faviconą?

ICO formatas nepalaiko animacijos. Tačiau šiuolaikinės naršyklės leidžia naudoti GIF formatą miniatiūroms. Galima nurodyti vieną animuotą failą (favicon.gif) šiuolaikinėms naršyklėms, o kitą (favicon.ico) – senovinėms, pavyzdžiui, Intertet Explorer. Norėdami tai padaryti, prie galvos skyriaus pridėkite šias dvi eilutes:

Žinoma, pirmiausia turite įdėti abu failus į šakninį svetainės aplanką.

Ką daryti, jei vaizdus rodyti naršyklėje draudžiama?

Jei sukuriate favicon su įterptu vaizdu puslapio kode:

Tada piktograma bus rodoma naršyklėje net tada, kai vaizdai bus išjungti. .

Kaip gauti favicon iš svetainės

Ne visi žiniatinklio valdytojai įdeda favicon.ico į svetainės šaknį. Norėdami gauti favicon adresą, naudokite šį scenarijų:

]*)nuoroda([^>]*)(rel="icon"|rel="shortcut icon")([^>]*)>/iU", $html, $out)) ( $link_tag = $out ; if (preg_match("/href([s]*)=([s]*)"([^"]*)"/iU", $link_tag, $out)) ( $favicon = trim($out) ; if (strpos($favicon, "://")===false) $favicon = $url. "/" . ltrim($favicon, "/"); ) ) ?>

Paieškos sistemos Google, Yandex ir favicon

Paieškos variklio robotai talpykloje saugo svetainių piktogramas. Talpykloje esančios piktogramos pasiekiamos šioms užklausoms:

Be to, „Yandex“ gali paversti jus „sprite“ iš skirtingų svetainių piktogramų:

„iPhone“ ir „iPad“ skirtos piktogramos

Net jei nenurodysite nuorodos į paveikslėlį, iPhone vis tiek ieškos failo pavadinimu apple-touch-icon.png svetainės šakniniame aplanke ir, jei jį suras, nufotografuos iš jo apvalią nuotrauką. kampuose ir automatiškai bus pritaikytas paryškinimas. Norėdami to išvengti, vietoj apple-touch-icon.png turėtumėte parašyti apple-touch-icon-precomposed.png iPhone ir iPad savininkai, nes Jiems darome gražią 57x57 dydžio piktogramą (beje, ji gali būti ir didesnė, bet tai yra standartinis piktogramos dydis pietų ekrane), sujungiame ją taip:

Kaip dinamiškai pakeisti favicon?

Jei bandysite pakeisti žymos ypatybės vertę per DOM, norimo rezultato negausite. Norėdami dinamiškai pakeisti puslapio piktogramą, pirmiausia turite pašalinti nuorodos žymą su senąja piktograma iš puslapio pavadinimo, tada pridėti ją su nauju turiniu. Tai daroma taip: // Nuoroda į naują piktogramos failą var icon="new_favicon.ico"; var head = document.getElementsByTagName("head"); // Raskite ir pašalinkite seną piktogramą iš žymos HEAD var links = head.getElementsByTagName("link"); už (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 ir favicon

Dydžių atributas buvo pridėtas prie HTML5, leidžiantis deklaruoti kelias skirtingas tos pačios piktogramos versijas. Tai gali būti PNG failai:

Kaip deklaruoti plytelę planšetiniams kompiuteriams sistemoje „Windows 8“?

„Windows 8.0“ skelbimas atrodo maždaug taip:

„Windows 8.1“ ir „IE 11“ tikisi kelių vaizdo versijų, nurodytų naršyklėje config.xml. Pavyzdžiui:

Jūs neprivalote to deklaruoti, jei failo pavadinimas nepasikeitė:

#2b5797

Šiandien paliesime labai įdomią temą. Dirbdami su savo svetaine anksčiau ar vėliau turėsite sukurti favicon. Paprastai tariant, favicon yra jūsų svetainės piktograma, kuri rodoma naršyklės skirtuke. Ją taip pat galite pamatyti savo naršyklės greitosios prieigos srityje, jei jūsų svetainė buvo įtraukta į parankinius.

Populiariausių svetainių favicons

Manau, kad nėra prasmės sakyti, kad favicon turi būti geros kokybės, nes tai tam tikru mastu yra jūsų svetainės veidas. Šiame straipsnyje sužinosime, kaip sukurti mūsų poreikius atitinkančius faviconus, taip pat susipažinsime su jų konvertavimo paslauga. Daugiau skaitykite žemiau.

Vaizdo įrašo versija:

Koks turėtų būti favicon?

Prieš pradedant kurti favicon, būtų malonu pasidomėti, kokie jie idealiai turėtų būti. Taigi, ideali favicon:

Yra aiškus ir suprantamas
Pagaminta geros kokybės
Perteikia jūsų svetainės prasmę
Jūsų svetainė turi bendrą stilių
Išsiskiria iš kitų svetainių piktogramų

Pirmiau minėti parametrai gali būti klasifikuojami kaip idealus favicon. Ir mes turime sukurti tokią savo svetainės piktogramą. Tačiau vyksta diskusijos apie tai, kas tiksliai turėtų būti pavaizduota favicon. Manau, kad šiuo klausimu turite vadovautis bendru savo svetainės stiliumi ir tema. Jame gali būti paveikslėlio ar teksto. Jei tekstas dedamas ant favicon, jį turi sudaryti ne daugiau kaip 2 raidės. Priešingu atveju tokio teksto niekas negalės perskaityti, nes favicon matmenys paprastai yra 16*16 pikselių.

Kokie yra svetainių piktogramų dydžiai?

Kaip žinote, dabar yra daugybė naršyklių, monitorių ir įrenginių. Ir jų reikalavimai faviconų dydžiams yra skirtingi. Reikia atsižvelgti į šias dydžio parinktis:

16*16px – standartiniai favicon dydžiai, tinka daugumai naršyklių ir įrenginių
32*32px – kai kuriais atvejais naudojamas Internet Explorer Ir Safari
57*57px – naudojamas, kai rodoma iPhone
72*72px – naudojamas, kai rodomas iPad
114*114px – naudojamas, kai rodomas tinklainės ekranuose (57*2=114)
144*144px – naudojamas, kai rodomas tinklainės ekranuose iPad (72*2=144)

Koks turėtų būti faviconų formatas?

Anksčiau naršyklės priimdavo tik tokio formato faviconus "ico". Dabar jie išmoko suprasti kitus formatus, įskaitant "png". Mūsų atveju vienu akmeniu nužudysime 2 paukščius. Pirmiausia sukursime favicon formatu "png", tada konvertuokite į "ico".

Keli favicon kūrimo būdai

Šiandien yra du pagrindiniai faviconų kūrimo būdai:

Per specialias internetines paslaugas
Sukurkite jį patys naudodami specialias programas, tokias kaip Photoshop ir Adobe Illustrator

Kiekvienas metodas turi savo ypatybes. Favicon kūrimo naudojant internetines paslaugas pranašumas yra tas, kad tam nereikia turėti jokių specialių įgūdžių. Jums tereikia įkelti reikiamą vaizdą, jį modifikuoti ir atsisiųsti baigtą favicon. Arba tiesiog dirbate su tekstu ir nupiešite piktogramą naudodami internetinės paslaugos įrankius. Apskritai, pagrindinis šio metodo privalumas yra jo paprastumas. Tačiau kita medalio pusė yra ta, kad tokių svetainių piktogramų kokybė palieka daug norimų rezultatų. Unikalios favicon negausite dėl paprastos priežasties – internetinių paslaugų piktogramų galerija nėra beribė. O naudojant savo vaizdus, naudojant paslaugos įrankius, sukurti kokybišką produktą nėra taip paprasta. Jei piktogramą piešiate rankiniu būdu naudojant internetinės paslaugos įrankius, rezultatas yra „kažkas neįsivaizduojamo“.

Todėl renkamės antrąjį, sudėtingesnį, bet sėkmingesnį sprendimą. Norėdami sukurti favicon, naudosime programą Photoshop. Jei neturite patirties dirbant su šia programa, viskas gerai. Vykdydami mano nurodymus lengvai atliksite užduotį.

Favicon kūrimas

Kaip jau minėjau, favicon gali būti sukurta naudojant vaizdą arba tiesiog raides. Mūsų atveju aš naudosiu kokį nors paveikslėlį. Pavyzdžiui, įsivaizduokime, kad turime automobilių svetainę. Todėl turime rasti vaizdą iš automatinės srities. Siūlau padaryti mūsų svetainės piktogramą rato pavidalu.

Vaizdo pasirinkimas

Galite fotografuoti iš bet kurios vietos. Pavyzdžiui, per tą patį Yandex nuotraukos. Pagrindinė sąlyga, kad vaizdas būtų paprastas, be šešėlių ar tūrių. Taip yra dėl to, kad jį sumažinus iki 16 pikselių, nebus daug detalių. Dėl perteklinio tūrio ir šešėlių vaizdas gali būti neryškus.

Naudodamas paiešką randu tinkamą vaizdą google pagal pageidavimą "ratas". Viskas, ką turiu padaryti, tai išsaugoti jį dešiniuoju pelės mygtuku spustelėjus ir pasirinkus „Išsaugoti vaizdą kaip“.

Atitinkamas vaizdas google vaizduose

Tada atidarome šį vaizdą naudodami Photoshop. Labai svarbu, kad favicon fonas būtų skaidrus. Mūsų atveju taip nėra. Norėdami pašalinti foną, naudojame Magic Wand įrankį. Jos darbo esmė labai paprasta. Naudodami šį įrankį galime paveiksle pasirinkti tos pačios spalvos sritis. Kadangi mūsų vaizdo fonas aiškiai kontrastuoja su pačiu ratu, tai padaryti bus labai paprasta. Vieną kartą spustelėję pasirenkame vienos spalvos sritį. Paspaudus spartųjį klavišą CTRL + Delete pašaliname šią sritį.

Mūsų rato fono pašalinimas

Tai darome su visomis vaizdo fono dalimis. Taigi, mūsų paveikslėlyje ratas yra skaidriame fone, o tai ir reikėjo padaryti. Taigi, mūsų svetainės piktogramos šablonas yra paruoštas.

Sukurkite 2 skirtingų dydžių favicon

Siūlau padaryti 2 favicons, kurių dydžiai 64px ir 16px. Pirmiausia turime sukurti didesnę piktogramą (64 pikseliai). Norėdami tai padaryti, paspauskite spartųjį klavišą CTRL + N. Atsidariusiame lange pasirenkame vaizdo aukštį ir plotį 64 pikseliai.

Būsimos favicon matmenų nustatymas

Toliau turime perkelti savo ratą į naujai sukurto vaizdo sritį. Norėdami tai padaryti, grįžtame prie paveikslėlio su ratuku ir pasirenkame įrankį „Perkelti“. Kitas žingsnis yra spustelėti ratuko vaizdą ir, laikydami nuspaudę kairįjį pelės mygtuką, perkelkite jį į naujo vaizdo sritį. Įsitikinkite, kad judant pasirinktas sluoksnis su ratuku. Priešingu atveju perkėlimas nepavyks.

Rato perkėlimas į naują vaizdą

Perkėlus ratus į naują vaizdą matome, kad jie netelpa. Turime sumažinti ratą iki 64 px. Norėdami tai padaryti, laikome nuspaudę klavišą SHIFT o spustelėję vaizdo įstrižainės tašką jį sumažiname. Taigi sukūrėme pirmąją savo svetainės faviconą. Priminsiu, kad mūsų dydis yra 64*64px. Dabar mes tiesiog turime jį išsaugoti pasirinkdami funkciją „Išsaugoti žiniatinklyje“ skirtuke „Failas“. Mes pasirenkame formatą PNG-24 ir aplankas vaizdai. Mes taip pat vadiname patį faviconą, tik lotyniškomis raidėmis - "favicon".

Išsaugokite favicon

Puiku. Dabar tereikia sukurti mažesnę favicon. Norėdami tai padaryti, spustelėkite skirtuką „Vaizdas“ ir pasirinkite funkciją „Vaizdo dydis“. Čia nustatome 16 pikselių plotį ir aukštį. Dabar tereikia išsaugoti šį vaizdą žiniatinklyje. Galime tai pavadinti „favicon-2“.

Taigi, mes kuriame 2 savo svetainės favicons formatu "png". Pirmiausia sukūrėme 64 pikselių dydžio parinktį, kad vėliau ją lengvai sumažintume iki 16 pikselių. Jei pirmiausia sukursite parinktį su 16 pikselių, tada negalėsite padidinti jos iki 64 pikselių neprarandant kokybės. Todėl turėkite tai omenyje, kad nedirbtumėte dvigubo darbo.

Favicon įdiegimas svetainėje

Norėdami įdiegti favicon svetainėje žymos viduje mes rašome:

Jei turime favicon formatu " ico" tada mes vietoj " png" rašyti" ico". Pavyzdžiui:

Kaip matote, svetainės piktograma rodoma taip, kaip norėjome.

Svetainės piktogramos konvertavimas į „ico“ formatą

Šiuolaikinės naršyklės gali lengvai atpažinti ir rodyti mėgstamiausius šio formato simbolius "png". Tačiau gali tekti jį konvertuoti į "ico". Vienas iš šio formato privalumų yra visų dydžių faviconų saugojimas viename faile. Sutikite, kad tai labai patogu. Taigi, norėdami konvertuoti savo piktogramas, naudosime puikią paslaugą - xiconeditor.com. Su juo labai lengva dirbti. Viskas vyksta 4 etapais:
1. Pirma, turime įkelti savo mėgstamas piktogramas. Norėdami tai padaryti, spustelėkite mygtuką "Importuoti".

Favicons įkėlimas į xiconeditor.com paslaugą

3. Jei norite, galite spustelėti mygtuką "Peržiūra" ir pažiūrėkite, kaip jie bus rodomi. Norėdami atsisiųsti mūsų favicon formatu "ico" paspaudžiame mygtuką "Eksportuoti".

Taigi, čia mes mokomės, kaip kurti favicons "png" ir konvertuoti juos į formatą "ico". Aš konkrečiai negalvojau apie išsamų vaizdo apdorojimą „Photoshop“, nes daugeliui tai būtų nereikalinga. Jei reikia, žinoma, galite dar labiau pagerinti favicon kokybę dirbdami su pikseliais „Photoshop“. Stengiausi visus esminius dalykus pateikti supaprastinta forma. Ir tai viskas man. Tikiuosi, kad ši pamoka jums buvo naudinga. Jei tai tiesa:

Pakartotinai paskelbkite šį straipsnį socialiniuose tinkluose, kad daugiau žmonių galėtų juo pasinaudoti;
Prenumeruokite mano naujienlaiškį, kad nepraleistumėte naudingų ir įdomių tinklaraščio įrašų.

Čia aš su tavimi neatsisveikinu. Dėkojame už dėmesį ir iki susitikimo kituose leidiniuose!