Favicon, tarayıcınızdaki adres çubuğunun yanındaki o harika küçük resimdir. Sitenizi yer işaretleri sekmesinde diğerlerinden ayıran şey budur ve marka bilinirliğini artırmak için kullanılabilir. Bir siteniz varsa ancak favicon oluşturmayı hiç düşünmediyseniz, kararınızı yeniden düşünmelisiniz. Yazılım geliştiriciler, tabletlerdeki ana ekran simgeleri gibi uygulamalarının farklı yönleri için giderek artan bir şekilde sık kullanılan simgeleri kullanıyor. Neyse ki, bir favicon tasarlamak, oluşturmak ve uygulamak, doğru adımları takip eden hemen hemen herkesin yapabileceği bir şeydir.
adımlar
Yöntem 1/3: Favicon'unuzu Tasarlama
Adım 1. Web sitenizi temsil eden bir favicon oluşturun
Sahip olduğunuz web sitesi türü, site ikonunuzun görünümünü belirlemelidir. Marka imajınıza bağlı kalacak ve insanlar tarafından tanınabilir ve akılda kalıcı olacak bir şey tasarlamaya çalışın. Favicon'unuz, insanların tarayıcılarındaki sekmelere baktıklarında gördükleri ilk şey olacak ve aynı zamanda insanların yer imlerinde de görünecek.
- Örneğin, bir yemek web siteniz varsa, tasarım olarak meyve veya sebze içeren bir favicon seçmek onu daha akılda kalıcı hale getirebilir.
- Web siteniz bir hukuk firması veya yatırım şirketi içinse, geleneksel ve şık bir favicon en iyisidir.
- Web siteniz genç insanlara yönelikse, eğlenceli ve renkli bir site ikonu oluşturmayı deneyin.
Adım 2. Saydam bir arka plan isteyip istemediğinize karar verin
Bir arka plan belirlemezseniz, beyaz renkle doldurulur ve bu da markanıza uymayabilir. Saydam bir arka plan, kişinin tarayıcısının rengini alır ve bazı durumlarda daha akıcı görünür. Diğer durumlarda, arka plan için bir renge sahip olmak, ön plandaki harfleri veya grafikleri ortaya çıkaracaktır. Tasarımınız için en iyisinin ne olacağına karar verin ve bunu yaparken aklınızda bulundurun.
En temel favicon 16x16 karedir ve arka plan rengine sahiptir
Adım 3. Okunması kolay bir site simgesi oluşturun
Kullanacağınız favicon görseli küçük olduğundan, ziyaretçilerinizin kafasını karıştırmadan markanızı tanıtabilmeniz önemlidir. Okunması zor bir site ikonu olumsuz bir izlenim bırakır ve sağlayabileceğiniz işin kalitesi hakkında ziyaretçinin zihninde sorular oluşturabilir. Aşırı karmaşık görüntüler ve logolar, 16x16 veya 32x32 piksele küçültüldüğünde iyi görünmüyor.
- Mevcut logonuz çok karmaşıksa, onu basitleştirmek için taktikler kullanabilirsiniz, böylece favicon boyutunda tanınabilir. Şirket adının tamamını göstermek yerine baş harflerini kullanın veya bir resim kullanmak yerine basit bir simge tasarlayın.
- Zaten basit bir logonuz varsa, resmi küçültebilir ve favicon'unuz olarak ayarlayabilirsiniz. Bir simge dosyasına dönüştürmeden önce değiştirmeniz gerekebilir.
- Sitenizin genel temasını açıklayan bir nesnenin resmini de kullanabilirsiniz.
Adım 4. Estetik açıdan hoş bir favicon oluşturun
Favicon'unuzun yapısına formu denir. Favicon'lar genellikle daire veya kare gibi şekiller alır. Favicon'unuzu tasarlarken, bu temel formlardan birine sığması genellikle daha iyidir çünkü serbest biçimli şekiller genellikle 16x16 pikselde karışabilir veya karışabilir. Tasarımınızın bir diğer önemli yönüne estetik birlik denir. Estetik birlik, favicon'unuzdaki farklı bileşenlerin detaylarını ve boyutlarını ve favicon'unuzun nasıl dengelendiğini içerir. Ayrıntılar ne kadar tekdüze olursa, site simgeniz o kadar uyumlu görünür. Örneğin, site simgenizde farklı yazı tipi türleri veya boyutları kullanmak göze hoş gelmez ve site simgenizin karışık veya dağınık görünmesine neden olabilir.
- Estetik birliğin bir başka örneği, favicon'unuzdaki şekiller boyunca yuvarlatılmış köşeleri korumaktır.
- Biçim değiştiren bir simgeye iyi bir örnek, Google'ın favicon'udur. Kareden daireye dönüşmüştür.
Adım 5. Markanızla uyumlu renkler kullanın
Favicon'unuzu oluşturduğunuzda, modern tarayıcılarda çalışacağı için 8 bit (256 renk) veya 24 bit (16,7 milyon renk) renk derinliğinde oluşturmalısınız. Seçtiğiniz renklerin web sitenizin başka bir yerinde bulunabileceğinden veya bir şekilde markanızla ilişkilendirildiğinden emin olun. Web sitenizde, logonuzda veya uygulamalarınızda olmayan renklere sahip bir favicon akılda kalıcı olmayacak ve insanlar simgeyi markanızla ilişkilendiremeyecek.
- Favicon renginin bazı yaratıcı kullanımları, sistem durumunuza bağlı olarak renkleri değiştiren GitHub'ı ve arka plan renginize bağlı olarak değişen Trello'yu içerir.
- Favicon'larda kullanılan en yaygın renkler kırmızı ve mavidir.
Adım 6. Bir site ikonu tasarlarken hedef kitlenizi düşünün
Markanızı tanımlamaktan başka, site ikonunuzun ziyaretçileriniz için çekici görünmesi gerekir. Farklı zevklere, ilgi alanlarına ve toplumsal normlara sahip insanlar, farklı ikonolojiye farklı perspektiflerden bakacaklardır. Toplumumuzda kültürel farklılıklar mevcuttur ve çekmeye çalıştığınız izleyicilerin kafasını karıştırabilir veya itebilir.
Örneğin, Mac Os X, posta için evrensel bir sembol olan bir damga kullanır. Posta kutuları dünyanın farklı yerlerinde farklılık gösterdiğinden, posta kutusu kullanmak o kadar etkili olmaz
Adım 7. Arkadaşlarınızın ve meslektaşlarınızın fikrini alın
Grafik olarak inanılmaz derecede yoğun olmasa da favicon markanızın önemli bir parçasıdır. Örneğin, Twitter, Gmail, Facebook veya wikiHow gibi favori web sitelerinizi ve favicon'u markayla ne kadar ilişkilendirdiğinizi düşünün. Tasarım konusunda iyi bir gözünüz yoksa veya siteniz için nasıl bir tasarıma sahip olmanız gerektiği konusunda kafanız karıştıysa, tasarım gözü olan veya grafik tasarım alanında çalışan arkadaşlarınıza danışın.
- Herhangi birinin ücretsiz tasarım tavsiyesi sağlayıp sağlayamayacağını görmek için arkadaş ağınızda dolaşın.
- Daha büyük şirketlerin, favicon görüntüsünü oluşturabilen şirket içi grafik tasarımcıları vardır.
Yöntem 2/3: Favicon'unuzu Oluşturma
Adım 1. Favicon'unuzu oluşturmak için fotoğraf düzenleme yazılımını kullanın
Favicon'unuz için görüntü oluşturmak için Adobe Photoshop veya Illustrator gibi fotoğraf düzenleme yazılımlarını kullanabilirsiniz. Bu yazılım uygulamaları aynı zamanda görüntüyü yeniden boyutlandırmanıza ve doğru biçimde dışa aktarmanıza olanak tanır. Bazı yazılımlar, favicon'unuzu elle oluşturmanıza izin verir.
- Ayrıca çevrimiçi bulabileceğiniz favicon'a özel düzenleme programları da vardır.
- Bir arama motoru kullanın ve "favicon editörleri" yazın.
- Tuval boyutunuzu 512x512 piksel yapın çünkü bu sayı en uygun favicon boyutlarına bölünür ve yine de etkili bir şekilde düzenlemeniz için yeterince büyüktür.
- Diğer popüler fotoğraf düzenleme yazılımları arasında GIMP, PhotoScape ve Paint. NET bulunur.
- Bu yazılımı kullanırken,.ico dosyalarını doğrudan düzenleyemezsiniz, ancak.png,-j.webp" />
Adım 2. Favicon'unuzu yeniden boyutlandırın ve kaydedin
32x32 piksel Windows masaüstü öğelerinin boyutudur, 16x16 piksel ise tarayıcınızın sekmesindeki favori simgelerin boyutudur. Favicon'unuzu daha büyük bir biçimde oluşturduktan sonra, insanların tarayıcılarında nasıl görüneceğini görebilmeniz için boyutunu küçültmeniz önemlidir. Okunamıyorsa veya estetik açıdan hoş değilse, orijinal tasarımınıza baştan başlayın. Web sitenizin veya uygulamanızın büyük olasılıkla kullanılacağı platformları düşünün ve ardından tüm temellerinizi kapsayacak bir favicon oluşturun.
- Farklı donanım ve yazılımların farklı favicon boyutları kullandığını unutmamak önemlidir.
- Diğer bazı favicon boyutları, standart iOS ana ekranı için 57x57px, iPad için 72x72px, Google TV için 96x96px, Chrome Web Mağazası için 128x128px ve Opera Speed Dial için 195x195px içerir.
- Tüm üslerinizi kapsamak istiyorsanız, bu boyutların her birinde favicon'unuzun sürümlerini oluşturabilirsiniz.
- Favicon'unuzun ayrı sürümlerini kaydedin, böylece yaptığınız işi kaybetmezsiniz.
Adım 3. Bir dönüştürücü kullanarak dosyalarınızı birleştirin
.ico dosyalarıyla ilgili en güzel şey, onu oluşturmak için birden fazla dosyayı birleştirebilmenizdir. Bu yararlıdır çünkü farklı tarayıcılar ve yazılımlar farklı boyutta bir site simgesi isteyecektir. Favicon'unuzun tüm farklı platformlarda iyi göründüğünden emin olmak için dosyalarınızı çevrimiçi bir dönüştürücü kullanarak dönüştürün. Bunu yapmak için ücretsiz çevrimiçi uygulamalar bulmak için favori arama motorunuza "simge dönüştürücü" yazın. Birleştirilmiş dosyayı "favicon.ico" olarak kaydedin.
- Ayrıca yerleşik özelliği olan GIMP gibi bir program kullanabilir veya ICO FORMAT adlı bir eklentiyi Adobe Photoshop'a indirebilirsiniz.
- Yeni sık kullanılanları veya devam eden çalışmaları saklayabilmek için yeni bir klasör oluşturun.
- Kullanabileceğiniz farklı araçları bulmak için bir arama motoruna ".ico dönüştürücü" veya "favicon oluşturucu" yazın.
Yöntem 3/3: Favicon'unuzu Uygulama
Adım 1. Bir web sitesi düzenleyicisi kullanıyorsanız site simgenizi yükleyin
Birçok web sitesi düzenleyicisi, site simgenizi web sitenize otomatik olarak yüklemenizi sağlayan yerleşik bir formla birlikte gelir. Bu yerleşik bir web sitesi düzenleyicisi kullanıyorsanız, web sitenizin ayarlar menüsünde "Favicon Yükle" veya "Favicon Ekle" yazan seçenekleri arayın. Favicon.ico dosyanızı seçin ve sitenize yükleyin.
Favicon'unuzu web sitesi düzenleyicinize yüklemek için bir yer bulamazsanız, bunu manuel olarak yapmanız gerekir
Adım 2. Dosyayı sitenizin kök dizinine yükleyin
Web siteniz Dosya Aktarım Protokolünü veya FTP'yi destekliyorsa, yeni favicon.icon dosyanızı kök(index) dizininize yüklemek için FTP istemcinizi kullanabilirsiniz. Değilse, web barındırma sayfanıza gitmeniz ve resmi manuel olarak yüklemeniz gerekir. Mevcut favicon.ico dosyasını yeni dosyanızla değiştirmeyi unutmayın.
Adım 3. Dosyayı başlığınıza ekleyin
Siteniz için PHP ve CSS dosyalarına erişebileceğiniz yeri bulun. Sitenizin header.php dosyasına gidin ve düzenleyin. Etiket türü altında,"
-
. Bu, sitenizi favicon'unuza bağlamalıdır.
PHP kullandığınız için bu, başlık dosyanızı kullanan tüm sitelerin artık aynı favicon'a sahip olacağı anlamına gelir
Kendi Favicon Simgenizi Oluşturun Adım 14 Adım 4. Tarayıcınızı yenileyin
Favicon'u yüklemeyi bitirdikten sonra, adres çubuğunun yanında yeni resminizi görmek için tarayıcınızı yenileyebilirsiniz. Güncellenen site simgenizin bir görüntüsüne doğrudan gitmek için "https://www.alanadiniz.com/favicon.ico" yazın.
- Favicon'unuz başlangıçta görünmüyorsa, tarayıcınızın önbelleğini sıfırlamanız gerekebilir.
- Önbelleğinizi temizlemek için tarayıcınızın ayarlarına gidin ve Geçici İnternet Dosyalarınızı, Çerezlerinizi ve Geçmişinizi silin.
