Get Adobe Flash player

Animowany favicon

Wizualizacja naszych stron to nie tylko template, galerie czy zdjęcia. Często strony identyfikowane są przez małą ikonkę przy pasku adresu w przeglądarce czyli favicon.

Opiszę jak zrobić i zaimplementować ciekakwy favicon z wędrującym napisem  na stronie.

1. Tworzymy w jakimś programie graficznym np. Gimp lub innym niekoniecznie skomplikowanym obrazek w formacie gif lub jpg o wymiarach powiedzmy 250×250 pixeli. Na takim rozmiarze łątwo pracować. Docelowo będzie miał rozmiar 16×16 pixeli, więc nie może być bardzo złożony, ponieważ po miniaturyzacji nic nie będzie na nim widać.

Przykład 250×250 pixeli

Teraz klikamy na stronę http://www.html-kit.com/favicon/  i w okienko

wklejamy nasz obrazek a następnie generujemy nasz favicon.

Pokazuje nam się okienko


Naszą pracę widzimy w czerwonej ramce. Jeśli teraz ściągniemy ikonę przyciskiem Download FavIcon Package, taki efekt będzie widoczny  w naszej przeglądarce.

Teraz dodamy wędrujący napis. W tym celu klikamy napis Edit i w okienku

zminiamy  "Your Text" na nasz dowolny, który chcemy by pokazywał się przy ikonie w pasku adresu. {PIC1} musi pozostać.

Dodatkowo poniżej możemy zmienić kolor tekstu i kolor tła pod nim. Po zatwierdzeniu zmian przyciskami OK  klikamy na Download FavIcon Package i zapisujemy plik zip na dysku lokalnym.

Teraz implementujemy nasze dzieło na stronę.

Rozpakowujemy zapisane archiwum i łączymy się przez ftp z naszym blogiem. Teraz do katalogu wp-content/themes/nasza_templatka/images kopiujemy plik animated_favicon1.gif.

Następnie logujemy się do zaplecza naszego bloga i klikamy po lewej stronie na "Wygląd" a następnie "Edytor". Po prawej stronie odnajdujemy plik header.php i wybieramy go do edycji. Między znaczniki <head> i </head> kopiujemy poniższy kod

<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" type="image/gif" href="animated_favicon1.gif">

 

zatwierdzamy zmiany i odświeżamy stronę. Efekt powinien być widoczny.

Jeśli wystąpią jakiekolwiek problemy a takie właśnie miałem w swojej templatce, to wpisany kod kasujemy i zastępujemy poniższym, który tu zastosowałem i jak widać działa.

<link rel="shortcut icon" href="http://twoja_strona/wp-content/themes/twoja_theme/images/favicon.ico" />
<link rel="icon" type="image/gif" href="http://twoja_strona/wp-content/themes/twoja_theme/images/animated_favicon1.gif" />

twoja_strona i twoja_theme należy zmienić na odpowiednie dla Twojej strony.

Komentuj