6 komentarzy Grafika na bloga, Wordpress Poradniki, Wtyczki Wordpress

W poprzedniej części przedstawiłam ci zalety posiadania favicon na stronie. Jeśli nie czytałeś artykułu i nie wiesz co to jest favicon i po co favicon na stronie to przeczytaj koniecznie. Jeśli postanowiłeś/aś zrobić favicon na stronę lub bloga to w tym artykule pokażę ci jak zrobić favicon 2 metodami oraz jaki dodać favicon na stronę.

Jak stworzyć favicon ?

Wymyśl swój favicon.

Na początku zastanów się co ma zawierać twój favicon ? Jest, to chyba najtrudniejsza rzecz, jaka przyjdzie Ci zrobić. Dlaczego, to takie trudne ?, ponieważ przypominam, że favicon ma wymiary 16×16 px. Wymiar ten niesamowicie komplikuje wygląd favicony.

Co może zawierać i przedstawiać favicon ?co to jest favicon

Twój favicon może przedstawiać logo twojej strony. Jednak, jeśli twoje logo jest zbyt skomplikowane może nieciekawie wyglądać jako ikonka o wymiarach 16x16px. Widziałam favicony, które przedstawiają zdjęcie autora bloga, jednak, to też mało ciekawie wygląda, ponieważ twarz jest minimalnie widoczna.
Najlepiej jak stworzysz favicone np. z inicjałów, jeśli prowadzisz bloga pod swoim imieniem i nazwiskiem, pierwszą literę nazwy firmy lub jakiś wzór, który przedstawia twoje logo.

Rozszerzenie favicon .ico, .jpg, .png

Twój favicon może być w postaci pliku graficznego o rozszerzeniu

  • .jpg,
  • .png,
  • .gif
  • .ico

Najpopularniejszym rozszerzeniem jest oczywiście format .ico, z jednego powodu, format ten obsługiwany jest przez wszystkie przeglądarki, czyli mamy pewność, że nasz favicon wyświetli się czytelnikowi, który korzysta z mozilli, opery, safari, IE itp.

favicon jak zrobic
źródło: wikipedia.org

2 metody, aby zrobić favicon.

Metoda 1, aby stworzyć favicon

Najprościej jest skorzystać z generatorów online, które pomogą stworzyć favicon. W internecie mamy do dyspozycji kilkadziesiąt generatorów, z których możemy korzystać za darmo. Co musimy zrobić, aby stworzyć favicon ? Narysować obrazek.
Polecam dwie strony, które nam pomogą zrobić favicon:

http://www.favicon.cc/
http://www.degraeve.com/favicon/

Oba generatory stworzą twój favicon od razu z rozszerzeniem .ico, więc nie będziesz musiał/a się martwić jak prze konwertować obrazek na ten format.

Metoda 2, aby zrobić favicon

Aby zrobić favicon musisz przygotować obrazek, tym celu możesz wykorzystać programy graficzne np. gimp, photoshop, a nawet paint. Jeśli nie chcesz bawić się w tych programach, to polecam stronę ala photoshop, tylko że online, dzięki tej strony możesz zrobić obrazek online. Strona http://pixlr.com/editor/

W tym sposobie nie masz możliwości zrobienia favicony z rozszerzeniem .ico. Jeśli używasz photoshopa do stworzenia favicony możesz pobrać darmową wtyczkę do tego programu, dzięki, której będziesz mógł/a zrobić ikonkę .ico. Wtyczka Photoshop .ico

Rozpakuj paczkę .zip i plik “ICOFormat.8BI” umieść w katalogu insFile w folderze Adobe Photoshop, na którym jest zainstalowany twój photoshop.

Jak przekonwertować favicon na .ico

Jeśli stworzyłeś swój favicon z rozszerzeniem .jpg, .png, .gif możesz użyć generatorów online oczywiście darmowych, które prze konwertują ci faviconę na .ico

Jak dodać favicon na stronę internetową.

Posiadasz już swoją faviconkę i teraz przyszedł czas aby umieścić ją na swojej stronie www.

Wgraj plik favicony do katalogu głównego twojej strony internetowej.
A następnie w kodzie strony musisz odnaleźć sekcję <head> i w niej umieścić kod przed zamknięciem tego znacznika, czyli </head>

<link href=””favicon.ico”” rel=””shortcut” type=””image/vnd.microsoft.icon”” data-mce-href=””favicon.ico”” />

Wcześniej stosowano typ “image / x-icon”, natomiast ”image/vnd.microsoft.icon” jest jego nowszą wersją.

Jak dodać favicon na bloga WordPress

Możemy wykonać ten sam zabieg co w przypadku strony internetowej, czyli dodać ręcznie kod w kodzie strony z tym, że kod będzie wyglądać nieco, inaczej, a mianowicie:

  < Link rel = “shortcut icon” typ = “image / x-icon” href = “<bloginfo php (‘wpurl’);?> / favicon.ico” >

Kod ten oczywiście umieszczamy w sekcji <head> w pliku header.php motywu/szablony bloga.
Nie zapomnij wgrać favicon na serwer.

2 wtyczki WordPress do dodania favicony na bloga

W przypadku bloga WordPress możemy również użyć wtyczek, które dodadzą nam faviconę do bloga automatycznie bez grzebania w kodzie strony.
Warte polecenia jest wtyczka All In one Favicon, wystarczy zainstalować wtyczkę na blogu, włączyć ją, a następnie wgrać nasz plik.

Drugą wtyczkę wordPress, którą Ci mogę polecić jest MaxBlogPress. Ta wtyczka jest o tyle ciekawe, ponieważ mamy możliwości skorzystania z gotowych favicon.


Kamila Nitschka on Facebook
Kamila Nitschka
Specjalizuję się w Wordpressie od kilku lat. Tworzę strony internetowe w oparciu o WP dla swoich klientów. WordPress wykorzystuje nie tylko do budowy stron internetowych, ale także to budowania platform dla kursów online, sprzedaży kursów mailowych i innych.
Tagi
6 Komentarzy
  1. darek mołodecki

    wpisujac kod w nagłówek należy pamietać ze po aktualizacji szablony tą czynność będzie należało powtórzyć i dla tego dla zapominalskich lepszym rozwiazaniem jest wtyczka.
    darek mołodecki ostatnio opublikował…Google Drive jak go wykorzystać? + Film jak to zrobićMy Profile

    Reply
  2. Kamila

    Tak masz rację Darku, zapomniałam o tym wspomnieć. Dzięki za czujność 🙂

    Reply
  3. Jacek Pastuszko

    Kamilo, w dobrym dla mnie momencie napisałaś o faviconie, bo uruchomiłem nowego bloga i miałem szukać jak wstawiać favicon.
    Dla mnie najlepszym rozwiązaniem jest wtyczka, bo mam pamięć dobrą tylko krótką. Dzięki niej nie muszę myśleć w wklejaniu kodu po aktualizacji.

    Pozdrawiam,
    Jacek Pastuszko

    Reply
  4. Ireneusz Kazimierczak

    Wtyczka All In One Favicon jest bardzo prosta w obsłudze. Wchodzimy w ustawienia wtyczki, ściągamy favicon z kompa, zapisujemy zmiany i to wszystko. Nie ma ryzyka, że coś popsujemy w kodzie itd. Dzięki za podpowiedź.

    Reply
    1. Kamila

      Tak Irku mega proste i wtyczka robi wszystko za nas. Nawet nie trzeba pamiętać przy zmianie szablonu, żeby wstawić kod na nowo bo wtyczka będzie włączona dla wszystkich szablonów instalowanych na blogu.

      Reply
  5. jozek

    To się chwali – artykuł pomógł mi stworzyć odpowiednią ikonkę do strony.

    Reply

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

CommentLuv badge