Po co favicony?

Kiedy zaczynam opowiadać ludziom o znaczeniu favikona dla ich ogólnej strategii budowania marki online, zazwyczaj mówią to samo: "Czy nie podchodzisz do tego brandingu trochę zbyt daleko?"

Moja odpowiedź zwykle brzmi: "Nie, jeśli poważnie myślisz o swoich wysiłkach związanych z brandingiem!"

To prawda, favicons to bardzo mało rzeczy, prawdopodobnie najmniej ważna część strony, ale dbałość o szczegóły sprawia, że strona się wyróżnia; i nawet jeśli brzmi to szalenie, favicons są bardzo ważne z punktu widzenia brandingu.

Zważywszy, że WDD to strona internetowa skierowana do publiczności projektantów, domyślam się, że wielu z was już wie, czym są favicony i jak je tworzyć; ale ten artykuł może ci pomóc w ustaleniu, dlaczego powinieneś je wykonać, a także służyć jako dobra strona zasobów.

Poniżej zamieszczam dużą listę z zasobami związanymi z favikonem, więc zastanów się nad dodaniem tej strony do przyszłych referencji. Aha, a jeśli to zrobisz, zwróć uwagę na favikon WDD bezpośrednio na liście zakładek;)

Na wszelki wypadek, gdy nie jesteś projektantem lub jakimś czarnym pasem w favicon-art, ten artykuł obejmuje prawdopodobnie wszystko, co kiedykolwiek będziesz musiał wiedzieć o tych nieuchwytnych kwadratach 16 × 16 pikseli, a nawet kilka ciekawych faworytów. . Więc ciesz się!

Czym jest favicon?

Favicons to małe kwadratowe obrazy, zwykle 16 × 16 pikseli, które są używane przez przeglądarki internetowe do wyświetlania graficznej reprezentacji strony odwiedzanej po lewej stronie paska adresu przeglądarki. Prawdopodobnie widziałeś już wiele favikonów, nawet jeśli nie wiesz, czym one są. Jeśli pojawią się jakiekolwiek wątpliwości, pomocny będzie poniższy obraz.

Dwa przykłady ulubionych w przeglądarce Google Chrome z kartami.

Jeśli interesuje Cię zrozumienie historii Internetu, oto interesujący fakt:

Słowo favicon to portamentau wykonane ze słów "ulubiony" i "ikona", i zostało nazwane jako takie, ponieważ było po raz pierwszy obsługiwane przez Microsoft Internet Explorer 5 i na wypadek, gdyby nie używać IE, ta funkcja zakładek do przeglądarki nazywa się ulubionymi.

Jaki jest cel favikonu?

W początkach istnienia Internetu narzędzia takie jak Google Analytics były tylko snami w umysłach kilku web-nerdów, więc może to zabrzmieć dziwnie, w tym czasie favicons były używane jako sposób na oszacowanie ruchu na stronie przez licząc liczbę odwiedzających, którzy dodali zakładkę do strony. (To kolejny interesujący fragment historii Internetu!)

Ale na marginesie interesujące fakty, głównym powodem posiadania favicons w dzisiejszych czasach jest poprawa wrażenia użytkownika. Pliki Favicons są używane we wszystkich nowoczesnych przeglądarkach na pasku adresu, na pasku połączeń, w obszarze zakładek i na kartach przeglądania. Poza tym, kilka przeglądarek wyświetla również favikony za każdym razem, gdy utworzysz łącze skrótów dla odpowiedniej strony na pulpicie i urządzeniu mobilnym.

Z pewnością głównym powodem posiadania favicon jest oczywista poprawa wrażeń użytkownika. Witryna bez niej pokaże ogólny symbol przeglądarki we wszystkich punktach interakcji, o których wspomniałem powyżej, a jeśli zależy Ci na doświadczeniu użytkownika, musisz zadbać o favicony.

Ale nie mogę uniknąć postrzegania rzeczy przez pryzmat brandingu, mojego obszaru kompetencji, więc myślę, że favicons są jeszcze bardziej istotne z punktu widzenia brandingu. Ponownie, przy tak wielu punktach interakcji, nie używanie ich do podnoszenia świadomości marki jest przestępstwem. Prawdą jest, że znalezienie kreatywnych sposobów na ulepszenie marki online jest zawsze trudnym zadaniem, a posiadanie ulubionych to łatwy i prosty sposób na osiągnięcie tego. Więc daj sobie jeden przyjacielu!

Jak utworzyć favicon?

Tworzenie strony internetowej favicon jest łatwe jak ciasto. W rzeczywistości nie musisz nawet być projektantem, aby to zrobić. Z pewnością pomaga to, jeśli jesteś w stanie wykorzystać swoje umiejętności do pracy i stworzyć coś, co naprawdę wyróżnia się, ale nawet mniej zaawansowani technicznie z nas mogą to zrobić w ciągu około 5 minut lub mniej, korzystając z odpowiednich narzędzi.

Witryny na poniższej liście pozwalają utworzyć favicon po prostu przesyłając wcześniejszy obraz. Jeśli więc chcesz stworzyć favicon dla swojej marki, wystarczy, że umieścisz swoje logo na jednej z poniższych stron i pobierzesz plik favicon. Łatwy peasy, lemon squeezy.

Oto lista generatorów Favicon, których szukasz:

Powyższe witryny różnią się znacznie pod względem otrzymywanego pliku wynikowego; zwłaszcza pod względem rozmiaru i rozszerzenia pliku. Jeśli chcesz uzyskać najbardziej kompatybilny plik, zdecydowanie zalecamy pobranie obrazu o rozmiarach 16 × 16 pikseli w formacie "ico".

Jeśli potrzebujesz inspiracji, spróbuj zajrzeć do galerii favicon poniżej:

Jak korzystać z ulubionych?

Po starannym zaprojektowaniu favicon zainstalowanie go na serwerze nie powinno zająć więcej niż dwie minuty w dwóch łatwych krokach. W tym celu będziesz potrzebować dostępu do folderu głównego swojej witryny i narzędzia do edycji tekstu, aby zmienić kod HTML swojej witryny.

Krok 1

Musisz przesłać plik "favicon.ico" na swój serwer. W tym celu wskaż pasek adresu przeglądarki na swój serwer FTP; twój URL powinien wyglądać podobnie do tego:

ftp://[email protected]

Naciśnij klawisz Enter, a przeglądarka wyświetli monit o podanie nazwy użytkownika i hasła przed przyznaniem dostępu do serwera plików. Kiedy już będziesz, po prostu prześlij plik "favicon.ico" do folderu głównego i gotowe.

Krok 2

Teraz musisz edytować stronę HTML swojej witryny, aby ułatwić przeglądarkom znalezienie obrazu ulubionych. Zachowaj otwarte okno FTP, znajdź i pobierz plik "index.html" lub "header.php" z serwera i postępuj zgodnie z instrukcjami poniżej stosownie do otrzymywanego pliku:

Jeśli twoja strona jest zbudowana ze zwykłego kodu HTML, wstaw poniższy kod w obszarze HEAD pliku "index.html" i nie zapomnij zmienić "yoursite.com" na własny adres strony internetowej.

Jeśli używasz WordPress, wstaw poniższy kod w obszarze HEAD pliku "header.php".

Po wykonaniu tej czynności prześlij plik z powrotem do miejsca, z którego go dostałeś. Jesteś skończony!

W rzeczywistości większość współczesnych przeglądarek jest wystarczająco inteligentna, aby znaleźć plik favicon nawet bez żadnego kawałka kodu, ale tylko tak długo, jak obraz favikonu ma 16 × 16 pikseli, został nazwany jako "favicon.ico" i jest zapisane w folderze głównym folderu witryny.

Jak utworzyć favicon w Photoshopie

Przy pomocy tak wielu narzędzi, które pomogą Ci stworzyć favicon, dlaczego chcesz wziąć ciężką drogę i stworzyć ją w Photoshopie? Cóż, jeśli jesteś projektantem i chcesz wydobyć to, co najlepsze z favikonu, z pewnością jest to profesjonalny sposób robienia tego. Sztuczka polega na tym, że Photoshop nie wspiera natywnie plików "ico", więc trzeba pobierz tę wtyczkę z Telegraphics .

Pamiętaj, aby zainstalować go przed wykonaniem samouczka poniżej. Photoshop nie będzie działał bez niego.

Poszukaj opcji "ICO" w oknie "Zapisz jako" programu Photoshop, aby potwierdzić zainstalowanie wtyczki.

Utwórz nowy dokument w Photoshopie wybierając element menu "Plik" i następującą opcję "Nowy", a następnie ustaw płótno na 64 × 64 piksele. Czemu? Ponieważ rozmiar ostateczny favicon 16 × 16 jest tak mały, posiadanie większego płótna, na którym można pracować, pomoże uzyskać płynny efekt kreatywnego soku. Następnie wklej logo do dokumentu i uwolnij magiczną moc tworzenia jednorożca.

Gdy skończysz, po prostu wybierz menu "Obraz" i następującą opcję "Rozmiar obrazu" i zmniejsz obraz do 16 × 16 pikseli. Pamiętaj, aby kliknąć "Resample Image" i wybierz "Bicubic Sharper", aby upewnić się, że obraz nie rozmazuje się po zmianie rozmiaru. Jeśli nie podoba ci się końcowy efekt, po prostu cofnij zmiany, korzystając z "AltCtrl / AltCmd + Z" i kontynuuj pracę nad projektem, aż będziesz z niego zadowolony.

Aby ukończyć favikon, wystarczy kliknąć menu "Plik" i następującą opcję "Zapisz jako", tam pamiętaj, aby nazwać swój plik "favicon.ico". Znowu zadanie!

Wniosek

Favicons to jedna z tych drobiazgów, na które zazwyczaj nie zwracamy zbyt dużej uwagi, ale prawda jest taka, że nie są one nieznaczące, są bardzo ważną częścią sieci, zarówno z punktu widzenia interfejsu użytkownika, jak i punktu brandingu. widoku.

Niektórzy twierdzą, że wielkie rzeczy pojawiają się w małych rozmiarach i myślę, że dotyczy to również faviconów, ponieważ każdy projektant stron internetowych i / lub specjalista od marki, który zawsze poświęca czas na dodanie ulubionych do stron swoich klientów, nawet jeśli klient nie ma wyobrażenie o tym, czym jest favikon, cechuje się dużym profesjonalizmem i dbałością o szczegóły; jakość, którą docenia każdy klient.

Czy tworzysz favicons dla swoich klientów? Czy to zbyt duży kłopot, by zdobyć za mało nagrody? Daj nam znać swoje myśli w komentarzach.

Wyróżniony obraz / miniatura, zdezorientowany obraz przez Shutterstock

projektowanie stron branding jak favicon porady i wskazówki

Jaki jest punkt w Favicons?