Własna ikona w pasku adresu (favicon)

Bartosz

Bartosz Stefanicki Poniedziałek, 22.04.2024

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.

Warto zobaczyć

Szukasz hostingu?

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

Data publikacji: Niedziela, 16.05.2010. Tagi: html, ikony, przeglądarki internetowe. Źródło obrazka Pixabay, Font awesome.

12 komentarzy


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

Strona korzysta z plików cookies w celu realizacji usług i zgodnie z Polityką prywatności. Możesz określić warunki przechowywania lub dostępu do plików cookies w Twojej przeglądarce.