Google bir süredir mobil aramalarda, arama sonuçlarının başında sitenin favicon’unu göstermeye başladı. Peki mobil arama sonuçlarındaki favicon nasıl belirlenir?
Kısaca Favicon Nedir?
Favicon İngilizcedeki “Favorites Icon” teriminin kısaltmasıdır. Favicon, site tarayıcıların sık kullanılanlar sekmesine eklendiğinde, kullanıcılar sitenizi ziyaret ettiğinde tarayıcı sekmesinin başında hemen başlıktan önce, kullanıcılar sitenizin kısayolunu bilgisayar masa üstüne eklediklerinde, mobil kullanıcılar yine sitenizin kısayolunu ana ekranlarına eklediğinde, kullanıcılar site adresini başkaları ile paylaştıklarında ve son olarak mobil arama sonuçlarının başında gösterilecek olan görseldir.
Genellikle 16×16 piksel boyutunda ve .ico formatında kullanılır. Ancak son zamanlarda web tarayıcıların gelişmesi ile birlikte .PNG .SVG gibi birçok görsel formatını ve boyutunu desteklemektedir.
Örnek Favicon Kullanımı
Favicon için önerilen kullanım aşağıdadır. href etiketinde faviconunuza ait dosya yolu ve dosya adı yer almaktadır. Bu alanda yer alan dosya yolu, dosya adı ve dosya uzantısını kullanmak zorunda değilsiniz.
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png"> <link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="manifest" href="/manifest.json"> <meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"> <meta name="theme-color" content="#ffffff">
Yukarıda yer alan kodları incelediğinizde aynı favicon’un birden fazla boyutta olduğunu görebilirsiniz. Tüm bu versiyonları ve yukarıdaki kodu otomatik olarak almak için favicon-generator.org adresini kullanabilirsiniz.
Mobil Arama Sonuçlarındaki Favicon Nasıl Belirlenir?
Mobil arama sonuçlarındaki favicon nasıl belirlenir sorusu takipçilerimiz tarafından oldukça fazla soruldu. Öncelikle sitenizde favicon yer alıyor ise muhtemelen arama sonuçlarında da bu favicon listeleniyordur. Ancak favicon’un mobil arama sonuçlarında listelenmemesi durumunda <link/> etiketi içerisinde tıpkı yukarıdaki gibi favicon tanımlamalısınız.
Mobil arama sonuçlarındaki favicon’un gösterimi esnasında dikkat edilecek 2 kriter bulunuyor. Bunlardan ilki arama sonuçlarında yer alacak favicon’un 48×48 piksel ve katları çözünürlüğünde olmalıdır. Örneğin; 48×48, 96×96, 144×144 vb.
İkinci kriter ise <link/> etikerinde yer alan rel özelliğinin 4 değerden birini almış olması. rel özelliğinde kullanılacak değerler ise şöyle
- “shortcut icon”
- “icon”
- “apple-touch-icon”
- “apple-touch-icon-precomposed”
Yukarıda yer alan değerlerden herhangi birini kullandığınızda mobil arama sonuçlarında favicon başarıyla çıkacaktır. Ancak favicon için yapılan değişiklikler Google aramalarında hemen görüntülenmeyebilir.
