BLOG

Jak zrobić favicon i jak dodać favicon na bloga cz.2 ?

jak zrobić i dodać do bloga favicon
Share on facebook
Share on twitter
Share on linkedin

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.


DZIEWCZYNA ZA BLOGIEM

Jestem Kamila Nitschka

Jestem tutaj, aby szybko i łatwo stworzyć stronę internetową Twoich marzeń lub nauczyć Cię jak możesz to zrobić sama w prosty sposób i bez stresu oczywiście wykorzystując w tym celu WordPressa.

Kategorie

Share on facebook
Share on google
Share on twitter
Autor artykułu

8 thoughts on “Jak zrobić favicon i jak dodać favicon na bloga cz.2 ?”

  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.

  2. 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

  3. 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ź.

    1. 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.

Komentowanie jest zablokowane.