HTML: Vytvorenie a pridanie favicon. WordPress a VKontakte

Začnime s definíciou. Favicon je malý obrázok (veľkosť 16x16 alebo 32x32). Vo väčšine prípadov ide o zmenšenú kópiu loga stránky alebo prvé písmeno jej názvu, alebo prvé dve písmená z názvu, alebo skratku z názvu, alebo obrázok, ktorý odráža tému stránky alebo podstatu podnikania.

Kde sa zobrazujú ikony favicon? Veľmi jednoduché:

1. na kartách prehliadača;

1. vo výsledkoch vyhľadávania;

1. na paneli so záložkami prehliadača.

Favicon vykonáva nasledujúce funkcie:

• Branding.
• Uľahčuje identifikáciu stránky používateľom (obrázok je vždy ľahšie zapamätateľný ako adresa stránky).
• Dodáva stránke pevnosť.

Teraz sa pozrime na to, čo presne dáva použitie favicon.

Povedomie o značke

Z predchádzajúcej snímky obrazovky ste už uhádli, že používateľ si s oveľa väčšou pravdepodobnosťou vyberie stránku so známou ikonou favicon, aj keď je na konci TOP 10. Zhruba rovnaký príbeh s históriou prehliadača. Používateľ si napríklad zapamätal favikonu vašej stránky, no zabudol, na akú požiadavku k vám prišiel. Čo robiť? Je to tak - choďte sa pozrieť do histórie prehliadača a posúvajte sa v nej, kým vás neupúta rovnaká ikona favicon. Na tento moment najznámejšie favicony na svete sú od Yandex, Google, Facebook, VKontakte, Odnoklassniki a Telegram. Ak stránka nemá favicon, nebude vo výsledkoch vyhľadávania a v histórii prehliadača bude namiesto toho „prázdny hárok“.

Mnoho používateľov posudzuje predajcov (a tých, ktorí poskytujú služby) nielen na základe informácií uvedených na stránke, ale aj na základe toho, ako je táto stránka celkovo navrhnutá. A taká maličkosť, akou je absencia favicon, môže byť dobrou ranou pre dôveru používateľa, najmä v prípadoch, keď si používateľ vyberá medzi viacerými internetovými obchodmi (alebo firmami poskytujúcimi pre používateľa zaujímavé služby).

Spätné návštevy

Ako už viete, ľudia sú oveľa „teplejší“ k obrázkom ako k textu. Teraz si predstavte, že návštevník sa niekam ponáhľa. Čo robí? Je to tak - ukladá stránku do záložiek, aby ju nestratil. Potom, keď má užívateľ voľný čas, rozhodne sa vrátiť na stránku a... V záložkách vašu stránku nenájde ani tak podľa názvu článku, ale podľa novej/zapamätanej favicon. Ak neexistuje ikona favicon, používateľ si môže myslieť, že odkaz je nefunkčný a odstráni ho zo záložiek.

Favicon by preto mal byť viditeľný a rozpoznateľný. Najjasnejšie príklady:

• písmeno G, ktoré je favikonom vyhľadávacieho nástroja Google;

• jedovaté červené písmeno I, ktoré je favikonom vyhľadávacieho nástroja Yandex;

Úspora času používateľa

Z vyššie uvedeného príkladu možno vyvodiť ešte jeden záver - favikony sú potrebné, aby sa používateľovi uľahčila identifikácia stránky v histórii / záložkách.

To, o čom bude reč v tomto odseku, platí pre PC aj mobilné zariadenia. Odkazy sa často neukladajú ako záložky v prehliadači, ale ako skratky na jednotke flash v nejakom samostatnom priečinku. Každý z vás zároveň vie, že názov skratky sa nie vždy zobrazuje celý. A tu je pomocou favicon oveľa jednoduchšie nájsť to, čo potrebujete.

Upozorňujeme, že svet smartfónov nestojí na mieste – kedysi bol smartfón s obrazovkou 640x360 pixelov považovaný za luxus a dnes už nikoho neprekvapíte s obrazovkou 1920x1080 pixelov (s rovnakou uhlopriečkou). Z toho možno vyvodiť iba jeden záver - pre rôzne rozlíšenia obrazovky je potrebné vytvoriť rôzne ikony favicon (alebo presnejšie rôzne veľkosti.

Neponáhľajte sa rozčuľovať, pretože. neskôr si povieme, ako sa tento problém rieši.

Výhody pre SEO

Predtým sme povedali, že ak má stránka favicon, zobrazí sa vo výsledkoch vyhľadávania. Už sme si tiež povedali, že obrázky sú pre človeka oveľa príťažlivejšie ako text. to znamená najjednoduchšie odvodenie: Na stránke SERP získavajú stránky s ikonami favicon viac pozornosti ako stránky bez nich. V dôsledku toho sa miera prekliknutia zvyšuje.

Upozorňujeme, že v tejto súvislosti hovoríme o výsledkoch vyhľadávania Yandex, pretože. Google vo výsledkoch vyhľadávania nezobrazuje ikony favicon. Toto je veľmi dôležitý bod, pretože Yandex je najpopulárnejší vyhľadávací nástroj v Rusku a používa ho väčšina rusky hovoriacich používateľov.

Okrem toho má Yandex dokonca svojho vlastného robota, ktorý nerobí nič iné ako indexovanie favicon (mimochodom, podmienky indexovania sú od 1 týždňa do 1 mesiaca).

Ako skontrolovať, či je vaša favicon indexovaná alebo nie:

1. prejdite na Yandex, zadajte adresu lokality a potom sa pozrite na výsledky vyhľadávania. Ak je favicon indexovaná, bude tiež vo výsledkoch vyhľadávania;
2. skontrolujte prítomnosť súboru favicon.ico cez Yandex.Webmaster.

Obe metódy sú elementárne a nezaberú viac ako 15 sekúnd.

No, keď povedali o Yandex, povedzme o Google. Tu ste to už vo vyhľadávači uhádli Google SERP ikony favicon sa nezobrazujú. A teraz to najzaujímavejšie. Smerom Google pri tejto príležitosti už dávno letia tenisky a od bežných používateľov. Áno, áno, nie od nás - SEO špecialistov, ale od vás - od obyčajných ľudí, ktorí nemajú nič spoločné s optimalizáciou stránok pre vyhľadávače, ktorí nakupujú, chodia po rôznych stránkach atď.

A teraz nie je potrebné hovoriť, že „možno si vôbec neuvedomujú problém? - stále v vedomí! Po prvé, otvorene priznali túto chybu. Po druhé, v čistom texte povedali, že „nie, neopravíme to“. Po tretie, je to z ich podania za Mozilla Firefox Bol vydaný doplnok, ktorý automaticky načítal ikony stránok do výsledkov vyhľadávania. Doplnok sa nazýva Google Favicon. Po štvrté, bolo to v roku 2012. A odvtedy Google nepridal favicony do SERP.

No a ešte pár slov o Google plugin favicon. Ani sa ho nepokúšajte hľadať a inštalovať do svojho FireFoxu, pretože. nebol aktualizovaný príliš dlho, a preto nie je kompatibilný s najnovšie verzie prehliadač firefox. Môžete však nájsť podobné pluginy.

Mimochodom, v mnohých iných vyhľadávačoch sa favicony tiež nepridávajú do výsledkov vyhľadávania.

Favicony v PC prehliadačoch a smartfónoch

O sekundu skôr sme už spomenuli, že ikony favicon sa nezobrazujú vo výsledkoch vyhľadávania vyhľadávacích nástrojov (možno s výnimkou Yandexu). To sa však nedá povedať o prehliadačoch a to platí ako pre mobilné prehliadače, tak aj prehliadače pre stolné počítače.

Teraz pár slov o veľkostiach. Aby sa favicon správne zobrazoval na všetkých zariadeniach, má zmysel použiť niekoľko rôznych veľkostí (väčšinou je to však buď 16x16 alebo 32x32 pixelov). Na tieto účely sa v drvivej väčšine prípadov používa grafický formát .ico. Jeho hlavnou výhodou je, že do jedného súboru môžete pridať niekoľko obrázkov rôznych veľkostí, rôznej kvality a dokonca aj rôzneho obsahu.

A to aj napriek tomu, že Google Chrome, Mozilla ForeFox, Opera (od verzie 7) a Apple Safari (od verzie 4) dlhodobo podporujú favicony vo formáte .png, stále je preferovaný formát .ico. Je to dané natoľko, že ak sa na tú istú stránku nahrajú dve ikony favicon v oboch formátoch, uprednostní sa formát .ico.

Ako vytvoriť favicon pre webovú stránku

Metóda 1: použite jednu zo špeciálnych online služieb, pretože ich je, mierne povedané, veľa:

• FaviconGenerator - umožňuje previesť obrázky z png, jpeg, jpg, gif do favicon vo formáte, ktorý potrebujete.
• AntiFavicon - zaujímavý tým, že umožňuje vytvoriť favicon s nápisom. Tie. text sa zadáva do polí "Horný text" a "Dolný text" av poli "Farby" sa nastavuje požadovaná farebná schéma.
• FavIcon z Pics je extrémne jednoduchý – nahrajte doň požadovaný obrázok a ako výstup dostanete favicon.
• Iconj - hlavnou funkciou je, že vaša favicon bude uložená v tejto službe na celý život. Tie. Do služby nahráte obrázok, skonvertujete ho na favicon a potom získate po prvé možnosť stiahnuť si ho a po druhé odkaz na stiahnutie (ak momentálne nemôžete alebo nechcete nič stiahnuť ).
• DeGraeve je jedným z najvýkonnejších generátorov favicon. Môžete vytvoriť favicon od začiatku alebo nahrať hotový obrázok, vykonať opravy a potom ho stiahnuť vo formáte .ico.
• Generátor - takmer úplný analóg ten predchádzajúci.

atď. V zozname nebudeme pokračovať, pretože. aj len rýchle vymenovanie bez Stručný opis zaberie veľa miesta.

Ale čo robiť, keď stále chcete favicon, ale nie je čas / chuť / príležitosť vyvinúť niečo vlastné? Veľmi jednoduché – existujú obrovské knižnice hotových riešení. Stiahnite si ľubovoľný, vo Photoshope (v extrémnych prípadoch - v Maľovaní), zmeňte veľkosť na 16x16, uložte pomocou .ico alebo .png, pomenujte súbor favicon a máte hotovo! Ak žiadny z nich nefunguje, nevadí. Hlavná vec - pamätajte, že vymyslieť favicon nevyžaduje veľa mysle. A len pár konkrétnych príkladov.

Je zrejmé, že vytvorenie takejto favicon trvalo 5-10 sekúnd, nie viac.

Príklad 2 – Blog Comp Security. Tu je to ešte jednoduchšie, pretože Favicon má na sebe červenú šípku.

Príklad 3 – blog HundredKrats. Ako vidíte, s MegaIndexom máme len jeden zásadný rozdiel – ich favicon je štvorcový a naša je oválna.

Absolútne všetky tri favicony sú mimoriadne jednoduché, no zároveň sú mimoriadne ľahko zapamätateľné, a teda ľahko rozpoznateľné. No, ako bonus, na ich vytvorenie skutočne nepotrebujete zručnosti žiadneho umelca, pretože si ich môžete nakresliť sami v programe Paint. A to je to, čo teraz urobíme.

Metóda 2 - nakreslite sa podľa princípu "iniciály stránok".

Krok 1. Otvorte program Paint, kliknite na „Zmeniť veľkosť“. V okne, ktoré sa otvorí, zrušte začiarknutie políčka „Zachovať pomer strán“ a nastavte veľkosť. Nezáleží na tom, ktorý z nich, hlavné je skončiť so štvorcom.

Krok 2. Vyberte nástroj "Vyplniť", vyberte požadovanú farbu z palety a potom vyplňte výsledný štvorec.

Krok 3. Vyberte nástroj "Inscription" a napíšte "iniciály" stránky na favicon. V prípade potreby môžete zmeniť samotné písmo a jeho veľkosť, ako aj podčiarknuť „iniciály“, kurzívu a / alebo tučné.

V našom prípade budú dva znaky dolára pôsobiť ako „iniciály“.

V tomto prípade nie je potrebné ukladať do .png, pretože súbor bude ešte potrebné previesť na .ico.

Krok 5. Ak chcete previesť, použite službu http://pr-cy.ru/favicon/ - nahrajte obrázok, spracujte ho, stiahnite si hotovú ikonu.

Stiahnutý súbor nahráme do koreňového adresára lokality, prejdeme na stránku a obdivujeme ju. Všetko funguje!

Tu je pre vás príklad jednoduchej chytľavej favicon, ktorej vytvorenie si nevyžaduje super-zručnosti a veľké mozgy.

Spôsob 3 - použite služby, ktoré majú vstavané nástroje na kreslenie, s možnosťou nahrať obrázky z PC, upraviť a zmenšiť na požadovanú veľkosť.

Tri príklady budú viac než dosť (pretože ich je príliš veľa):

1. Favicon.ru - skrátka s pomocou tejto služby môžete robiť všetko, čo bolo popísané v metóde 2.
2. Favicon-generator.org – umožňuje upravovať ikony, ktoré už niekto vytvoril.
3. Logaster.ru - v skutočnosti je navrhnutý tak, aby generoval logá, ale okrem loga generuje aj favicony. Majte na pamäti, že služba je platená.

Metóda 4 - favicon-garery.

To isté - nebudeme uvádzať všetkých, pretože. je ich veľmi, veľmi veľa.

Thefavicongallery - viac ako 300 favicon, ktoré si môžete okamžite stiahnuť;

Audit4web - veľké množstvo favicon na rôzne témy;

Iconj - viac ako 3000 favicon.

Spôsob 5 - objednávka od projektanta. Drahé, ale prestížne a krásne.

Metóda 6 - podobná metóde 2, ale používa oveľa chladnejšie a pokročilejšie grafické editory (napríklad Photoshop). Táto metóda zaberie veľa času, ale výsledok nebude taký jednoduchý ako pri druhej metóde.

Metóda 7 - použite špeciálne doplnky pre vašu stránku. Metóda je podobná návšteve galérií, má však tiež právo na existenciu. To platí najmä pre stránky na WordPress a Joomla. Stojí za zmienku, že pre WordPress a Joomla existujú veľmi veľké doplnky rôzne stránky zobraziť rôzne ikony favicon.

Ako nainštalovať favicon na webovú stránku

Na začiatok je potrebné poznamenať, že ak ste použili metódu 7, potom táto otázka Nemali by ste sa obávať, pretože plugin je určený na to a plugin, ktorý ušetrí majiteľa stránky od takýchto úloh.

Ak hovoríme o ručnom načítaní favicon, potom je všetko o niečo komplikovanejšie.

Najprv musí byť názov súboru favicon.ico alebo favicon.png. Tento súbor je potrebné nahrať do koreňového adresára vašej webovej lokality (zvyčajne do priečinka htdocs alebo public_htm). Potom prejdite na svoju stránku a zistite, či sa favicon načítal alebo nie. Ak nie, skúste vymazať vyrovnávaciu pamäť prehliadača. Ak ani po vyčistení nie je výsledok - je to v poriadku.

Po druhé, na niektorých stránkach je predvolené umiestnenie favicon nastavené inde. V tomto prípade prejdeme na stránku, klikneme pravým tlačidlom myši - vyberieme položku „Zobraziť html kód“ alebo „Zobraziť kód stránky“ (dobre alebo niečo podobné, v rôzne prehliadače inak).

Nie je vylúčená nasledujúca možnosť nastavenia hypertextového odkazu služby:

Vypočítali sme teda cestu, kam musíme favicon načítať – tam ho načítame. Teraz by to malo fungovať na 100%. Sťahovať môžete rôznymi spôsobmi:

• cez administračný panel poskytovateľa hostingu;
• pomocou Total Commander cez FTP;
• cez Správca súborov samotný motor (ak existuje).

V prípade CMS Joomla favicon sa spravidla nachádza v priečinku s aktuálne aktivovanou šablónou dizajnu. Výnimkou je Joomla 1.5 - kde bola cesta napísaná v súbore index.php, ktorý sa nachádza v priečinku s rovnakou šablónou. Tie. v prípade Joomly budete musieť ísť na /templates/folder_with_appearance_template/favicon.ico a tam nahradiť favicon.

Podobná situácia nastáva na stránkach WordPress, ale je to zriedkavé:

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

Existuje však aj iná možnosť - nahrať favicon kdekoľvek a potom medzi značky napíšte kód, ktorý určuje cestu k favicon:

V tomto prípade oba prehliadače a vyhľadávací robot Yandex neomylne nájde favicon, čo znamená, že nezostane bez povšimnutia používateľov.

Ktorý súbor obsahuje značky - závisí od motora, ktorý používate.

Napríklad vo WordPress je to súbor header.php, ktorý sa nachádza v priečinku s aktívnou témou: wp-content/themes/Your_theme_folder. Súbor header.php je možné upravovať cez FTP, cez bežný WordPress editor a cez admin panel poskytovateľa hostingu.

Inštalácia animovanej ikony favicon

Medzi inštaláciou statickej a animovanej favicon nie sú žiadne zásadné rozdiely, s výnimkou dvoch bodov:

• favicon musí byť vo formáte gif (ide o špeciálny formát na animáciu obrázkov);
• medzi a napíš iný kód:

Je však potrebné poznamenať, že animovaný favicon nie je taký tromf, ako sa zdá na prvý pohľad:

• po prvé, vo výsledkoch vyhľadávania nebudú žiadne animácie - Yandex prevedie animáciu gif na statický png a vy sa budete musieť len modliť, aby Yandex na tieto účely použil správny rámec;
• po druhé, animovaný favicon bude fungovať iba vo FireFox.

Práve z týchto dvoch dôvodov nemá nateraz zmysel trápiť sa animovanými faviconami. Keby len pre budúcnosť.

závery

Čo sme teda zistili?

1. Favicon môže hrať veľkú úlohu pri identifikácii lokality;
2. je to favicon, ktorý vám často umožňuje zapamätať si stránku;
3. favicon výrazne zjednodušuje vyhľadávanie konkrétnej stránky v záložkách, histórii prehliadača a vo výsledkoch vyhľadávania Yandex;
4. favicon sa dá jednoducho vytvoriť „doma na kolene“;
5. existuje veľa služieb na vytváranie, úpravu a výber hotových favicon.

Rýchla navigácia na tejto stránke:

Otázka, ako nainštalovať favicon na web, je pomerne jednoduchá, ale z nejakého dôvodu mnohí webmasteri tento problém zanedbávajú a nenainštalujú ikonu pre svoje stránky. Prečítajte si nižšie, aby ste zistili, prečo je to dôležité a ako to urobiť správne.

Prečo je potrebná favicon?

Favicon je predvolená ikona s rozmermi 16 x 16 pixlov, ktorá sa zobrazuje v hornej časti karty prehliadača vedľa názvu lokality/stránky. Ak ikona nie je nastavená alebo je nastavená nesprávne, potom sa ikona samotného prehliadača jednoducho nakreslí v prehliadači vedľa názvu stránky (napríklad ikona Firefox alebo Google Chrome).

V skutočnosti však úlohou tohto obrázka nie je len ozdobiť prehliadač. Faktom je, že tieto obrázky sa zobrazujú vo výsledkoch vyhľadávania Yandex (ak ikona nie je nastavená, zobrazí sa prázdne miesto). Predstavte si situáciu, že Yandex ponúkne používateľovi na jeho požiadavku dve približne rovnaké stránky, no na jednej z nich bude dodatočne prilepená ikona – na ktorú stránku používateľ pôjde s väčšou pravdepodobnosťou? Samozrejme, v prvom rade prejde na stránku navrhnutú ako prvú v zozname, ale práve prítomnosť obrázka je pre používateľa vždy príjemnejšia ako text, ktorý môže prilákať návštevníka na vašu stránku.

Okrem toho nemožno vylúčiť, že prítomnosť alebo neprítomnosť favicon môže spoločnosť Yandex považovať za jeden z menej významných faktorov hodnotenia. Toto nie je isté, ale ak Yandex berie do úvahy viac ako 300 rôznych faktorov pri hodnotení stránok vo výsledkoch vyhľadávania, možno pri určovaní kvality zdroja možno vziať do úvahy aj prítomnosť ikony.

Ak teda tvoríte dobrú a kvalitnú stránku, jej ikona musí byť pripevnená.

O tom, ako vytvoriť ikonu ico, máme samostatný článok (), takže prejdime priamo k otázke, čo by mala byť favicon.

Aký by mal byť súbor ikony a kde by sa mal nachádzať?

Historicky webové stránky používali formát .ico. Zvláštnosťou tohto formátu je, že do jedného súboru .ico je možné uložiť niekoľko obrázkov s veľkosťou od 16x16 do 64x64 (veľkosť musí byť násobkom ôsmich). Je pravda, že pre webové stránky sa skutočne používa iba formát 16x16 - ani Yandex, ani prehliadač nezobrazia inú veľkosť ikony.

Príslušný súbor .ico je možné vytvoriť pomocou grafického editora alebo mnohých online služieb dostupných na webe. Je dôležité daný súbor sa volala favicon.ico.

Teoreticky môžete súbor uložiť do ľubovoľného priečinka so súbormi lokality, ale dôrazne sa odporúča uložiť ho presne do koreňového adresára vášho zdroja – aby bol vždy dostupný na adrese your-site.ru/favicon.ico, pretože v predvolenom nastavení to vyhľadávače hľadajú a prehliadače.

Ako pridať na stránku?

Pridanie ikony pre váš zdroj je veľmi jednoduché: stačí napísať potrebný html kód medzi značky

Pre pridanie favicon html je kód nasledovný:

Po pridaní tohto kódu na stránky vašej stránky aktualizujte vyrovnávaciu pamäť prehliadača (musí byť úplne vymazaná) a ak je všetko vykonané správne a súbor s obrázkom je nahraný na stránku, obrázok sa začne zobrazovať v prehliadači .

Je pravda, že neočakávajte, že sa okamžite zobrazí vo výsledkoch vyhľadávania Yandex. Faktom je, že tento vyhľadávač favicon má samostatného robota, ktorý dokáže aktualizovať svoju databázu ikon niekoľko mesiacov. V tomto ohľade sa vaša ikona môže objaviť vo výsledkoch vyhľadávania Yandex za dva týždne a za pár mesiacov, nemali by ste sa toho obávať.

favicon je malý obrázok s rozmermi 16 x 16 (alebo 32 x 32) pixelov, ktorý sa nachádza v prehliadači naľavo od panela s adresou. Z nejakého dôvodu nie veľa ľudí pridať favicon na svoje stránky. Podľa mňa o veľa prichádzajú. Napríklad v Yandex sa zobrazujú ikony stránok a ľudia chodia na takéto stránky oveľa častejšie ako na tie, ktoré ich nemajú favicon. Tiež to podľa mňa mierne zvyšuje dôveryhodnosť stránky. Vo všeobecnosti sme v tomto článku nainštalovať favicon na stránku.

Ak chcete začať nájsť favicon. Najprv si môžete vytvoriť svoj vlastný. Veľmi dobrá služba favicon.cc. Na ňom ste priamo online vytvorte si vlastnú favicon. Môžete použiť aj hotové kolekcie a vybrať si tú, ktorá vám vyhovuje. Najjednoduchší spôsob je použiť vyhľadávanie a dopyt: " zbierka favicon Myslím, že už prvá stránka vám ukáže tisíce rôznych favicon, a budete si ho musieť už len vybrať.

Teraz je druhý krok inštalácia favicon na webovú stránku. Ak to chcete urobiť, pridajte do značky ďalší riadok:

Radím vám umiestniť favicon priamo do koreňového adresára stránky. Ak sa ho rozhodnete umiestniť na iné miesto, zmeňte podľa toho hodnotu atribútu " href".

Po obnovení stránky uvidíte svoje favicon vedľa adresy vašej webovej stránky.

Niekedy favicon neobjaví sa okamžite. Zvyčajne je na vine ukladanie do vyrovnávacej pamäte prehliadača. Preto, ak obrázok chýba, skúste vymazať vyrovnávaciu pamäť prehliadača (malo by to byť v nastaveniach). Pomôcť môže aj reštartovanie prehliadača. Ale ešte raz hovorím: ak ste urobili všetko správne, potom favicon sa zobrazí na vašej stránke.

Formát ICO a iné grafické formáty ikon. Inštalácia favicon na stránky s podporou pre iOS, Android a ďalšie zariadenia, ako aj nový HTML5. Pokyny krok za krokom, od jednoduchých po zložité, sú prístupné a vizuálne pre začínajúcich správcov webu.

O formáte ste už určite niečo počuli ICO a ikonu stránky favicon ale nič nestojí a vždy je niečo nové. Tento článok som sa rozhodla napísať nielen preto, aby som všetkým známe veci zhrnul, ale aj doplnil o nové produkty.

Takže sa dozviete o niektorých tajomstvách formátu ICO, problémoch s internet Explorer a ich eliminácii, o nových grafických formátoch favicon (transparentné a animované), HTML5 štandardy a ikony pre mobilné zariadenia pre iOS a Android a oveľa viac.

• Formát ICO
• súbor favicon.ico
• Oprava chýb pre Internet Explorer
• Favicon v HTML5
• Favicon pre Apple
• Favicon pre Android
• adresa súboru favicon.ico

Formát ICO

A začnem tým, že formát ICO(ikona Windows) bol vyvinutý spoločnosťou Microsoft pre ikony súborov. Je podobný formátu CUR(kurzory Windows) a najbližšie k BMP. Rozdiel je iba v nadpisoch, ako aj v prítomnosti masky, ktorá vám umožňuje vytvárať priehľadnosť vo výkresoch. Avšak alfa kanál (priesvitnosť) pre 32-bitové ikony sa objavili iba v systéme Windows XP.

súbor favicon.ico

súbor nápad favicon.ico (obrázok 16x16 pixelov) tiež vo vlastníctve Microsoftu, ktorý implementovali pre záložky v Internet Exploreri 5. Odtiaľ názov fav- skratka pre obľúbené - obľúbené a ikona - ikona. V súčasnosti tento formát podporujú všetky populárne prehliadače, ale hlavná vec je v detailoch. Podmienečne zovšeobecnená verzia Inštalácia favicon na web vyzerá takto:

Upozorňujeme, že vo vyššie uvedenom príklade sú použité dva vzťahy: skratka (z angl. štítok) a ikona (z angl. ikonu). Háčik je v tom, že shortcat je tu nadbytočný a bol ponechaný len pre staršie verzie Internet Explorera, ale musí byť pred ikonou .

image/vnd.microsoft.icon vs image/x-icon?

Zaujímavosťou je aj to, že v roku 2003 formát ICO bol zaregistrovaný Simon Butcher(Simon Butcher) na IANA a jej typ MIME je image/vnd.microsoft.icon . Problém je v tom, že staršie verzie Internet Explorera ho nedokážu správne interpretovať, preto je lepšie použiť starý obrázok/x-ikonu .

Oprava chýb pre Internet Explorer

Nezabudnite, že pre Internet Explorer môžete použiť berličky HTML založené na komentároch, napríklad:

Ďalšie grafické formáty favicon

Integrácia ďalších grafických formátov však v súčasnosti aktívne naberá na obrátkach: PNG, GIF, JPEG, APNG a SVG. Najlepší prípad so statickými formátmi PNG a gif, sú podporované všetkými novými verziami populárnych prehliadačov. Animované APNG funguje iba vo Firefoxe (od verzie 3.0) a Opera (od verzie 9.5) a tu je ten animovaný gif len IE a Safari nerozumejú. JPEG nepodporuje iba Internet Explorer.

Tu je niekoľko správnych príkladov vloženia favicon vo vhodných formátoch na web:

Upozorňujem na skutočnosť, že pre APNG používa typ MIME video/png a pre GIF (dokonca animované)- obrázok/gif. Zaujímavý je tu aj typ MIME pre SVG formát je image/svg+xml.

Favicon v HTML5

Teraz, pokiaľ ide o formát favicon v HTML5, čítaj viac. Zaujímavosťou je tu atribút veľkostí, ktorý nastavuje veľkosť ikon pre vizuálne zobrazenie vo formáte:

(šírka1) X (výška1) [(šírkaN) X (výškaN)] | akýkoľvek

Inými slovami, môžete uviesť príslušné veľkosti oddelené medzerou alebo zadať hodnotu any (pre všetky) . Dokumentácia HTML5 uvádza tento príklad:

Favicon.ico pre mobilné prehliadače

Problém je, že atribút veľkostí momentálne nepodporuje žiadny z populárnych prehliadačov. V prípade mobilných prehliadačov je situácia trochu odlišná.

Favicon pre Apple

Ak nie je zadaný atribút veľkostí, použije sa predvolená hodnota. 57x57.

Je tiež pozoruhodné, že favicon.ico slúži ako automaticky rozpoznaná ikona pre stránku bez zadania odkazu, takže nasledujúce názvy budú rozpoznané automaticky:

• apple-touch-icon-57×57.png
• apple-touch-icon-72×72.png
• apple-touch-icon-114×114.png
• apple-touch-icon-144×144.png

Ak chcete, aby iOS nepridával žiadne účinky, použite kľúčové slovo vopred zložené, napríklad:

Aj tu existuje sada automaticky rozpoznaných mien:

• apple-touch-icon-57×57-precomposed.png
• apple-touch-icon-72×72-precomposed.png
• apple-touch-icon-114×114-precomposed.png
• apple-touch-icon-144×144-precomposed.png

Favicon pre Android

Na základe prehliadačov Android zdedili formát Apple. V skutočnosti bude stačiť uviesť niečo ako nasledovné:

adresa súboru favicon.ico

Pravdepodobne ste si všimli, že v niektorých príkladoch sa používa príbuzná a nie favicon? Nie je to náhodné, pretože Okrem HTTP v súčasnosti naberá na obrátkach aj HTTPS. Aby sa predišlo problémom, v absolútnej adrese je jednoduchšie nešpecifikovať protokol, napríklad:

alebo použite relatívnu cestu.

Ako nainštalovať ikonu favicon na stránku?

No a teraz skúsme formovať zovšeobecnená verzia vloženia stránky favicon, mám to takto:

Pokúsim sa objasniť navrhovaný dizajn. Na začiatku je favicon pre Internet Explorer, ktorý bude reagovať na skratku . Ďalej, optimálne bude statické PNG ikona s priehľadnosťou animácia ikon dal som gif formát. Poďme vytvoriť ikony štandardnej veľkosti pre mobilné zariadenia 57x57 pixelov, jeden bez efektov a druhý s vlastnými efektmi (vopred zložené – zakáže efekty prehliadača). Aby sa predišlo problémom s HTTP a HTTPS, špecifikoval som relatívna cesta, počnúc koreňovým adresárom lokality (/ - na začiatku adresy), ale pre IE je asi najlepšie použiť absolútnu cestu.

To je z mojej strany všetko. Dúfam, že článok bol pre vás užitočný. Ak môžete vykonať nejaké opravy, doplnenia, upresnenia atď. - písať. Ďakujem za tvoju pozornosť. Veľa štastia!

Favicon (favicon je skratka pre Favorite icon, v preklade z angličtiny znamená obľúbená ikona) je ikona, známa aj ako skratka, ikona webovej stránky alebo ikona záložky. Favicon je bežný grafický obrázok(obrázok) spojený s konkrétnou webovou stránkou alebo webom. Prehliadače, ktoré podporujú pridanie favicon, ju zvyčajne zobrazujú v paneli s adresou a na kartách vedľa názvu stránky, niektoré prehliadače ju používajú ako ikonu pre skratku uloženú na ploche. Vyhľadávací systém Yandex prikladá favicon veľký význam a zobrazuje ju spolu s výsledkami vyhľadávania.

Tvorba

Na vytvorenie favicon môžete použiť takmer akýkoľvek grafický editor, avšak zvolený formát obrázka musí byť 16x16, 32x32 alebo 64x64 pixelov s použitím 8-bitovej alebo 24-bitovej farby. Obrázok musí mať príponu PNG (štandard W3C), GIF alebo ICO.

Pri vytváraní obrázka by ste mali venovať pozornosť nasledujúcim nuansám:

• Favicon by mal byť vyrobený v rovnakom štýle ako stránka, pretože je akousi vizitkou vášho projektu.
• Obrázok, ktorý chcete použiť ako favicon, by mal byť čo najjednoduchší na pochopenie, je lepšie použiť len niekoľko prvkov.
• Uistite sa, že favicon čo najviac vyjadruje podstatu vašej stránky, podnikania, projektu.
• Je lepšie vytvoriť obrázok tak, aby vyvolával asociácie medzi návštevníkmi vašej stránky. Napríklad ikona telefónu pre salón mobilných telefónov.

Príkladom programu, ktorý vám umožňuje vytvárať ikony, je Favicon Create (stiahnutie) – ide o najjednoduchší program. Na vytvorenie ikony vám postačí obyčajný obrázok vo formáte *.jpg alebo *.bmp, ktorý je možné vyrobiť v ľubovoľnom grafický editor, dokonca v rovnakom nátere. Obrázok načítame do programu, následne zvolíme veľkosť, farebnú hĺbku a stlačíme tlačidlo štart. Všetko je pripravené.

Pridáva sa favicon

Ak chcete pridať favicon na webovú stránku na začiatok dokumentu HTML, stačí zadať jeden riadok so značkou , v ktorom musíte zadať atribút rel, ktorý prehliadaču indikuje, že pridávame ikonu, atribút href obsahujúci adresu nášho obrázka a atribút type označujúci, aký formát obrázka používame:

Poznámka: Upozorňujeme, že pre každú webovú stránku alebo pre každú časť lokality môžete zadať svoju vlastnú favicon.

Tabuľka ukazuje rôzne možnosti pridanie favicon a poskytovanie podpory prehliadača:

	Google Chrome	internet Explorer	Firefox	Opera	safari
href="http://mysite.ru/myicon.ico">	Áno	Áno	Áno	Áno	Áno
	Áno	Áno (od IE 11)	Áno	Áno	Áno
	Áno	Áno (od IE 9)	Áno	Áno	Áno
	Áno	Áno (od IE 11)	Áno	Áno	Áno
	Áno	Áno (od IE 11)	Áno	Áno	Áno
	Áno	Áno (od IE 9)	Áno	Áno	Áno

Nepodceňujte dôležitosť favicon, najmä v dnešnej dobe, keď sú na internete miliardy stránok a stránok, z ktorých niektoré sú vašimi konkurentmi. Ikona stránky, podobne ako logo, prispieva k jej zapamätateľnosti a rozpoznaniu. Nemalo by chýbať dodatočná príležitosť, vylepšite svoj zdroj.