1. Kaip sukurti favicon
2. Kaip padaryti, kad „Photoshop“ būtų „favicon“
3. Kaip išsaugoti favicon
4. Kaip įterpti favicon svetainę
5. Kaip pakeisti favicon
6. Kaip sukurti sudėtingesnius faviconus

Sunku atspėti, kas yra favicon, kai pirmą kartą girdite šį žodį. Tai miniatiūrinė piktograma , kuri rodoma naršyklių skirtukuose, adresų eilutėse ir kitose srityse, priklausomai nuo naudojamos operacinės sistemos ir interneto naršyklės. Jis gali būti saugiai vadinamas vienu sudėtingiausių ir sudėtingiausių svetainės dizaino elementų.

Geros favicon sukūrimas yra gana sudėtingas, nes piktograma yra maža, ji turėtų būti aiški ir rodyti kažką, susijusį su jūsų svetaine. Sukurti favicon, kuris yra suderinamas su visomis populiariomis naršyklėmis, taip pat gali būti nelengvas uždavinys. Šiame straipsnyje aptarsime visus sudėtingus jos kūrimo aspektus. Jei taip pat reikia logotipo, mes turime straipsnį kaip tai padaryti.

Kaip sukurti favicon

Pradėkime nuo favicon dizaino. Geras dizainas, nepaisant kompaktiškumo, turėtų atspindėti jūsų svetainės esmę ir būti organinės tapatybės dalimi. Paprastai piktograma yra įmonės grafinis ženklas (piktograma), o ne visas logotipas (piktograma, tekstas ir šūkis).

Šiose svetainėse, kaip favicon, naudojamos jų piktogramos (arba jų artimi vaizdai).

Favicon tekstas neturėtų būti naudojamas, nes šis tekstas bus neskaitytas dėl mažo vaizdo dydžio. Vienintelės šios taisyklės išimtys yra žinomi teksto ženklai, kurie automatiškai susieti su konkrečiu prekės ženklu. Pavyzdžiui, „Wikipedia“ internetinis šaltinis palieka „Favicon“ didžiosios raidės „W“ ir „Facebook“ - raidę „F“.

Šiuose faviconuose yra raidžių, kurie yra glaudžiai susiję su konkrečiu prekės ženklu. Pavyzdžiui, „Facebook“ naudoja savo grafinį ženklą. Taip pat atkreipkite dėmesį, kad „Disney“ vaizde matomi pikseliai. Taip yra todėl, kad ekranas buvo paimtas iš tinklainės ekrano, kuris yra suderinamas su 16 × 16 piktogramomis, o svetainės naudoja 32 × 32 piktogramas.

Kadangi faviconai yra maži vaizdai, kiekvienas pikselis vaidina svarbų vaidmenį. Kartais po logotipo sumažinimo matomi atskiri pikseliai, dėl kurių vaizdas tampa „neryškus“. Siekiant aiškumo, reikia redaguoti piktogramą pikselių lygiu.

Norėdami to išvengti, reikia pakeisti logotipo dydį naudodami specialius redaktorius, pvz., „Photoshop“ arba „GIMP“. Pirmiausia reikia sumažinti vaizdo dydį iki 64x64 pikselių (tai yra didžiausias dydis). Tada turite redaguoti kiekvieną pikselį naudodami pieštuko įrankį, kol vaizdas bus aiškus. Tai yra sunkus procesas, tačiau rezultatas yra verta. Kai favicon 64x64 yra parengtas, reikia atlikti tą patį darbą su 16 × 16, 24 × 24 ir 32 × 32 pikselių vaizdu. Tiek daug dydžių, kuriuos reikia atvaizduoti teisingai, rodomi visose naršyklėse ir programėlėse:

• 64x64 - „Safari“ naršyklės žymės;
• 32x32 - didelės skiriamosios gebos ekranai (tinklainė);
• 24x24 - žymės „Internet Explorer“ ir „MicroSoft Edge“;
• 16x16 - „Google Chrome“ ir kitos naršyklės.

Kaip padaryti, kad „Photoshop“ būtų „favicon“

Pirmiausia reikia sukurti keletą drobių, kurios turi aukščiau nurodytus matmenis.

Tada jums reikia pridėti piktogramą, raidę ar kitą vaizdą į drobę.

Kaip išsaugoti favicon

Sukūrę skirtingo dydžio piktogramas išsaugokite kiekvieną kaip skaidrią PNG failą (24 bitų). „Photoshop“ programoje galite naudoti funkciją „Išsaugoti žiniatinklyje“, esančią meniu Failas. Tada jums reikia sujungti visus PNG failus į vieną ICO failą. Vienu metu galite naudoti tiek PNG failus, tiek ICO failus, tačiau dažnai net „Safari“ ir „Chrome“ pageidauja tik ICO formato. Mano nuomone, lengviau sukurti vieną ICO failą. ICO formatas nėra labai dažnas, tačiau, laimei, yra daug įrankių, kurie gali padėti jums konvertuoti failus į šį formatą. Šiuo tikslu aš norėčiau naudoti X-Icon redaktorius . Tai nemokama internetinė paslauga, kuri iš karto atsisiunčiamas nuotraukas paverčia į vieną ICO failą, po kurio galite jį atsisiųsti. Tai nėra sudėtinga, tiesiog vadovaukitės svetainės instrukcijomis. Jei manote, kad esate beviltiškas žmogus, galite eksperimentuoti su šios paslaugos pikselių redaktoriumi ir patraukti favicon. (Nors norėčiau redaguoti „favicons“ profesionalesniame redaktoriuje, pavyzdžiui, „Photoshop“).

Įkeliant PNG vaizdus į „X-Icon“ redaktorių, išvesties metu gausite vieną ICO failą.

Kaip įterpti favicon svetainę

Taigi, jau turite ICO failą. Dabar jūs turite jį įtraukti į svetainę. Pervardykite failą į „favicon.ico“ ir įdėkite jį į savo svetainės šakninį aplanką (kur saugomas index.html failas ir kiti standartiniai failai). Po sėkmingo papildymo galite jį peržiūrėti savo svetainėje .com / favicon.ico. Beveik visos naršyklės ieško failo favicon.ico šakniniame aplanke. Todėl svarbu, kad atsisiuntėte favicon į šį aplanką. Dėl suderinamumo su skirtingomis naršyklėmis geriau neįtraukti jokių HTML elementų ar nuorodų, rodančių jo vietą. Šis triukas veikia visoms naršyklėms, iki IE6. Be to, jei turite „WordPress“ svetainę, tada daugelyje temų temos nustatymuose galite pridėti „favicon“. Šis metodas taip pat gali būti naudojamas.

Kaip pakeisti favicon

Dėl kai kurių nepaaiškinamų priežasčių naršyklės ją prideda prie talpyklos. Todėl, kai įkeliate naują ICO failą, naršyklė gali ir toliau rodyti jūsų seną favicon. Ką daryti šiuo atveju? Galite pridėti laikiną HTML failą, rodantį naujos favicon vietą. Taip pat URL pabaigoje turite pridėti trumpą užklausos eilutę:

<link rel = "nuorodos piktograma" href = "tavo svetainė .com / favicon.ico? v = 2" />

Taigi naršyklė manys, kad tai yra unikalus URL, todėl bus priverstas rodyti naują piktogramą. Atnaujinus „favicon“, šis HTML kodas gali būti visiškai pašalintas. Jei reikia atlikti favicon pakeitimus, naudokite tą patį metodą, kiekvieną kartą didinant skaičių po užklausos eilutės „v“. Taigi, naršyklė kiekvieną kartą suvoks šį URL kaip unikalų ir parodys naują versiją. Ir nepamirškite ištrinti HTML kodą po sėkmingo atnaujinimo.

Kaip sukurti sudėtingesnius faviconus

Šiame straipsnyje norėjau apibūdinti visuotinį ir paprastą būdą sukurti faviconus, kurie veiktų beveik bet kurioje platformoje. Tačiau interneto dizaino ir tobulinimo srityje tobulumo nėra. Jei norite sužinoti, kaip sukurti sudėtingesnes piktogramas, galite pabandyti naudotis šia paslauga favico.js . Tai leidžia kurti dinaminius vaizdus su įvairiais numeriais. Dėl šios piktogramos galite matyti neskaitytų pranešimų skaičių, net jei atitinkamas skirtukas nėra aktyvus. Jei norite sukurti animuotus faviconus internete, galite pabandyti naudoti „favicon“ generatorių favicon.cc .

Daugiau internetinių generatorių galite rasti čia .

Jei norite pasidalinti savo patarimais, kaip sukurti faviconus ar užduoti klausimą, laukiu jūsų komentarų!