Własna ikona w pasku adresu (favicon)
HTML + CSS Aktualizacja: 24.07.2017

Własna ikona w pasku adresu (favicon)

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.

Autor: . Tagi: , , . Źródło obrazek główny: własne.

2
Dodaj komentarz

avatar
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
KyenComandeer Recent comment authors

This site uses Akismet to reduce spam. Learn how your comment data is processed.

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ść
Comandeer

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