Favicon çoğu sitede yer almasına rağmen bir kısım web geliştirici/tasarımcı tarafından sıkça gözden kaçan önemli bir site öğesidir. Hatta sitenin logosu, ismi, temel işlevi ile birlikte anılır. Aslında yapıp yerleştirmesi gayet basittir. Yaptığınız herhangi bir imajı .ico uzantılı hale getirip uygun yolla ( aşağıda anlatılacaktır ) siteye yerleştirirseniz site başlığının yanında yerini alacaktır. Favicon site kalitesi açısından da önemli bir yer taşımaktadır, herhangi biri sitenizi kısayollara aldığında ( bookmark ) isim silindiyse site adına dair gözüken tek şey bu ikonlardır. Bu anlamda düzgün ve anlaşılır olması da çok önemlidir.
Bir tasarımcı olsanız da olmasanız da bence favicon hazırlamanın en kolay yolu favicon.cc adlı siteden geçmektedir. Zira sitenin de tek işlevi budur.
Siteye girdiğiniz anda ortada 16x16 lık bir alan bulunur. Sağda renk paleti solda ise yapabileceğiniz diğer işlemler bulunur. Buradan da son hazırlanan ( latest favicons ) ikonlara ve en çok tutan ( top rated favicons ) ikonlara bakabilirsiniz.
İkonu hazırlayacağınız alanın altında canlı olarak bu favicon un başlık yanında nasıl gözükeceğini de görebilirsiniz. Aynı zamanda sol tarafta bulunan "import image" kısmıyla zaten sizde olan bir imajı favicona dönüştürebilirsiniz. Buraya tıkladığınızda seçtiğiniz imajı kareye daraltıp daraltmak istemediğinizi de sormaktadır. Eklediğiniz öğeyi favicona dönüştürdükten sonra anasayfaya dönerek üstünde değişiklik yapma imkanı da sunmaktadır. Hazırladığınız faviconu orta altta bulunan "download favicon" kısmında indirebilirsiniz.
Bu faviconu sitenize yerleştirmek de bir o kadar basit. Html içerisinde "head" tagları arasına alttaki bağlantıyı koyarsanız, bu işlemi de gerçekleştirebilirsiniz. Tabii ki "href" özelliği içine favicon un bulunduğu yolu da yazmalısınız. Direk ana dizin içindeyse bu şekilde yazabilirsiniz.
<link href="favicon.ico" rel="shortcut icon" />