İçerik:

  1. Adobe Photoshop ile site ikonu nasıl yapılır?
  2. Görsel İşleme Programı GIMP – GNU ile site ikonu nasıl yapılır?
  3. ICO’yu PNG ve GIF uzantılarından daha iyi yapan nedir?
  4. Online dönüştürücüler kullanılarak PNG nasıl ICO formatına dönüştürülür?
  5. WordPress web sitenize nasıl site ikonu eklenir?
  6. Toparlayacak olursak

Favicon, kullanıcıların web sitenizi Sık Kullanılanlar veya açık tarayıcı sekmeleri arasında tanımlamasına yardımcı olan küçük bir simge veya rozettir. Tarayıcıda web sitenizin adresinin veya adının yakınında bir favicon görüntülenir. Çoğunlukla favicon, 16 x 16 piksel boyutunda kare bir görüntüdür. Genellikle ICO formatında kaydedilir.

Bu makalede, farklı grafik editörleri kullanarak web siteniz için bir site ikonunun nasıl yapılacağını açıklayacağız. Ayrıca, web sitenize kolayca nasıl favicon ekleyebileceğinizden bahsedeceğiz.

İşte ihtiyacımız olanlar:

  1. 512 x 512 piksel boyutundan küçük olmayan kare şeklinde bir logo. Logo PNG olarak kaydedilmelidir.
  2. Bir grafik editörü (Adobe Photoshop veya GIMP).

Adobe Photoshop ile site ikonu nasıl yapılır

İşte şeffaf bir arka plan üzerinde site ikonunu nasıl yapacağınız hakkındaki her şey: 

  1. PNG logonuzu şeffaf bir arka planda şu şekilde açın: Dosya => Aç. Bilgisayarınızdan ilgili görseli seçin. 

2. Şirket adını logodan silmek için Silgi aracını kullanın. Ana rengi beyaz olarak değiştirin. 

3. Logonuzu 16 x 16 piksel boyutuna getirmek için, şunları adımları uygulayın: Görüntü => Görüntü boyutu.

4. Doğru boyutu ayarlayın (16px x 16px). Site ikonunuz çok küçük görünecek ama endişelenmeyin! Her şey plana göre ilerliyor.

5. Şu adımları uygulayarak görseli kaydedin: Dosya=> Farklı kaydet. Dosyayı PNG formatında kaydedin. 

Site ikonunuzdan memnunsanız, doğrudan bu kılavuzun 4. Bölümüne gidin. 

İşte kurumsal renklerinizle site ikonunu nasıl yapacağınız hakkındaki her şey: 

  1. Bir PNG dosyası açın. Bu durumda, şeffaf bir arka plan yerine, logonuz kurumsal renklerinizi arka plan olarak gösterir. 

2. Yalnızca simgeyi bırakacak şekilde metni kaldırın. Arka plan rengini seçmek için Seçme aracını kullanın. Ardından, şirket adını logodan kaldırmak için Fırça aracını kullanın. 

3. Görselin boyutlarını şu adımları izleyerek değiştirin: Görüntü=> Boyutu değiştir. Boyutu 16 piksel x 16 piksel olarak ayarlayın. Görüntü orantılı ve çekici görünüyorsa, PNG formatında kaydedin ve kılavuzun 4. Bölümüne atlayın. 

Görüntü İşleme Programı GIMP – GNU ile site ikonu nasıl yapılır

GIMP, farklı türde vektör görüntülerini düzenlemeye yarayan bir grafik editörü programıdır. Bu yazılımın en önemli avantajı, görüntü dönüştürücüler kullanmadan ICO formatında site ikonu oluşturabilmenizdir (Adobe Photoshop’ta olduğu gibi)

1. Dosya=> Aç adımlarını izleyerek logonuzu editörde açın.

2. Yalnızca simgeyi bırakacak şekilde başlığı kaldırın. Ardından renk paletine tıklayın ve arka plan olarak kullanmak istediğiniz kurumsal renk kodunu seçin. Kodu bilmiyorsanız, Seçici aracını kullanın, imleci arka planın üzerine getirin ve sol tuş ile bir tıklama yapın. Renk otomatik olarak seçilecektir. Harfleri site ikonundan kaldırmak için şimdi Fırça aracını kullanın.

3. Şu adımları izleyerek logoyu standart sit ikonu boyutlarına (16 x 16px) indirin: Resim => Resim boyutunu değiştir.

4. Logoyu tıklatarak dışa aktarın: Dosya => Farklı dışa aktar…

5. Dışa aktarma formatını seçin (Dosya türü: Microsoft Windows simgesi; Uzantı: ICO). Dışa Aktar düğmesini tıklayın.

Bitti! Artık site ikonunuzu web sitenizde kullanabilirsiniz!

ICO’yu PNG ve GIF uzantılarından daha iyi yapan nedir?

  1. Uyumluluk. ICO formatı, IE 5.0 da dahil olmak üzere tüm tarayıcılar tarafından desteklenir.
  2. 404 Hatası yok. Tüm modern tarayıcılar (Chrome 4, Firefox 3.5, IE8, Opera 10 ve Safari 4), site ikonunuzun ICO biçiminde kaydedilmesini gerektirir. 
  3. Bir ICO dosyası birden fazla simge içerebildiğinden, farklı simgeler için birden fazla dosya oluşturmanız gerekmez (16px x 16px, 48px x 48px).  

Online dönüştürücüler kullanılarak PNG nasıl ICO formatına dönüştürülür? 

PNG’yi ICO’ya dönüştürmek için çeşitli online dönüştürme hizmetlerinden faydalanabilirsiniz. Biz online-convert.com üzerine odaklanırken, neredeyse hepsinin kullanım şekilleri aşağı yukarı aynı olduğundan, siz istediğiniz bir servisi seçmekte özgürsünüz.Haydi başlayalım: 

  1. Online dönüştürücüyü tarayıcınızda açın. Soldaki çubukta, şu adımları seçin: Görüntü dönüştürücü => ICO’ya dönüştür.

2. Bilgisayarınızdaki “Dosyaları seç” butonuna tıklayarak veya ilgili alana sürükleyip bırakarak yükleyin. Devam etmek için ‘Dönüşümü başlat’ butonuna tıklayın.

3. ICO formatında site ikonunu bilgisayarınıza indirmek için ‘İndir’ butonuna tıklayın. Dosyayı aynı zamanda kendi bulutunuza yollayabilir veya ZIP formatında indirebilirsiniz. 

WordPress web sitenize nasıl site ikonu eklenir

Öncelikle, site ikonunuzu (favicon.ico) web sitenizin kök klasörüne yüklemeniz gerekir. 

Kök klasör, web sitenizin ‘index.php’ ve ‘wp-admin’, ‘wp-content’ ve ‘wp-include’ dahil olmak üzere tüm önemli WP dosyalarını içeren ana dizinidir. ‘Favicon.ico’ dosyanızı ‘index.php’ dosyası ile aynı klasöre kaydetmeniz gerekir. 

  1. WordPress yönetici panelini açın.

2. ‘Görünüm’ bölümüne gidin.

3. ‘Tema editörü’nü açın.

4. ‘Header’ (veya ‘Header.php’) adlı dosyayı seçin. Bu dosyayı düzenlemeniz gerekecek. 

5. Kodda, ‘<link rel = “shortcut icon”‘ ile başlayan ve ‘/favicon.ico “/>’ ile biten satırı bulun. <head> HTML etiketinin altına yeni bir kod dizisi ekleyin. 

İşte eklemeniz gereken kod: <link rel=”shortcut icon” href=”<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico” />

Bizim site ikonu dosyamız ‘favicon.ico’ olarak adlandırılmıştır. Ancak, başka bir isim seçmekte özgürsünüz.

6. Değişiklikleri kaydedin. 

Toparlayacak olursak: 

Bir web sitesi geliştirirken site ikonu da dahil olmak üzere en küçük ayrıntıya bile dikkat etmeniz gerekir. Bu markalı görüntü, görünümün ne kadar düzenbaz olabileceği gerçeğinin mükemmel bir örneğidir. Küçük olsa da, site ikonu kurumsal markanızda önemli bir rol oynar. Geniş kapsamlı yaklaşım anlayışınızı web sitesi tasarımınıza ve kullanıcıların dikkatine sunar. Ayrıca web sitenize site ikonu eklemek gerçekten çok kolaydır. Herhangi bir sorunuz varsa veya bir site ikonu oluşturma konusundaki deneyimlerinizi paylaşmak istiyorsanız, aşağıdaki yorumlar aracılığıyla gerçekleştirmenizden memnuniyet duyacağız!

Tam Marka Kimlik Paketi

Şirketinize hızlı bir başlangıç için Logaster’ı kullanın. İşletmenizin adını yazın ve 60 saniye içinde profesyonel bir marka paketine sahip olun! Hemen bizi deneyin — çok kolay!

En az 3 karakter uzunluğunda