Jak utworzyć plik Favicon.ico: 5 kroków (z obrazami)

Jak utworzyć plik Favicon.ico: 5 kroków (z obrazami)
Jak utworzyć plik Favicon.ico: 5 kroków (z obrazami)

Spisu treści:

Anonim

Gdy odwiedzasz witryny takie jak Google, Yahoo czy wikiHow, możesz zobaczyć małą ikonę po lewej stronie paska adresu. Ta ikona jest znana jako favicon i możesz ją utworzyć dla swojej własnej witryny. Oprócz nadania witrynie profesjonalnego charakteru, ikona ta pojawi się w segmencie zakładek użytkownika, obok witryn oznaczonych jako ulubione. W ten sposób użytkownicy mogą łatwiej znaleźć Twoją witrynę.

Krok

Utwórz Favicon.ico Krok 1
Utwórz Favicon.ico Krok 1

Krok 1. Utwórz obraz o rozmiarze 16 x 16 pikseli

Używaj prostych obrazów do łatwej identyfikacji.

Utwórz Favicon.ico Krok 2
Utwórz Favicon.ico Krok 2

Krok 2. Konwertuj obraz do pliku „favicon.ico”

Plik musi mieć taką nazwę, aby przeglądarka mogła go rozpoznać. Najłatwiej to zrobić, korzystając z usługi Dynamic Drive FavIcon Generator. Można również skorzystać z darmowego programu do edycji obrazu GIMP i zapisać obraz w rozdzielczości 16 x 16 pikseli w formacie ICO.

Utwórz Favicon.ico Krok 3
Utwórz Favicon.ico Krok 3

Krok 3. Prześlij utworzony plik na stronę internetową

Utwórz Favicon.ico Krok 4
Utwórz Favicon.ico Krok 4

Krok 4. Dodaj następujący kod do kodu HTML witryny

Musisz dodać go do segmentu kodu i upewnić się, że adres katalogu ikon jest poprawny, zgodnie ze stroną internetową. Oto kod, który musisz wprowadzić (zakładając, że pliki.html i.ico znajdują się w tym samym katalogu głównym/górnym):

Utwórz Favicon.ico Krok 5
Utwórz Favicon.ico Krok 5

Krok 5. Odśwież stronę, spójrz i podziwiaj piękną nową ikonę swojej witryny

Porady

  • Mimo że są one bardzo małe, upewnij się, że ludzie mogą łatwo czytać lub rozumieć używane ikony.
  • Jeśli używasz systemu operacyjnego Linux, możesz konwertować pliki bezpośrednio z komputera. Wybierz odpowiedni obraz, otwórz program wiersza poleceń (wiersz poleceń), odwiedź katalog, w którym przechowywany jest plik obrazu, i wpisz: convert image-p.webp" />

Zalecana: