Wierz\u0119, \u017ce obecnie do\u015b\u0107 cz\u0119sto zapominam czy nie wiemy, dlaczego naprawd\u0119 potrzebujemy favicons. To nie jest tak haniebne, poniewa\u017c ta informacja nie nale\u017cy do kategorii najwa\u017cniejszych rzeczy, o kt\u00f3rych powiniene\u015b wiedzie\u0107. Je\u015bli jednak prowadzisz w\u0142asn\u0105 witryn\u0119 internetow\u0105, musisz o tym wiedzie\u0107. Wi\u0119c, zanim przejdziemy do opisania sposob\u00f3w dodawania favicons, om\u00f3wmy czym s\u0105 te elementy.<\/p>\n
\n
Czym jest favicon?<\/h2>\n
Wyraz \"favicon\" oznacza \"ulubion\u0105 ikon\u0119\". Jest to ma\u0142a ikona witryny o rozmiarze 16x16px, kt\u00f3r\u0105 mo\u017cna zobaczy\u0107 po lewej stronie paska adresu w przegl\u0105darce. Tak\u0105 ikon\u0119 Ty i ka\u017cdy u\u017cytkownik witryny widz\u0105 na li\u015bcie zak\u0142adek i menu rozwijanym w\u015br\u00f3d przewidywanych adres\u00f3w URL.<\/p>\n
\n
Cel favicon<\/h2>\n
Mimo \u017ce ikony s\u0105 najmniej istotn\u0105 cz\u0119\u015bci\u0105 witryny, nadal pokazuje dba\u0142o\u015b\u0107 o szczeg\u00f3\u0142y, kt\u00f3re sprawiaj\u0105, \u017ce witryna jest ekscytuj\u0105ca. Ma\u0142e kwadratowe \u201eodznaki\u201d s\u0105 r\u00f3wnie\u017c znacz\u0105ce, je\u015bli chcesz powiedzie\u0107 o swojej marce. Ale g\u0142\u00f3wnym celem dzisiejszych ulubionych jest poprawa jako\u015bci obs\u0142ugi. Ikona brakuj\u0105cej witryny ma uniwersalny symbol przegl\u0105darki i ko\u0144czy si\u0119 na setkach innych witryn.<\/p>\n
Miniatury witryn informuj\u0105 o dodatkowych wysi\u0142kach, kt\u00f3re podejmujesz, aby witryna by\u0142a atrakcyjna dla odbiorc\u00f3w. Z punktu widzenia marki obraz strony internetowej sprawi, \u017ce odwiedzaj\u0105cy i potencjalni klienci wybior\u0105 Twoj\u0105 witryn\u0119, poniewa\u017c b\u0119d\u0105 ci bardziej ufa\u0107 i doceni\u0105 twoje wysi\u0142ki. Zacznij ulepsza\u0107 sw\u00f3j branding online ju\u017c dzi\u015b; dzi\u0119ki grafice internetowej 16x16 sta\u0142o si\u0119 \u0142atwiejsze ni\u017c kiedykolwiek!<\/p>\n
\n
Jak stworzy\u0107 Favicon? Generatory<\/h2>\n
Tworzenie favicon nie jest trudne, szczeg\u00f3lnie je\u015bli umiesz pracowa\u0107 w Photoshop lub innym graficznym edytorze. Zwykle rozmiar favicon wynosi 32x32 lub 16x16 pikseli. Jest jednak ma\u0142a wskaz\u00f3wka, kt\u00f3ra pomo\u017ce Ci stworzy\u0107 favicon: wystarczy utworzy\u0107 dokument o rozmiarze 128x128 pikseli w programie Photoshop, a nast\u0119pnie po prostu zmieni\u0107 jego rozmiar na 16x16 pikseli.<\/p>\n
- \n
- Przytnij lub dodaj miejsce wok\u00f3\u0142 obrazu, aby by\u0142o kwadratowe;<\/li>\n
- Edytuj ikon\u0119 do 16 x 16 pikseli;<\/li>\n
- Zapisz j\u0105 jako favicon.ico;<\/li>\n
- Gdy obraz b\u0119dzie gotowy, prze\u015blij go na http:\/\/www.yourdomain.com\/favicon.ico;<\/li>\n
- Wyczy\u015b\u0107 pami\u0119\u0107 podr\u0119czn\u0105 i ponownie za\u0142aduj stron\u0119, je\u015bli ikona nie jest wy\u015bwietlana.<\/li>\n<\/ol>\n
Je\u015bli nie jeste\u015b zawodowym web projektantem mo\u017cesz skorzysta\u0107 z tych stron internetowych. Mo\u017cesz wybra\u0107 gotowy favicon z istniej\u0105cej kolekcji lub stworzy\u0107 w\u0142asny!<\/p>\n
- \n
- Favicon.cc<\/a><\/li>\n
- Faviconer.com<\/a><\/li>\n
- Faviconeditor<\/a><\/li>\n<\/ul>\n
\nJak zainstalowa\u0107 Favicon w WordPress?<\/h2>\n
Instalacja ikony na stronie WordPress zajmie Ci chwil\u0119. Prze\u015blij plik .ico do g\u0142\u00f3wnego folderu motywu za pomoc\u0105 klienta FTP, a nast\u0119pnie prze\u015blij kopi\u0119 pliku favicon.ico do g\u0142\u00f3wnego katalogu witryny, aby by\u0142 wy\u015bwietlany w \u201eczytnikach kana\u0142\u00f3w\u201d u\u017cytkownik\u00f3w. Teraz wszystko jest gotowe! Kr\u00f3tko m\u00f3wi\u0105c, ikony witryn s\u0105 niezb\u0119dne do rozpoznania witryny i marki. Nie ma usprawiedliwienia, aby nie tworzy\u0107 kwadratowej grafiki.<\/p>\n
M\u00f3wi\u0105, \u017ce diabe\u0142 tkwi w szczeg\u00f3\u0142ach, a te szczeg\u00f3\u0142y to tak zwane miniatury stron internetowych, na kt\u00f3re ludzie zwykle nie zwracaj\u0105 du\u017cej uwagi. Po\u015bwi\u0119\u0107 troch\u0119 czasu, aby doda\u0107 miniatur\u0119 do swojej witryny ju\u017c dzi\u015b i zdoby\u0107 wi\u0119cej klient\u00f3w jutro, poniewa\u017c obraz strony internetowej jest dowodem profesjonalizmu i dba\u0142o\u015bci o szczeg\u00f3\u0142y, co jest bardzo cenione.<\/p>\n
\nCzym jest favicon i dlaczego go potrzebujesz?<\/h2>\n
Jest on wy\u015bwietlany na kartach przegl\u0105darki, kana\u0142ach RSS, katalogach witryn, niekt\u00f3rych wyszukiwarkach, takich jak Yandex itp., Wskazuj\u0105c w ten spos\u00f3b Twoj\u0105 witryn\u0119 i czyni\u0105c j\u0105 bardziej widoczn\u0105. Tradycyjnie jest to plik .ICO 16x16px<\/strong>, ale wsp\u00f3\u0142czesne wersje WordPress obs\u0142uguj\u0105 wszystkie typy plik\u00f3w graficznych o dowolnym rozmiarze, co, szczerze m\u00f3wi\u0105c, powinno by\u0142o zosta\u0107 wykonane dawno temu.<\/p>\n
* * *<\/p>\n
W WordPress w wersji 4.2 i starszej musisz utworzy\u0107 favicon.ico i umie\u015b\u0107 go w folderze g\u0142\u00f3wnym swojej witryny za pomoc\u0105 Total Commander, cPanel lub innego narz\u0119dzia, kt\u00f3rego u\u017cywasz do przesy\u0142ania plik\u00f3w na konto hostingowe. Najprostszym sposobem na jego utworzenie jest skorzystanie z jednej z bezp\u0142atnych us\u0142ug online - na przyk\u0142ad tego generatora<\/a>. Wybierz obraz na komputerze, kliknij przycisk \u201eGeneruj favicon\u201d i pobierz wynik w formacie .ICO.<\/p>\n
\n![\"\"\/](\"https:\/\/www.templatemonster.com\/blog\/wp-content\/uploads\/2016\/06\/favicon1.png\")
<\/figure>\n<\/div>\nTeraz prze\u015blij wszystko na serwer.<\/p>\n
\n![\"\"\/](\"https:\/\/www.templatemonster.com\/blog\/wp-content\/uploads\/2016\/06\/favicon2.png\")
<\/figure>\n<\/div>\nNa koniec przejd\u017a do Wygl\u0105d> Edytor na kokpicie, wybierz header.php i upewnij si\u0119, \u017ce jego obszar <head> zawiera nast\u0119puj\u0105ce linie:<\/p>\n
<link rel=\"shortcut icon\" href=\"\/favicon.ico\" type=\"image\/x-icon\"><\/em>
<link rel=\"icon\" href=\"\/favicon.ico\" type=\"image\/x-icon\"><\/em><\/p>\nJe\u015bli nie, dodaj je samodzielnie. Nie zapomnij zapisa\u0107 zmian.<\/p>\n
\n![\"\"\/](\"https:\/\/www.templatemonster.com\/blog\/wp-content\/uploads\/2016\/06\/favicon3.png\")
<\/figure>\n<\/div>\nPo zako\u0144czeniu nowa ikona pojawi si\u0119 na karcie przegl\u0105darki - dzi\u0119ki temu b\u0119dziesz wiedza\u0142, \u017ce wszystko dzia\u0142a tak, jak powinno.<\/p>\n
* * *<\/p>\n
W WordPress w wersji 4.3 lub nowszej favicon s\u0142u\u017cy r\u00f3wnie\u017c jako ikona aplikacji, a ta ostatnia powinna by\u0107 kompatybilna z wy\u015bwietlaczami siatk\u00f3wki. Dlatego obraz favicon powinien mie\u0107 co najmniej 512 pikseli na ka\u017cdy rozmiar. Mo\u017cesz go zainstalowa\u0107 za pomoc\u0105 menu Dostosuj w adminie WordPress. Ta opcja zazwyczaj znajduje si\u0119 na karcie \u201eTo\u017csamo\u015b\u0107 witryny\u201d, ale w niekt\u00f3rych motywach jej lokalizacja mo\u017ce si\u0119 r\u00f3\u017cni\u0107.<\/p>\n
\n![\"\"\/](\"https:\/\/www.templatemonster.com\/blog\/wp-content\/uploads\/2016\/06\/favicon4.png\")
<\/figure>\n<\/div>\nKliknij \u2018Zmie\u0144 obrazek\u2019<\/strong>, prze\u015blij przysz\u0142\u0105 ikon\u0119 i zapisz zmiany.<\/p>\n
\n![\"\"\/](\"https:\/\/www.templatemonster.com\/blog\/wp-content\/uploads\/2016\/06\/favicon5.png\")
<\/figure>\n<\/div>\nI to wszystko, Teraz wiesz jak doda\u0107 favicon na WordPress.<\/p>\n
\nCzy naprawd\u0119 s\u0105 potrzebne?<\/h2>\n
Odpowied\u017a brzmi - tak. Favicon jest dobry na wielu poziomach. Ta ikona u\u0142atwia identyfikacj\u0119 witryny w internecie pomaga jej wyr\u00f3\u017cnia\u0107 si\u0119 spo\u015br\u00f3d innych. Tak naprawd\u0119, to ka\u017cda strona ma favicon, ale mo\u017cesz stworzy\u0107 dla swojej niepowtarzalny.<\/p>\n
Sp\u00f3jrz jak wygl\u0105daj\u0105 favicons, gdy masz wi\u0119cej ni\u017c kilka otwartych kart w Chrome lub jakiejkolwiek innej przegl\u0105darce.<\/p>\n
\n![\"wordpress](\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2017\/09\/image1-2-1.png?x47994\")
<\/figure>\n<\/div>\n\n<\/figure>\n<\/div>\nJe\u015bli cz\u0119sto korzystasz z internetu, wiesz, jak cz\u0119sto zdarzaj\u0105 si\u0119 sytuacje, gdy s\u0105 otwarte 10 kart i musisz zidentyfikowa\u0107 ka\u017cd\u0105 witryn\u0119 bez ikony wy\u015bwietlanej na karcie.<\/p>\n
\nWtyczki dla Favicon WordPress<\/h2>\n
Tak\u017ce, je\u015bli pracujesz z WordPress, mo\u017cesz skorzysta\u0107 ze wtyczek, pozwalaj\u0105cych na dodawanie favicon dl strony.<\/p>\n
- \n
- RealFaviconGenerator<\/a> - Ta wtyczka pomo\u017ce bezproblemowo przes\u0142a\u0107 wybrany favicon na stron\u0119. W dodatku, mo\u017cna nie tylko stworzy\u0107, a r\u00f3wnie\u017c tak\u017ce wygenerowa\u0107 ikon\u0119 z gotowego obrazka w mediatece.<\/li>\n<\/ul>\n\n
![\"\"](\"https:\/\/www.templatemonster.com\/blog\/pl\/wp-content\/uploads\/sites\/6\/2017\/10\/favicon-01.png\")
<\/figure>\n<\/div>\n- \n
- All In One Favicon <\/a>- Ta wtyczka s\u0142u\u017cy nie tylko do przesy\u0142ania favicon do witryny WordPress, ale r\u00f3wnie\u017c do obs\u0142ugi tych ikon na urz\u0105dzeniach Apple Touch.<\/li>\n<\/ul>\n\n
![\"\"](\"https:\/\/www.templatemonster.com\/blog\/pl\/wp-content\/uploads\/sites\/6\/2017\/10\/favicon-02.jpg\")
<\/figure>\n<\/div>\n* * *<\/p>\n
P.S.<\/strong> Nie zapomnij aby sprawdzi\u0107 zestaw naszych motyw\u00f3w WordPress<\/a>! <\/em><\/p>\n
\nTen artyku\u0142 zosta\u0142 przet\u0142umaczony z angielskiego. Orygina\u0142 mo\u017cna znale\u017a\u0107 tutaj: How To Add A Favicon To Your WordPress Website<\/a>.<\/em><\/p>\n
\nCzytaj r\u00f3wnie\u017c:<\/h3>\n
Tutorial: jak zmieni\u0107 domy\u015blny kolor i typografi\u0119 w motywie WordPress<\/a><\/p>\n
Jak wy\u0142\u0105czy\u0107 pingbacki w WordPressie<\/a><\/p>\n
- All In One Favicon <\/a>- Ta wtyczka s\u0142u\u017cy nie tylko do przesy\u0142ania favicon do witryny WordPress, ale r\u00f3wnie\u017c do obs\u0142ugi tych ikon na urz\u0105dzeniach Apple Touch.<\/li>\n<\/ul>\n
- Faviconer.com<\/a><\/li>\n
- Favicon.cc<\/a><\/li>\n