Mobil arama sonuçlarındaki favicon nasıl belirlenir?

Mobil arama sonuçlarındaki favicon nasıl belirlenir?

Google tarafından yapılan değişiklikler ile birlikte mobil ve masaüstü için ayarlamalar farklı bir şekilde yapılabilmekte. Bu farklılıklarından biriside mobil arama sonuçlarındaki site faviconun belirlenebilmesi. Mobil uyumun daha iyi bir şekilde yakalanabilmesi adına web site sahiplerinin mutlaka siteleri için mobil uyumlu bir favicon kullanması gerekirken, yapılacak birkaç küçük işlem ile sitedeki bu uyum kolayca sağlanabilir.

Favicon nedir, mobil favicon nasıl belirlenir?

Siteye girildiğinde tarayıcı sekmesinde site adresinin önünde yer alan ikonlar, favicon olarak tanımlanmaktadır ve her site için özelleştirilebilir. Böylece siteler belirli bir görsel motif ya da tasarımı tercih ederek sitelerinde .PNG .SVG formatlarında olmak şartıyla favicon olarak gösterebilmektedir. Mobil kısmında ise bu faviconun gösterilebilmesi için iki farklı işlemin yapılması gerekmektedir.

Örnek bir kullanım şöyledir;

<link rel=”icon” type=”image/png” sizes=”32×32″ href=”/favicon-32×32.png”>

favicon için dikkat edilmesi gereken en önemli detay piksel olarak doğru boyutlarda hazırlanmasıdır 48 x 48 piksel ve bu ölçülerin katlarında hazırlanacak bir tasarımda herhangi bir sorun olmayacaktır. Mobil uyumda link etiketlerinde 4 değerden birisinin de mutlaka yer alması gerekir. Kullanılabilecek olan 4 değer ise şöyledir “shortcut icon” , “icon” , “apple-touch-icon” , “apple-touch-icon-precomposed”

Yukarıda örnekte de görüleceği üzere web siteler için hazırlanmış olan faviconların belirtilen kod yapısı içerisinde belirlenmesi yeterlidir. Böylece kısa süre içerisinde Google tarafından mobil arama sonuçlarında belirlenen yeni favicon gösterilecektir. Bununla birlikte telefon ekranlarındaki çözünürlükler ve boyutlar farklı olduğundan dolayı hazırlanan faviconun farklı boyutlarda hazırlanarak kodlarda belirtilmesi uygun olacaktır. Bunun için otomatik kod oluşturan web sitelerini kullanabilirsiniz. Bunun ardından karşınıza aşağıdaki örnekte göreceğiniz üzere bir kod yapısı ortaya çıkacaktır.

<link rel=”apple-touch-icon” sizes=”57×57″ href=”/apple-icon-57×57.png”> <link rel=”apple-touch-icon” sizes=”60×60″ href=”/apple-icon-60×60.png”> <link rel=”apple-touch-icon” sizes=”72×72″ href=”/apple-icon-72×72.png”> <link rel=”apple-touch-icon” sizes=”76×76″ href=”/apple-icon-76×76.png”> <link rel=”apple-touch-icon” sizes=”114×114″ href=”/apple-icon-114×114.png”> <link rel=”apple-touch-icon” sizes=”120×120″ href=”/apple-icon-120×120.png”> <link rel=”apple-touch-icon” sizes=”144×144″ href=”/apple-icon-144×144.png”> <link rel=”apple-touch-icon” sizes=”152×152″ href=”/apple-icon-152×152.png”> <link rel=”apple-touch-icon” sizes=”180×180″ href=”/apple-icon-180×180.png”> <link rel=”icon” type=”image/png” sizes=”192×192″ href=”/android-icon-192×192.png”> <link rel=”icon” type=”image/png” sizes=”32×32″ href=”/favicon-32×32.png”> <link rel=”icon” type=”image/png” sizes=”96×96″ href=”/favicon-96×96.png”> <link rel=”icon” type=”image/png” sizes=”16×16″ href=”/favicon-16×16.png”> <link rel=”manifest” href=”/manifest.json”> <meta name=”msapplication-TileColor” content=”#ffffff”> <meta name=”msapplication-TileImage” content=”/ms-icon-144×144.png”> <meta name=”theme-color” content=”#ffffff”>

Share this post:
Facebook
Twitter
LinkedIn
WhatsApp

More articles