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

Własna ikona w pasku adresu (favicon)

Data aktualizacji: 18.12.2019

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". 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.

Szukasz hostingu?

Jest dużo firm oferujących hosting, ale którą wybrać? Przedstawiamy zestawienie najciekawszych propozycji i ranking hostingów (Czerwiec 2022).

Autor: Bartosz Stefanicki. Data publikacji: 16.05.2010 r. Tagi: html, ikony, przeglądarki internetowe. Źródło obrazka porady: własne.

12 komentarzy

Statystyki

  • 179

    Liczba porad
  • 1 805

    Liczba komentarzy
  • 5

    Narzędzi online

© 2005-2022 itporady.pl. Wszystkie prawa zastrzeżone.

Używamy informacji zapisanych za pomocą cookies i podobnych technologii m.in. w celach reklamowych, statystycznych oraz dostosowania naszych serwisów do indywidualnych potrzeb użytkowników.