Plik Edycja Zaznaczanie Widok Obraz Warstwa Kolory Narzędzia Filtry Okna
Pomoc

Ikona strony

Favicon

Ikona strony wyświetlana przed tytułem zakładki (okna), historii przeglądanych stron, ulubionych, w wynikach wyszukiwania,  spełnia ważną rolę w identyfikacji. Jest to mały obraz o rozdzielczości 16x16 piksela, najczęściej w formacie PNG.
Wykonamy ikonę w technice pixel art z przezroczystym tłem.

Ćwiczenie

  1. Uruchom edytor grafiki.
  2. Wybierz z menu Plik → Nowy.
  3. W oknie Utworzenie nowego obrazu zmień Wymiary obrazu na 16x16 (px).
  4. Rozwiń Zaawansowane opcje i z listy Wypełnienie wybierz: Kolor tła - z domyślnym kolorem tła, Kolor pierwszoplanowy - z domyślnym kolorem pierwszoplanowym, Białe lub Przezroczyste - dla ikon z brakiem tła.
  5. Zatwierdź przyciskiem OK.
  6. W menu Widok wybierz Wyświetlanie siatki oraz Powiększenie → Cały obraz w oknie.
  7. W menu Obraz wybierz Skonfiguruj siatkę... i w oknie dialogowym Konfiguracja siatki ustaw Odstępy na 1 (Piksele).
  8. W Przyborniku kliknij symbol ołówka i wybierz kolor pierwszoplanowy.
  9. W Opcje narzędzia ustaw Rozmiar np. na 1 piksel.
  10. Zaprojektuj swoją ikonę strony, w czasie rysowania możesz obserwować jej rzeczywisty rozmiar w lewym górnym narożniku aplikacji.
  11. Z menu Plik wybierz Wyeksportuj.
  12. W oknie dialogowym w polu Nazwa wpisz nazwę pliku favicon.png.
  13. Określ lokalizację pliku i naciśnij Wyeksportuj.
  14. Zamknij edytor (Porzuć zmiany).
Zadania
Opublikuj plik w portfolio.
  1. Blogu
    Wskazówka:  Z menu Układ wybierz Favikona (edytuj) więcej.
  2. Stronie
    Wskazówka: W elemencie head umieść kod
    <link rel="icon" href="favicon.png" type="image/png">
    więcej.