Hemen hemen herkesin bildiği bir icon türü olan favicon konusunu ele alalım dedik sizlere. Bu konu hakkında yazı yazan çoğu siteyi araştırdım ve anlatılan özelliklerin kullanıcılar için yeterli olacağına kanaat getirmediğimden dolayı ben de bu olaya bi el atayım dedim.
Favicon nedir?
İlk defa 1999 yılında Microsoft tarafından, Internet Explorer 5 çıktığı anda duyurulmuştur ve hala da etkin olarak kullanılan tarayıcılarda, telefonlarda ve tablerdeki adres satırında websitesini simgeleyen küçük ikonlara verilen isimdir. Hatta telefonunuza indirdiğiniz uygulamaların, ekranınızda görünen resmi de diyebiliriz buna. Birçok sitenin ismini görmeden sadece simgesini görür görmez tanırız çoğu zaman. Bu yüzden insanların sizi hatırlamasını istiyorsanız akılda kalıcı, benzersiz bir görsel seçmeniz uzun vadede işinize yarayacaktır.Mesela üstteki resimde site isimleri yazmadığı halde eminim çoğu kişi hangi siteler olduğunu (benim sitem hariç) bilir mutlaka.
Favicon Nasıl Yapılır?
Kazma, kürekle yada baltayla yapılacak bir iş değil, resim sizi aldatmasın. Yapmanız gereken kendi sitenize özgün bir simge bulmak ve küçük boyutta kaydetmek. Uzantı isminin illa .ico olmasına gerek yoktur. Yeni çıkan tarayıcılar artık png formatında kaydedilmiş olan simgeleri de tarayıcınızda gösterebiliyorlar. Hatta Mozilla Firefox jpeg formatındaki resimleri bile kabul ediyor.
Boyutu ne olmalı ?
Her tarayıcı ve cihaz için desteklemesini istiyorsanız eğer 16×16 pikselden 180×180 piksele kadar 10 taneden fazla resim dosyası hazırlayıp kullanmanız gerekiyor. Her cihazın en iyi şekilde desteklediği boyut farklı olduğundan sabit bir boyutta kullanılamıyor maalesef. Tek bir resmi defalarca farklı boyutta kaydedip kullanmayacaksınız merak etmeyin. Sadece bir resmi yüklediğinizde size bütün boyutları oluşturan birçok favicon yapma sitesi bulunuyor.
Ekleme kodu
Altta verdiğimiz kodları kullanarak websitenizin ikonunun Apple,Safari, Mozilla Firefox, Google Chrome ve akıllı telefonlarda (Iphone, Android, Windows Phone) ana ekrana eklenen yer işaretlerinde görünmesini sağlayabilirsiniz. Kodu
etiketleri arasına eklemeniz gerekiyor.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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="#1a1f2b"> <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"> <meta name="theme-color" content="#1a1f2b"> |
Favicon yapma sitesi
Favicon-Generator sitesi size önerebileceğim en iyi ikon oluşturma sitelerinden bir tanesidir. Hazırladığınız resmi bu siteye yüklediğiniz anda bütün cihazlara uyumlu boyutta hazırlayıp zip dosyasına kaydeder ve siteniz için gerekli olan meta kodları anında verir.Tek yapmanız gereken buradan siteye girip hazırladığınız resmi dosya seç diyerek create butonuna basmak. Ardından size zip şeklinde indirebileceğiniz bir link ve kullanacağınız meta kodları gösterir. Siz de bu kodları alıp head etiketleri arasına yerleştirip kullanmaya başlayabilirsiniz.
Tarayıcı Desteği
Browser | Address bar | Address bar drop down list | Links bar | Bookmarks | Tabs | Drag to desktop |
---|---|---|---|---|---|---|
Edge | No | Yes | Yes | Yes | Yes | Yes |
Firefox | 1.0–12.0: Yes > v13: No |
Yes | Yes | Yes | Yes | Yes |
Google Chrome | No | No | Yes | Yes | 1.0 | No |
Internet Explorer | 7.0 | No | 5.0 | 5.0 | 7.0[ | 5.0 |
Opera | 7.0–12.17: Yes > v14: No |
No | 7.0 | 7.0 | 7.0 | 7.0 |
Safari | Yes | No | No | Yes | Yes | No |







1983 doğumlu, olmayan bir çocuk babası, espirili ve kendini cana yakın zanneden biri işte. Daha ne olsun ?