Favicon Generator – po co i jak to działa

Favicon to taka mała ikonka w adresie przeglądarki umieszczana przed wpisywanym URL strony. Poniżej umieszczam przykładowe zdjęcia obrazujące, co to jest.

To świetna rzecz, strona posiadająca taki favicon wyraźnie wyróżnia się na tle innych stron, a poza tym jest to element  brandingu strony internetowej.

Jak to ugryźć?🙂
Po poszukiwaniach rzetelnych informacji na temat stworzenia takich faviconów, metodą prób i błędów, opracowałam sposób na szybkie i bezproblemowe zainstalowanie favicona.

Na początek trzeba już mieć zrobiony obrazek przedstawiający to, co chcemy, aby reprezentowało blog i było naszym faviconem. Takie obrazki mozna wykonać samemu w Photoshopie, w programie Paint albo w  innych programach graficznych.
Jest również sporo miejsc w internecie, gdzie mozna zamówić taki obrazek, na przykład MiniSiteGraphic. Tutaj twórcy oferują pakiety różnych elementów graficznych.

Gdy już mamy taki obrazek…

Należy załadować go do dostępnego za darmo programu online Favicon from Pics.
Następnie wciśnij przycisk „Generate FavIcon.ico” czyli „Stwórz Favicon.ico” i już masz gotowy favicon!

Umieszczenie Faviconu na stronie

1. Prostym sposobem jest w przypadku osób posiadających strony oparte na wordpress, zainstalowanie darmowej wtyczki opracowanej przez MaxBlogPress dostępnej tutaj. Twórcy wtyczki udostępniają też zbiór już stworzonych free faviconów gotowych do wykorzystania na stronie.
2. Drugim sposobem, nieco trudniejszym, ale tylko troszeczkę bardziej jest samodzielne zainstalowanie faviconu.
   W tym celu taką ikonkę, nazwaną favicon.ico, należy załadować na serwer, gdzie jest przechowywana strona, do folderu głównego strony tego dostępnego publicznie.
   Kolejnym krokiem jest sprawdzenie czy favicon został umieszczony poprawnie, poprzez wpisanie do przeglądarki adresu http://www.mojastrona.pl/favicon.ico. W podanym wzorze w miejsce : www.mojastrona.pl, wpisz adres właściwej strony.

Na koniec, element najważniejszy, a mianowicie wstawienie odpowiedniego kodu do sekcji strony zwanej head. W tym zakresie różne źródła podają różne kody, większość z nich sprawdziłam, nie wszystkie działały tak jak chciałam.

Oto kod przeze mnie sprawdzony i działający bez zarzutu:
<link rel=”shortcut icon” href=”http://www.mojastrona.pl/favicon.ico” type=”image/x-icon” />

Oczywiście w miejsce http://www.mojastrona.pl należy wpisać adres URL strony, do której wstawiamy favicon.

W niektórych przypadkach favicon pojawi się zaraz po wstawieniu kodu, a w innych może to potrwać kilka godzin.  Rezultat wart jest jednak włożonego wysiłku!