Własna ikona w pasku adresu (favicon)
Ikona, która pojawia się przed adresem w polu adresowym przeglądarki to tak zwana "favicona". Nazwa pochodzi z języka angielskiego: "favorites icon".
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.
Kategorie: HTML + CSS. Tagi: #html, #ikony, #przeglądarki internetowe. Źródło obrazków: Pixabay, Font awesome.
Zobacz także
12 komentarzy
