Omówimy dzisiaj ikonę, która pojawia się przed adresem w polu adresowym przeglądarki - tzw. faviconę. Nazwa pochodzi z języka angielskiego: "favorites icon", co oznacza ikonę ulubionych. Ma postać obrazka o wymiarach 16x16 lub 32x32 pikseli. Wbrew pozorom taka ikonka, jest bardzo użytecznym elementem każdej strony internetowej. Użytkownikowi który pierwszy raz odwiedza dany serwis, jest go łatwiej zachować w pamięci gdy zobaczy charakterystyczną ikonę obok adresu www.

W przypadku otwierania wielu kart w przeglądarce, internauta zapewne zajrzy wpierw na stronę posiadającą ciekawą ikonkę, niż na taką której wyświetla się niczym nie wyróżniająca się standardowa grafika przeglądarki.

1. Tworzenie własnej favicony

Tworzenie favicony rozpoczniemy od uruchomienia dowolnego programu graficznego, w którym otwieramy nowe okno o wymiarach 16x16px. Można w nim coś narysować, dodać nazwę serwisu lub dostosować posiadane logo do jego wymiarów.

Jeśli nie możemy sobie poradzić z utworzeniem własnej grafiki, zawsze można skorzystać z generatorów online: www.favicon.cc, tools.dynamicdrive.com/favicon/ lub favicon-generator.org.

Gdy skończymy tworzyć ikonkę, należy ją zapisać w formacie .ico, który jest najczęściej używany.

2. Umieszczenie favicony w serwisie

Wklejamy poniższy kod między znacznik <head>.

<link rel="shortcut icon" href="http://nazwa-serwisu.pl/favicon.ico" type="image/x-icon">

http://nazwa-serwisu.pl/favicon.ico - względny lub absolutny adres URL pliku favicon.

Wysyłamy na serwer za pomocą klienta FTP gotowy plik favicon.ico, do katalogu głównego strony. To wszystko, co należało zrobić w tym kierunku. Od tego momentu odwiedzającym Twój serwis będzie pojawiała się favicona.

↑ Skocz do góry

Autor: Bartosz Stefanicki.
Tagi: , , .

Dodaj komentarz

2 komentarzy do "Własna ikona w pasku adresu (favicon)"

avatar
Sortuj wg:   najnowszy | najstarszy | oceniany
Kyen
Gość

Całkiem przydatny poradnik :P Do przerobienia obrazków do formatu *ico polecam program IrfanView - wystarczy otworzyć w nim obrazek i zapisać go tym formacie...

Comandeer
Gość

Można się posunąć jeszcze dalej i ikonkę .ico serwować jedynie IE, a wszystkim pozostałym wypasioną ikonkę w .png

wpDiscuz