<
  • Главная
Статьи

Jak utworzyć favicon na stronie: przydatne wskazówki i usługi

  1. Jak utworzyć favicon
  2. Jak zrobić favicon w Photoshopie
  3. Jak zapisać favicon
  4. Jak wstawić stronę favicon
  5. Jak zastąpić favicon
  6. Jak stworzyć bardziej złożone favicony

Trudno zgadnąć, czym jest ikona, kiedy po raz pierwszy usłyszysz to słowo. Jest to miniaturowa ikona wyświetlana na kartach przeglądarek, w liniach adresowych i innych obszarach, w zależności od używanego systemu operacyjnego i przeglądarki internetowej. Można go śmiało nazwać jednym z najbardziej złożonych i kapryśnych elementów projektowania stron internetowych.

Tworzenie dobrej ikony jest dość trudne, ponieważ ikona jest mała, powinna być wyraźna i wyświetlać coś związanego z witryną
Tworzenie dobrej ikony jest dość trudne, ponieważ ikona jest mała, powinna być wyraźna i wyświetlać coś związanego z witryną. Tworzenie favikonu zgodnego ze wszystkimi popularnymi przeglądarkami może być również trudnym zadaniem. W tym artykule zajmiemy się wszystkimi złożonymi aspektami jego tworzenia. Jeśli potrzebujesz także logo, to mamy artykuł jak to zrobić.

Jak utworzyć favicon

Zacznijmy od projektu favicon. Dobry design, pomimo swojej zwartości, powinien odzwierciedlać istotę Twojej witryny i być organiczną częścią tożsamości korporacyjnej. Zazwyczaj ikona to znak graficzny (ikona) firmy, a nie całe logo (ikona, tekst i hasło).

Jako favicon, te strony używają swoich ikon (lub obrazów znajdujących się w ich pobliżu) Jako favicon, te strony używają swoich ikon (lub obrazów znajdujących się w ich pobliżu).

Tekst w favicon nie powinien być używany, ponieważ ten tekst będzie nieczytelny z powodu małego rozmiaru obrazu. Jedynymi wyjątkami od tej reguły są znane na całym świecie znaki tekstowe, które są automatycznie kojarzone z konkretną marką. Na przykład w zasobach internetowych Wikipedia pozostawiła na ikonie swoją wielką literę „W”, a Facebook - literę „F”.

Na tych faworytach są litery, które są silnie związane z konkretną marką
Na tych faworytach są litery, które są silnie związane z konkretną marką. Na przykład Facebook używa swojego znaku graficznego. Zauważ również, że piksele są widoczne na obrazie Disneya. Dzieje się tak, ponieważ zrzut ekranu został wykonany na wyświetlaczu Retina, który jest kompatybilny z ikonami 16 × 16, podczas gdy strony internetowe używają ikon 32 × 32.

Ponieważ favikony są małymi obrazkami, każdy piksel odgrywa ważną rolę. Czasami po zmniejszeniu logo pojedyncze piksele stają się widoczne, dzięki czemu obraz staje się „zamazany”. Aby osiągnąć przejrzystość, musisz edytować ikonę na poziomie pikseli.

Aby tego uniknąć, musisz zmienić rozmiar logo za pomocą specjalnych edytorów, takich jak Photoshop lub GIMP
Aby tego uniknąć, musisz zmienić rozmiar logo za pomocą specjalnych edytorów, takich jak Photoshop lub GIMP. Najpierw musisz zmniejszyć rozmiar obrazu do 64x64 pikseli (jest to największy rozmiar favikonu). Następnie musisz edytować każdy piksel za pomocą narzędzia Ołówek, aż obraz będzie czysty. Jest to żmudny proces, ale wynik jest tego wart. Gdy favicon 64x64 jest gotowy, musisz wykonać tę samą pracę z obrazem 16 × 16, 24 × 24 i 32 × 32 pikseli. Tyle rozmiarów, aby poprawnie wyświetlać obraz we wszystkich przeglądarkach i gadżetach:

  • 64x64 - zakładki przeglądarki Safari;
  • 32x32 - wyświetlacze o wysokiej rozdzielczości (Retina);
  • 24x24 - zakładki Internet Explorer i MicroSoft Edge;
  • 16x16 - Google Chrome i inne przeglądarki.

Jak zrobić favicon w Photoshopie

Najpierw musisz utworzyć kilka płócien o powyższych wymiarach.

Następnie musisz dodać ikonę, literę lub inny obraz do płótna
Następnie musisz dodać ikonę, literę lub inny obraz do płótna.

Następnie musisz dodać ikonę, literę lub inny obraz do płótna

Jak zapisać favicon

Po utworzeniu ikon o różnych rozmiarach, zapisz każdy jako przezroczysty plik PNG (24 bity). W programie Photoshop można użyć funkcji Zapisz dla Internetu dostępnej w menu Plik. Następnie musisz scalić wszystkie pliki PNG w jeden plik ICO. Możesz używać jednocześnie plików PNG i ICO, ale często nawet Safari i Chrome preferują tylko format ICO. Moim zdaniem łatwiej jest utworzyć jeden plik ICO. Format ICO nie jest zbyt popularny, ale na szczęście istnieje wiele narzędzi, które mogą pomóc w konwersji plików do tego formatu. W tym celu wolę korzystać Edytor ikon X . Jest to bezpłatna usługa online, która natychmiast konwertuje pobrane obrazy na jeden plik ICO, po czym można go pobrać. To nic skomplikowanego, po prostu postępuj zgodnie z instrukcjami na stronie. Jeśli uważasz się za osobę zdesperowaną, możesz eksperymentować z edytorem pikseli tej usługi i narysować favicon. (Chociaż wolę edytować favicony w bardziej profesjonalnym edytorze, na przykład w Photoshopie).

Przesyłając swoje obrazy PNG do edytora X-Icon, otrzymasz jeden plik ICO na wyjściu
Przesyłając swoje obrazy PNG do edytora X-Icon, otrzymasz jeden plik ICO na wyjściu.

Jak wstawić stronę favicon

Więc masz już plik ICO. Teraz musisz dodać go do strony internetowej. Zmień nazwę pliku na favicon.ico i umieść go w folderze głównym swojej witryny (gdzie przechowywany jest plik index.html i inne standardowe pliki). Po udanym dodaniu możesz go obejrzeć na swojej stronie .com / favicon.ico. Prawie wszystkie przeglądarki szukają pliku favicon.ico w folderze głównym. Dlatego ważne jest, aby pobrać favicon w tym folderze. W celu zapewnienia zgodności z różnymi przeglądarkami lepiej nie dodawać żadnych elementów HTML ani linków wskazujących jego lokalizację. Ta sztuczka działa dla wszystkich przeglądarek, aż do IE6. Ponadto, jeśli masz witrynę WordPress, w wielu motywach możesz dodać favicon w ustawieniach motywu. Ta metoda może być również używana.

Jak zastąpić favicon

Z jakiegoś niewytłumaczalnego powodu przeglądarki dodają go do pamięci podręcznej. Dlatego po przesłaniu nowego pliku ICO przeglądarka może nadal wyświetlać Twoją starą ikonę ulubionych. Co robić w tym przypadku? Możesz dodać tymczasowy plik HTML wskazujący lokalizację nowej favikony. Również na końcu adresu URL musisz dodać krótki ciąg zapytania:

<link rel = "ikona skrótu" href = "twoja strona internetowa .com / favicon.ico? v = 2 ″ />

Przeglądarka będzie zatem uważać, że jest to unikalny adres URL, dlatego będzie zmuszony do wyświetlenia nowej ikony. Po zaktualizowaniu favicon ten kod HTML można całkowicie usunąć. Jeśli chcesz wprowadzić zmiany w favikonie, użyj tej samej techniki, za każdym razem zwiększając liczbę po „v” w ciągu zapytania. Przeglądarka będzie więc za każdym razem postrzegać ten adres URL jako unikalny i wyświetlać jego nową wersję. I nie zapomnij usunąć kodu HTML po udanej aktualizacji.

Jak stworzyć bardziej złożone favicony

W tym artykule chciałem opisać uniwersalny i łatwy sposób tworzenia ulubionych gier, które będą działać na praktycznie każdej platformie. Ale w projektowaniu i tworzeniu stron internetowych nie ma granic doskonałości. Jeśli chcesz dowiedzieć się, jak tworzyć bardziej złożone ikony, możesz spróbować skorzystać z usługi favico.js . Umożliwia tworzenie dynamicznych obrazów o różnej liczbie. Dzięki tej ikonie możesz zobaczyć liczbę nieprzeczytanych wiadomości, nawet jeśli odpowiednia karta nie jest aktywna. Jeśli chcesz tworzyć animowane favicony online, możesz spróbować użyć generatora favikonów favicon.cc .

Więcej generatorów online, które możesz znaleźć tutaj .

Jeśli chcesz podzielić się wskazówkami na temat tworzenia ulubionych gier lub zadawania pytań, czekam na Ciebie w komentarzach!

Co robić w tym przypadku?
Ico?


Новости
  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью