Prakticky na všetkých moderných stránkach na internete je na karte prehliadača zobrazená špeciálna ikona po úplnom načítaní zdroja. Tento obrázok vytvára a inštaluje každý vlastník nezávisle, hoci to nie je povinné. Ako súčasť tohto článku budeme diskutovať o možnostiach inštalácie Favicon na stránky vytvorené rôznymi spôsobmi.

Pridanie Favicon na stránku

Ak chcete na tento web pridať tento typ ikony, musíte na začiatok vytvoriť vhodný obrázok štvorcového tvaru. To je možné urobiť ako pri použití špeciálnych grafických programov, photoshop , a uchýlil sa k niektorým online službám. Navyše je žiaduce prekonvertovať pripravenú ikonu vopred do formátu ICO a znížiť ju na veľkosť 512 × 512 px .

Poznámka: Bez pridania vlastného obrázka sa na karte zobrazí ikona dokumentu.

Pozri tiež:
Online služby na vytvorenie favicon
Ako vytvoriť obrázok vo formáte ICO

Možnosť 1: Pridať ručne

Táto možnosť pridávania ikony na stránku vám vyhovuje, ak nepoužívate platformu, ktorá poskytuje špeciálne nástroje.

Metóda 1: Stiahnite si softvér Favicon

Najjednoduchšou metódou podporovanou doslova akýmkoľvek moderným internetovým prehliadačom je pridať predtým vytvorený obrázok do koreňového adresára vašich stránok. Môžete to urobiť buď prostredníctvom webového rozhrania alebo prostredníctvom ľubovoľného vhodného manažéra FTP.

Ukážkové ikony pre web vo formáte ico

Niekedy môže mať požadovaný adresár názov "public_html" alebo akýkoľvek iný, podľa vašich preferencií z hľadiska nastavení.

Príklad správneho umiestnenia ikony stránky

Účinnosť metódy priamo závisí nielen na formáte a veľkosti, ale aj na správnom názve súboru.

Metóda 2: Úprava kódu

Niekedy nemusí stačiť len pridať Favicon do koreňového adresára stránky, aby sa zobrazil na karte prehliadačom po úplnom načítaní. V takejto situácii budete musieť upraviť hlavný súbor s označením stránky a pridať na začiatok špeciálny kód.

  1. Pridajte nasledujúci riadok medzi značky "HEAD" , kde by mal byť "* / favicon.ico" nahradený adresou URL vášho obrázka.

  2. Príklad pridania ikon ICO do kódu lokality

  3. Najlepšie je použiť absolútny odkaz s prefixom namiesto relatívnej.
  4. Kód s absolútnym odkazom na ikonu stránky

  5. V niektorých prípadoch môže byť hodnota "rel" zmenená na "ikonu skratky" , čím sa zvyšuje kompatibilita s webovými prehliadačmi.
  6. Zmeňte hodnotu rel na odkaz na ikonu stránky

  7. Hodnotu typu môžete tiež zmeniť v závislosti od formátu použitého obrázka:

    Poznámka: Najbežnejší je formát ICO.

    • ICO - "image / x-icon" alebo "image / vnd.microsoft.icon" ;
    • Príklad pridania ikon ICO na stránku

    • PNG - "obrázok / png" ;
    • Ukážkový kód na pridanie ikon PNG na stránku

    • GIF - "image / gif" .
    • Ukážkový kód na pridanie ikon GIF na stránku

  8. Ak je váš zdroj zameraný predovšetkým na najnovšie prehliadače, reťazec sa môže skrátiť.

  9. Príklad zjednodušeného kódu pre pridanie ikony

  10. Ak chcete dosiahnuť najväčšiu kompatibilitu, môžete pridať niekoľko riadkov naraz s odkazom na stránku favicon.
  11. Použitie viacerých riadkov kódu pre ikonu

  12. Inštalovaný obrázok sa zobrazí na všetkých stránkach stránok, ale môže byť zmenený podľa vlastného uváženia pridaním spomínaného kódu do samostatných častí.
  13. Príklad ikony na karte v prehliadači

V oboch týchto metód bude trvať nejaký čas, kým sa na karte prehliadača zobrazí.

Možnosť 2: Nástroje WordPress

Pri práci s programom WordPress môžete využiť už skôr popísanú možnosť pridaním vyššie uvedeného kódu do súboru "header.php" alebo pomocou špeciálnych nástrojov. Vďaka tomu bude zaručená ikona zobrazená na karte stránky bez ohľadu na prehliadač.

Metóda 1: Ovládací panel

  1. Z hlavnej ponuky rozbaľte zoznam "Vzhľad" a vyberte časť "Prispôsobiť" .
  2. Prejdite do sekcie Prispôsobiť na paneli WordPress

  3. Na stránke, ktorá sa otvorí, musíte použiť tlačidlo "Vlastnosti stránky" .
  4. Prejdite na stránku Vlastnosti stránky v paneli WordPress

  5. Prejdite cez sekciu "Nastavenia" do spodnej časti a v časti "Ikona stránky" kliknite na tlačidlo "Vybrať obrázok" . V takom prípade by mal mať obraz rozlíšenie 512 × 512 px .
  6. Prejdite do ikon na prevzatie v paneli WordPress

  7. Prostredníctvom okna "Vybrať obrázok" odovzdajte požadovaný obrázok do galérie alebo vyberte predtým pridanú fotografiu.
  8. Stiahnite si ikony procesu pre stránky WordPress

  9. Potom sa vrátite do "Vlastnosti stránky" a vybraný obrázok sa zobrazí v bloku "Ikona" . Tu môžete vidieť príklad, prejsť na úpravu alebo odstrániť v prípade potreby.
  10. Úspešné nainštalovanie loga WordPress

  11. Po nastavení požadovanej akcie v príslušnom menu kliknite na tlačidlo "Uložiť" alebo "Publikovať" .
  12. Ukladanie vlastností stránok v aplikácii WordPress

  13. Ak chcete zobraziť logo na karte ľubovoľnej stránky vašej lokality vrátane "Ovládacieho panela" , načítajte ho znovu.
  14. Úspešne ste nainštalovali logo pre stránku WordPress

Metóda 2: All In One Favicon

  1. Na stránke "Ovládací panel" vyberte možnosť "Pluginy" a prejdite na stránku "Pridať nový" .
  2. Prejdite do sekcie Pluginy v programe WordPress Panel

  3. Vyplňte vyhľadávacie pole v súlade s názvom doplnku, ktorý potrebujete - všetko v jednom favicon - av bloku s príslušným rozšírením kliknite na tlačidlo "Install" .

    Vyhľadávací plugin na inštaláciu ikon na WordPress

    Proces pridávania bude nejaký čas trvať.

  4. Inštalácia pluginu v programe WordPress

  5. Teraz musíte kliknúť na tlačidlo "Aktivovať" .
  6. Aktivácia doplnku WordPress

  7. Po automatickom presmerovaní musíte prejsť do sekcie nastavení. Môžete to urobiť pomocou "Nastavenia" výberom položky "Všetko v jednom Favicon" zo zoznamu alebo pomocou odkazu "Nastavenia" na stránke "Pluginy" v bloku s požadovaným rozšírením.
  8. Prepnúť na nastavenia doplnkov v programe WordPress

  9. V sekcii s parametrami doplnku pridajte ikonu do jedného z uvedených riadkov. Toto nastavenie by sa malo zopakovať tak v bloku "Frontend Settings", ako aj v "Backend Settings" .
  10. Nahrajte ikonu Nastavenie frontu na WordPress

  11. Po pridaní obrázka kliknite na tlačidlo Uložiť zmeny .
  12. Nahrávanie Ikona nastavenia Backend do programu WordPress

  13. Po dokončení aktualizácie stránky sa k obrázku priradí jedinečný odkaz, ktorý sa zobrazí na karte prehliadača.
  14. Úspešne nainštalovaná ikona stránky WordPress

Táto možnosť je najjednoduchšia implementácia. Dúfame, že sa vám podarilo nainštalovať Favicon na webe cez ovládací panel WordPress.

záver

Voľba pridania ikony závisí výlučne od vašich predvolieb, pretože vo všetkých možnostiach môžete dosiahnuť požadovaný výsledok. Ak vzniknú ťažkosti, skontrolujte vykonané akcie a v komentároch môžete požiadať o zodpovedajúcu otázku.