Favicon nedir, nasıl favicon yapılır?

Favicon internet tarayıcılarının üst kısmında yer alan websitemizin adının hemen başında görünen simgedir. Favicon’un kelime açılımı Favorites Icon kelimelerinin kısaltasıdır. Yararı ise eğer çok sekmeli bir internet tarayıcısı kullanıyorsak onlarca sekmenin arasında insanlar web sitenizin açık olduğu sayfayı kolayca kaybedebilirler. Çünkü sekmeler açıldıkta site isimleri kaybolur, sadece faviconları görünmeye başlar, böyle durumlarda bir site için olmazsa olmaz konumundadır favicon. Örneğin aşağıdaki gibi;

Favicon nedir, nasıl favicon yapılır

Nasıl favicon yapılır?

Öncelikle hazır simgenizden bunun yapan basit bir kaç web sitesi var. Siteler aşağdaki gibi, bunlar daha da artırılabilir, benim öncelikli önerdiğim sitelerden bazıları bunlar.

Bu sitelerden birine halihazırda var olan simgenizi sitedeki gözat butonundan yükleyip favicon.ico formatındaki ikon dosyanızı indirip sitenize yükleyebilirsiniz. Yalnız simgenizin boyutunu en az 16×16 pixel ebatlarında yükleyiniz. Daha yüksek ebatlarda yüklerseniz siteler ikonunuzu daha iyi algılayıp daha net görüntüde ikon oluşturabilirler.

Favicon siteye nasıl eklenir?

Favicon dosyanız sitenizin ana dizinine yüklendiğinde, misal isakoc.com/favicon.ico şeklinde ana dizine yüklendiğinde günümüz internet tarayıcıların dikkat ettiğim kadarıyla bu ikonu otomatik olarak çekip sitenize entegre biçimde sitenizin simgesi olarak  gösteriyorlar. Herhangi bir kod eklemenize gerek yok. Önemli olan sadece dosya uzantısının .ico olması. Bunu da yukarıdaki sitelerden rahatlıkla elde edebilirsiniz. Yalnız sitenize favicon eklemek için illa dosya formatının .ico olması zorunluluğuda yok. Favicon dosya formatınız .jpg, .gif veya .png formatlarında da olabilir. Ama bu kez faviconunuzu ana dizine yüklemeniz kart etmez aynı zamanda sitenizin head tagları arasına meta kodunuda girmeniz şart olmaktadır. Aşağıdaki favicon kodlarını sitenizin head kodları arasına ekleyip favicon’nunuzu da sitenize yüklerseniz ikonunuz sitenizde görünmeye başlayacaktır. Tabi bazen görünmesi için tarayıcınızın çerezlerini silmeniz gerekebilir.

Standart Favicon ekleme kodları aşağıdaki gibidir;

<link rel=”icon” type=”image/x-icon” href=”http://www.orneksite.com/favicon.ico” />
<link rel=”icon” type=”image/png” href=”http://www.orneksite.com/favicon.png” />
<link rel=”icon” type=”image/gif” href=”http://www.orneksite.com/favicon.gif” />

HTML’e dosyanızdaki örneği ise aşağıdaki gibidir;

<html>
<head>
<title>Websitenizin başlığı</title>
<link rel=”icon” type=”image/x-icon” href=”http://www.orneksite.com/favicon.ico” />
</head>
<body>
</body>
</html

Çoklu ortamlardaki tarayıcılar veya cihazlar için favicon ekleme kodları aşağıdaki gibidir;

Eğer ben birden fazla tarayıcıda yada mobil cihazda site ikonum iyi görünsün istiyorsanız aşağıdaki kodları eklemeniz gerekmekte ve aynı zaman da sizes kısmında belirtilen ebatlarda ikonlarınızı ayrı ayrı oluşturup sitenize yüklemeniz gerekmektedir.

<!– Opera Speed Dial Favicon –>
<link rel=”icon” type=”image/png” href=”/speeddial-160px.png” />

<!– Standard Favicon kodu–>
<link rel=”icon” type=”image/x-icon” href=”/favicon.ico” />

<!– iPhone 4 Retina ekran için favicon kodu: –>
<link rel=”apple-touch-icon-precomposed” sizes=”114×114″ href=”/apple-touch-icon-114×114-precomposed.png”>

<!– Apple iPad için favicon kodu: –>
<link rel=”apple-touch-icon-precomposed” sizes=”72×72″ href=”/apple-touch-icon-72×72-precomposed.png”>

<!– Tüm Apple iPhone cihazları için favicon kodu: –>
<link rel=”apple-touch-icon-precomposed” href=”/apple-touch-icon-57×57-precomposed.png”>

Favicon oluşturma ve sitenize favicon ekleme videosu

“Favicon nedir, nasıl favicon yapılır?” için 3 cevap

    • yok, o zaten siteyi baz alıp devamında bu linki arıyor, yani senin siten portaladam.com ise o zaten kendisi koyuyor o linki, örneğin portaladam.com/favicon.ico diye düzeltiyor kendisi.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This blog is kept spam free by WP-SpamFree.