Užitočné tipy

Vytvorte favicon pre web

Pomocou tejto služby môžete ľahko prevádzať akýkoľvek obrázok vo formáte jpg, gif, png do formátu favicon.ico, Štandardná veľkosť obrázka pre favicon je 16x16 pixelov. V režime Expert môžete vytvárať ikony vo veľkostiach: 16x16, 24x24, 32x32, 48x48, 96x96, 128x128 a skombinovať ich do jedného súboru. Tento generátor favicon vám pomôže vygenerovať ikonu favicon pre vaše stránky z akejkoľvek veľkosti obrázka.

Táto stránka obsahuje príklady ikon stránok:

A to sú ikony stránok, ktoré boli nedávno analyzované a vybudované:

Čo je favicon?

Favicon (anglická obľúbená ikona) je malá ikona (obrázok, obrázok) v špeciálnom formáte, ktorá sa zobrazuje v paneli s adresou prehliadača pri prezeraní lokality, karty prehliadača alebo v jej záložkách („obľúbené“).

favicon je ďalšia dekorácia pre vaše stránky, vaše mini logo. Zobrazuje sa tiež pri prezeraní zoznamu webových stránok v Yandexe, vyhľadávaní Google a zvýraznení vašich stránok oproti ostatným.

Prečo potrebujem favicon pre túto stránku?

favicon je ochranná známka vášho webu. Mnoho spoločností má dnes charakteristický favicon odznak, ktorý ich odlišuje od konkurencie. Aby si používatelia lepšie zapamätali ikonu, mali by v nej spoločnosti zobrazovať svoje logo, ktoré by malo byť tiež jedným z prvkov nadpisu stránok. Ďalšou pozitívnou vlastnosťou používania favicon je to, že pri prezeraní veľkého počtu stránok v prehliadači nevidíte úplný názov stránky, ale vidíte iba ikonu a okamžite môžete ľahko určiť kartu, kam chcete ísť.

Čo je lepšie vykresliť na favicon?

  • Ikona by sa mala zhodovať s témou stránky.
  • značku, ak sú vaše stránky spojené s touto značkou. Zároveň sa môžu na rôznych stránkach zobraziť rôzne značky,
  • Použite ikonu favicon, na ktorú chcete kliknúť, čím sa zvýši klikateľnosť pri prezeraní pri vyhľadávaní výrazov Yandex, Google,
  • Vytvorte niekoľko návrhov favicon pre rôzne sekcie vášho webu.
  • Vytvorte niekoľko návrhov favicon pre rôzne udalosti (napr. Nový rok, Valentín alebo Kozmonautika :).
Výsledný súbor umiestnite do koreňa vašej lokality, kde sa nachádza hlavný indexový súbor (index.php). Ak chcete prehliadaču označiť umiestnenie ikony lokality (favicon) v nadpise stránky (hlava), vložte nasledujúci riadok:

Ako vytvoriť animovaný favicon?

ICO formát nepodporuje animáciu. Moderné prehliadače vám však umožňujú používať miniatúry vo formáte GIF. Je možné určiť jeden animovaný súbor (favicon.gif) pre moderné prehliadače a druhý (favicon.ico) pre starcov ako Intertet Explorer. Ak to chcete urobiť, do sekcie hlavy pridajte nasledujúce dva riadky:

Najprv musíte samozrejme umiestniť oba súbory do koreňového priečinka webu.

Favicon - aké to je vytvoriť favicon a nainštalovať na svoje webové stránky generátory ikon ikon

Dobrý deň, milí čitatelia blogu KtoNaNovenkogo.ru. Konverzácia v dnešnom článku sa zameria na tzv. Ikony Favicon.ico. Chápeme, čo je favicon, prečo ho musíte bez problémov nainštalovať na svoje stránky a ako sami vytvoriť ikonu správnej veľkosti.

Predtým som písal o tom, kde môžete získať ikony pre web a služby, ktoré sú tu uvedené (v tomto článku), sa dajú použiť na nájdenie vhodných možností pre server Favicon.ico, existujú však aj špeciálne online generátory (generátor favicon), domáce aj domáce. zahraničné, ako aj špecializované zbierky a galérie s vhodnými faviconmi. Samozrejme, budeme hovoriť o tom, ako ich nakonfigurovať a prepojiť s vašimi stránkami.

Čo je to favicon a prečo je potrebný pre web

Favicon je v skutočnosti bežnou ikonou (obrázok malého 16 x 16 pixelov, ikona). Ale pre majiteľa stránok to môže veľa znamenať. Najprv však treba urobiť prvé veci.

Samotný názov „favicon“ pochádza z anglickej vety FAVorites ICON, čo znamená - ikona „Favorite“ (tzv. Záložky v prehliadači Internet Explorer). Prečo je to potrebné? Je zrejmé, že je oveľa jednoduchšie vyhľadať záložku, ktorú potrebujete, pretože ľahšie je vyhľadať známú ikonu, ako čítať názvy stránok.

Predtým ste mohli vidieť obrázok Favicon v paneli s adresou prehliadačov, pred URL otvorenej stránky (v mojom IE9 stále zostáva), ale potom, čo všetky prehliadače začali podporovať karty, sa táto ikona presunula práve na tieto karty , Ak je ich však otvorených veľa, je to favicon, ktorý umožňuje pochopiť, ktorá karta zodpovedá tomu, na ktorom webe:

Je samozrejmé, že server Favicon.ico nestratil svoju pôvodnú hodnotu, stále sa používa v záložkách všetkých prehliadačov na rýchle vizuálne vyhľadávanie požadovanej stránky medzi tisíckami záložiek (pozrite sa na horný panel prehliadača a presvedčte sa sami).

A čo je dôležitejšie, vyhľadávací nástroj Yandex zobrazuje vo svojom vydaní favicon (výsledky vyhľadávania) pre každý prostriedok, ak má túto ikonu (bol pridaný a správne nakonfigurovaný vlastníkom lokality a robot Yandex ho už indexoval).

Yandex má špeciálny robot na indexovanie faviconov s názvom YandexFavicons (majú dokonca aktualizácie, po ktorých má zmysel skontrolovať nový a aktualizovaný súbor Favicon.ico vedľa vydaného webu), ktorého úlohou je zhromažďovať a aktualizovať ikony pre všetky stránky. Robot Yandex, špecializujúci sa na indexovanie, navštevuje webové stránky s frekvenciou od niekoľkých dní do jedného mesiaca (počet výskytov je veľmi zriedkavý).

Preto by ste nemali očakávať, že novo vytvorený online generátor alebo automaticky vytvorený favicon sa okamžite objaví vo výsledkoch vyhľadávania Yandex vedľa popisu vášho zdroja. Bude to chvíľu trvať. Yandex potom, čo na vašom serveri nájde súbor Favicon.ico, prevedie ho do formátu PNG (z grafického formátu ICO) a odteraz Favicon vášho webu bude k dispozícii na adrese:

Ak chcete skontrolovať svoje stránky, budete samozrejme musieť napísať vlastný text na koniec odkazu namiesto adresy URL môjho blogu.

Ak už váš projekt Favicon ešte nenakonfiguroval, je čas premýšľať o jeho vytvorení a inštalácii to vám umožní prilákať viac návštevníkov zo stránok Yandex (z výsledkov vyhľadávania), pretože táto ikona sa objaví vedľa adresy vášho projektu a vyzve používateľov, aby vás vybrali, a nie ich susedia o vydanie.

Favicon.ico si v zásade môžete sami vytvoriť sami, budete mať tiež možnosť vytvoriť ho pomocou online generátorov (z obrázkov, ktoré ste nahrali), alebo jednoducho stiahnuť celú online kolekciu alebo galériu.

Je dôležité, aby ste ich používali favicon priťahoval pozornosť, pretože to môže viesť k výraznému zvýšeniu počtu návštevníkov, ktorí k vám prichádzajú z vyhľadávania. Používatelia často nájdu váš web na mnohých kartách otvorených v prehliadači alebo medzi stovkami záložiek.

Vo všeobecnosti je výhoda vytvorenia jasnej a nezabudnuteľnej ikony (mini-loga) pre vaše webové stránky zrejmá (v prvom rade je to uznanie „značky“ a všetkého dobrého, čo z toho vyplýva). Zostáva len pochopiť ako ju vytvoriť a umiestniť na svoje stránkya ako by mal vyzerať tento grafický súbor? Na druhú otázku je ľahšie odpovedať - podľa definície by mal byť Favicon uložený vo formáte ICO, umiestnený v koreňovom adresári stránky (hoci to môže byť iné miesto) a jeho veľkosť by mala byť 16 x 16 pixelov.

V zásade na vytvorenie favicon nie je potrebné používať žiadne špeciálne online generátory, hoci je to celkom pohodlné a jednoduché. Môžete to skúsiť vo Photoshope, ale štandardne to bohužiaľ nevie, ako ukladať obrázky do formátu ICO. Preto, aby ste mohli Photoshop naučiť, ako pracovať s ICO, budete musieť nainštalovať špeciálny doplnok.

Ale ak nie ste na priateľskom základe s Photoshopom (rovnako ako s jeho bezplatnou online verziou), bude pre vás oveľa pohodlnejšie použiť jednu z mnohých online služieb uvedených nižšie. Zároveň v niektorých z nich môžete úplne nakresliť novú ikonu od nuly av iných môžete znova načítať svoj existujúci obrázok (ktorý vám vyhovuje) vo formáte favicon.

Najjednoduchšou možnosťou je stiahnutie zbierky Favicon-ok z nejakej online galérie alebo katalógu. Informácie o tom, kde sa môžu chytiť, si prečítajte nižšie.

Ako vytvoriť online favicon a kde si môžete stiahnuť jeho zbierku

Dovoľte mi najskôr uviesť príklady služieb (tzv generátor favicon), kde môžete, bez akýchkoľvek špeciálnych zručností, vytvoriť úplne slušné mini-logo pre svoj web, alebo aspoň automaticky previesť vhodný obrázok do formátu potrebného na odovzdanie favicon na web.

    Favison.cc Je celkom vhodný online generátor favicon. Pomocou neho môžete napríklad vytvoriť svoju vlastnú ikonu od nuly (úplne exkluzívne) tak, že ju nakreslíte pixel po pixeli. Ak to chcete urobiť, musíte kliknúť na tlačidlo „Vytvoriť nový favcon“ na ľavej strane servisného okna.

V strede stránky generátora je oblasť, v ktorej je každé pole pixel vašej budúcej favicon. Vašou úlohou je maľovať tieto štvorčeky rôznymi farbami. Ak chcete vyplniť jeden štvorec farbou, musíte do poľa „Výber farby“ označiť začiarknutie v pravej časti servisného okna, na palete, ktorá sa tam nachádza, vyberte požadovanú farbu a kliknite na potrebný štvorec. Ak chcete odstrániť nesprávnu výplň, začiarknite políčko „priehľadné“ a kliknite na štvorec, čím sa stane bezfarebným (priehľadné).

Ak chcete presunúť pixel na plátno generátora, musíte skontrolovať pole „presunúť“. Výsledok svojej práce môžete pozorovať v reálnom meradle v oblasti „Preview“ pod plátnom. Ak vám favicon, ktorý ste vytvorili, vyhovuje, uložte ho do svojho počítača kliknutím na tlačidlo „Stiahnuť“. Ako výsledok dostanete grafický súbor, ktorý si potom môžete stiahnuť a nahrať na hostiteľský server.

Teraz viete, ako vytvoriť mini logo pre svoj web od začiatku. Ak však nemáte grafický talent, môžete využiť službu generátora online nahrajte akýkoľvek obrázok pre budúcu favicon, ktorá bude slúžiť ako medzera. Obrázok môže mať absolútne akúkoľvek veľkosť a formát. Ak chcete nahrať súbor s ikonami do služby online, musíte kliknúť na tlačidlo „Importovať obrázok“ v ľavej časti okna služby.

V okne, ktoré sa otvorí, kliknite na tlačidlo „Prehľadávať“ a vyhľadajte na počítači príslušný obrázok. Potom vyberte, čo robiť s pomerom strán obrázka pri konverzii na formát 16 x 16 (štvorcový). To platí, ak odovzdaný obrázok nie je štvorcový. V takom prípade sú možné dve možnosti: ponechajte pomer strán nezmenený (Zachovať rozmery) alebo skonvertujte obrázok na zobrazenie štvorca (ikona Zmenšiť na štvorec). V druhom prípade bude obraz budúceho favicon zdeformovaný pozdĺž jednej z osí.

Ak chcete nahrať do online generátora a previesť svoj obrázok, musíte kliknúť na tlačidlo „Nahrať“. Favicon.ico z neho vytvorený bude možné upravovať rovnakým spôsobom, aký ste vytvorili. Po dokončení kúzelníckeho diela kliknite na tlačidlo „Stiahnuť“ a stiahnite si ho do svojho počítača.

V tejto online službe je tiež možnosť využívať zbierky faviconov, ktoré vytvorili a zdieľajú ostatní používatelia. Ak chcete zobraziť exponáty dostupné v galérii, musíte kliknúť na tlačidlo „Najnovšie favióny“ na ľavej strane okna, aby ste si mohli prezrieť zbierky zoradené podľa dátumu vytvorenia, alebo na tlačidlo „Najvyššie hodnotené favicony“ na prezeranie galérií zoradených podľa hodnotenia. Favicon.ru - Akonáhle bola táto služba oveľa jednoduchšia ako online generátor opísaný vyššie, ale nedávno sa stala prakticky jej analógovou, ale iba ruskou. Favicon.ru vám umožňuje nielen prevádzať akýkoľvek obraz, ktorý máte (na počítači alebo na internete), do formátu ICO s veľkosťou 16 x 16 pixelov, ale tiež ho umožňuje kresliť od nuly po pixel.

Táto možnosť online generátora favicon je pravdepodobne pozoruhodná iba preto, že je domáca. Preto sa dostal do tohto článku. Aby ste s tým mohli pracovať, musíte kliknúť na tlačidlo „Vybrať súbor“ v hornej časti hlavnej stránky a určiť cestu k požadovanému obrázku v počítači. Obrázok nahraný a konvertovaný do formátu Favicon.ico je možné opraviť a uložiť do počítača. Všetko je jednoduché a pohodlné.

Logaster.ru Je online generátor loga, ale okrem loga vytvára aj favicon. Na rozdiel od všetkých ostatných služieb nemusíte kresliť dizajn favicon ani ho prevádzať z loga.

Ak chcete vytvoriť favicon, musíte najprv zadať názov webu alebo spoločnosti a vybrať typ činnosti. Táto služba ponúkne niekoľko desiatok šablón favicon pripravených na použitie. Viac informácií o tom, ako vytvoriť favicon, nájdete tu. Po vytvorení súboru Favicon.ico si môžete súbor stiahnuť do svojho počítača vo formáte ICO alebo PNG.

Potom stačí kliknúť na tlačidlo „Vytvoriť“. Na stránke, ktorá sa otvorí, sa zobrazí odkaz na stiahnutie výsledného favicon.

Výber online generátorov, zbierok a galérií faviconov

Ak sa vám z nejakého dôvodu nepáčil generátor favicon opísaný vyššie, navrhujem vyskúšať svoje šťastie v jednom z nasledujúcich bezplatné online služby:

  1. FaviconGenerator - umožňuje previesť akýkoľvek obrázok stiahnutý z počítača do požadovaného formátu favicon (môžete nahrávať obrázky vo formáte PNG, JPEG, JPG, GIF).
  2. AntiFavicon je celkom zaujímavý generátor Favicon. Na to môžete vytvorte favicon s nápisom, Budete musieť zadať text nápisu do polí „Horný text“ a „Dolný text“ a upraviť farebnú schému v oblasti „Farby“.
  3. FavIcon od Pics je ďalšia jednoduchá online služba - zadajte cestu k obrázku v počítači, skonvertujte a stiahnite výsledný súbor vo formáte ICO a GIF.
  4. Iconj - je pozoruhodné, že vytvorenú ikonu môžete buď stiahnuť, alebo ju nechať v službe a získať odkaz na tento súbor
  5. DeGraeve je pomerne silný generátor Favicon, pokiaľ ide o funkčnosť podobnú predtým revidovanému Favicon.cc. Tu môžete robiť všetko od nuly, alebo nahrať obrázok, ktorý neskôr môžete opraviť a stiahnuť už vo formáte ICO vhodnej veľkosti.
  6. Generátor - umožňuje vygenerovať favicon zo stiahnutého obrázka a vytvoriť ho od nuly v špeciálnom editore.
  7. Online editor ikon favicon.ico - tak, ako to bolo, všetko s tým - a vytváranie favicon od nuly a dokončenie existujúceho obrázka.
  8. Online Favicon je veľmi funkčný nástroj na vytváranie a úpravu mini log
  9. Generátor Favicon zadarmo - v prípade, že vám žiadny z vyššie uvedeného zoznamu nevyhovuje.
  10. Generátor favicon je jednoduchý a vkusný.

Ak sa nedáte sakra o exkluzivite svojho mini-loga pre daný web a neporiadate sa s editormi a generátormi, môžete si vybrať tú správnu ikonu pre stránky, na ktorých je desaťkrát desať. Nakoniec, v skutočnosti je pre vás vhodná akákoľvek ikona s veľkosťou 16 x 16 pixelov, ktorú si môžete stiahnuť zo siete alebo nájsť v útrobách vášho počítača.

Musíme si však uvedomiť, že favicon musí predovšetkým upútať pozornosť používateľov. V ideálnom prípade bude užívateľ potrebovať iba spoznať vaše stránky na prvý pohľad na server Favicon, takže je lepšie, ak je jedinečný, ale môžete tiež hľadať niečo, čo nie je v koši s internetom vyčerpané.

Ak nemáte túžbu alebo príležitosť (nie ste umelec a keď ste neboli), najjednoduchším spôsobom je vyskúšať vyhľadávanie v galérie so zbierkami bezplatných faviconov:

  1. Iconj je pomerne veľká zbierka ikon vyvinutých a zdieľaných inými ľuďmi
  2. Favicon.cc - 55 tisíc rôznych možností pre všetky príležitosti. Existujú tiež animované favicon, ktoré budú viditeľné iba v prehliadači FireFox.
  3. Galéria Favicon - o niečo vhodnejšia pre veľkosť ikon

Ak viete nejaké ďalšie podobné zdroje, pridám vaše odkazy do tohto zoznamu.

Ako nainštalovať favicon na web a zaregistrovať cestu k nemu

Váš prehliadač a vyhľadávací robot Yandex budú vyhľadajte favicon predovšetkým v koreňovom priečinku vašej stránky, Preto sa môžete jednoducho pripojiť k serveru cez FTP a nahrať do svojho koreňového adresára (zvyčajne public_htm alebo htdocs priečinky) svoj súbor Favicon.ico (je lepšie napísať jeho meno malým písmenom). Teraz otvorte svoj prostriedok v niektorom prehliadači a zistite, či sa ikona na karte zmenila. Zmenilo sa? Nie? To je v poriadku.

Ak sa vám nepodarilo nastaviť favicon týmto spôsobom, bude pravdepodobne potrebné vyčistiť vyrovnávaciu pamäť prehliadača často sa stáva, že stará verzia sa načíta z vyrovnávacej pamäte. Môžete skúsiť otvoriť svoj web v FireFoxe, najlepšie reaguje na prebiehajúce zmeny bez vymazania vyrovnávacej pamäte. Ak nejde o vyrovnávaciu pamäť prehliadača, znamená to Vaše stránky sú nastavené na iné miesto pre faviconiné ako v koreňovom priečinku. Ako to skontrolovať?

Otvorte zdrojový kód ľubovoľnej stránky na vašom webe. Ak chcete zobraziť jeho zdrojový kód, stačí kliknúť pravým tlačidlom myši na stránku a vybrať príslušnú položku kontextového menu (napríklad „Zdrojový kód“ v starej opere alebo „Zdrojový kód“ v aplikácii Mazila Firefox alebo „Zobraziť kód stránky“ v prehliadači Google Chrome). alebo „Zobraziť HTML kód“ v IE) alebo stlačte Ctrl + U. Теперь поищите в верхней части кода страницы строку, задающую путь до favicon.ico.

Она может выглядеть примерно так:

Теперь, зная этот путь, вы можете опять подключиться по протоколу FTP и загрузить по указанному пути свою фавиконку, заменив ею уже имеющуюся на сайте. Если никаких изменений в адресной строке браузера опять не произошло, то попробуйте в очередной раз очистить кэш браузера.

Joomla Favicon обычно живет в папке с используемым вами шаблоном (путь до нее в Joomla 1.5 прописывался в файле index.php из каталога этого же шаблона,а вот в Joomla 3 все стало несколько сложнее). tj для смены фавикона в Джумле достаточно будет пройти по этому пути и залить туда свой файлик favicon.ico, а на вопрос о замене ответить утвердительно:

Файлик favicon в WordPress по умолчанию тоже может лежать в папке с используемой вами темой (там же и задается путь до него):

В общем, если хотите задать или поменять путь до вашего фавикона, ktorým by prehliadače aj vyhľadávací robot Yandex rozumeli, musíte sa medzi príslušnými úvodnými a záverečnými značkami zaregistrovať v príslušnom súbore šablónu Joomla, WordPress alebo akýkoľvek iný stroj. HEAD, nasledujúce riadky kódu:

V ktorom súbore šablóny musíte tieto riadky zaregistrovať, záleží na motore vášho webu. Napríklad v vo WordPress Musíte otvoriť súbor header.php na úpravy z priečinka s témou, ktorú používate: wp-content / themes / Folder_with_ your_theme_of_design. Otvorte header.php v editore a hneď na začiatku nájdete úvodnú Html značku HEAD. Na ktoromkoľvek mieste za ňou, ale pred záverečnou hlavičkou, napíšte jeden z riadkov kódu vyššie a uveďte cestu k súboru s obrázkom mini loga.

Ako nainštalovať animovaný favicon? V podstate rovnako ako bežné. Líši sa iba kód vložený do šablóny vášho webu, pomocou ktorého prehliadačom a vyhľadávaciemu robotovi Yandex označíte cestu k požadovanému súboru s obrázkom. Faktom je, že animovaný Favicon bude mať rozšírenie GIF, a preto budete musieť do riadkov kódu napísať niečo také:

To je celý rozdiel medzi animovaným favicon a bežným. Je však potrebné poznamenať, že animovaná ikona bude fungovať iba vo FireFoxe, v iných prehliadačoch bude statická. Yandex pri načítaní animovaného favicon ho prevedie do statického formátu PNG. Ale podľa môjho názoru hra nestojí za sviečku - inštalácia animovaného namiesto obvyklého mini-loga pre web nemá veľký zmysel. Ale toto je iba môj IMHO.

Ikony pre iPhone a iPad

Aj keď neurčíte odkaz na obrázok, iphone bude aj naďalej vyhľadávať v koreňovom priečinku na webe súbor s názvom apple-touch-icon.png a ak tak urobí, vyfotí z neho obrázok, zaokrúhli ho v rohoch a automaticky ho zvýrazní zariadení. Aby ste tomu zabránili, mali by ste namiesto apple-touch-icon.png napísať apple-touch-icon-precomposed.png vlastníkom iPhónov a bodiek, pretože vytvoríme pre nich krásnu ikonu s rozmermi 57x57 (je to mimochodom možné, ale je to štandardná veľkosť ikony na obednej obrazovke), ktorá ju spája takto:

Správne publikujte a vyhlasujte ikony pre staré a nové iPady sietnice:

Otázky na vytvorenie favicon

Favicon je malá ikona, zvyčajne 16x16, ktorá sa zobrazuje vedľa názvu stránky v okne prehliadača alebo vo vyhľadávacom nástroji. Spravidla nemá žiadnu funkciu, ale jeho použitie vám umožňuje zvýšiť uznanie vašich stránok a v dôsledku toho aj MP. Môžete tiež vytvoriť sietnicu faviconoca.

Ak vážne uvažujete o tom, ako vytvoriť ikonu pre tento web (favicon), potom sa v tomto prípade stane generátor favicon na našom webe nevyhnutným nástrojom. Z obrázku môžete nielen vytvoriť favicon, ale môžete tiež použiť vstavaný editor, ktorý vám umožní vytvoriť ikonu pre web, obmedzenú iba vašej fantázii.

Po vytvorení favicon získate súbor favicon.ico pre web, tj súbor s príponou * .ico. V budúcnosti bude potrebné ho použiť.

Aby sa favicon, ktorý ste vytvorili, zobrazil vo vašom prostriedku, musíte ho odovzdať do koreňového adresára vášho prostriedku. Po indexovaní vášho webu pomocou vyhľadávacích robotov a aktualizácii výsledkov sa ikona vytvorená pomocou nášho generátora favicon zobrazí v hlavičke prehliadača a oproti vášmu webu vo výsledkoch vyhľadávania.

Pozrite si video: 17 tvorba www stránek favicon (Február 2020).