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

Opublikowano: 16 maja 2010. 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