Tek Bir Görselden Her Boyutta Favicon Nasıl Yapılır? (Ücretsiz, Yükleme Yok)

Bir logon var ve web siten bir favicon istiyor: tarayıcı sekmesindeki o minik resim. Kolay, ta ki tarayıcıların, iPhone'un, Android telefonların ve Windows'un her birinin kendi boyutunu ve kendi dosyasını istediğini öğrenene kadar. GetPlugzz Favicon Oluşturucu bunların hepsini tek bir görselden yapar. Logonu bırakırsın, bir düğmeye basarsın ve favicon.ico, bir Apple touch icon, Android ikonları, bir Windows tile, bir manifest dosyası ve sitene yapıştıracağın kodu alırsın. Tarayıcında çalışır; yani hesap yok, filigran yok ve hiçbir şey yüklenmez.

Tek bir görselden her boyutta favicon nasıl yapılır?

Favicon Oluşturucu'yu aç ve şunu yap:

1. Bir görsel ekle. Logonu kutuya bırak ya da tıklayıp seç. En az 512 × 512 piksellik kare bir görsel en iyi sonucu verir. Başka bir görsel ortadan kare olarak kırpılır.
2. Önizlemeye bak. Görselinde saydam bir arka plan varsa korunur, bu logolar için harikadır. Yapılacak tüm boyutları görürsün.
3. İndir. Tüm boyutları almak için Tümünü İndir (ZIP)'e bas, sonra gösterilen kodu sitenin head bölümüne yapıştır. Kod için bir Kopyala düğmesi var.

Elle yeniden boyutlandıracak bir şey yok, kurulacak bir şey de yok. Tarayıcın indirmeyi engellerse adres çubuğunun yanındaki İzin ver düğmesine tıkla, devam eder.

Bir favicon'a neden bu kadar çok boyut gerekir?

Aynı resmi minik bir çıkartma, vesikalık fotoğraf ve poster olarak basan bir fotoğraf kabinini düşün. Aynı yüz, ama her yerin kendi çerçevesi var. Favicon da aynı çalışır. Logon farklı yerlerde görünür ve her biri farklı bir boyut ister:

• 16 × 16 ve 32 × 32: tarayıcı sekmesi. 32'lik olan yüksek çözünürlüklü (retina) ekranlarda keskin kalmasını sağlar.
• 48 × 48: Windows kısayolları.
• 150 × 150: Windows tile.
• 180 × 180: biri siteni ana ekrana eklediğinde iPhone ve iPad'in kullandığı Apple touch icon.
• 192 × 192 ve 512 × 512: Android; ana ekran ve açılış ekranı için (web uygulamalarında da kullanılır).

ZIP dosyasının içinde ne var?

Araç bunların hepsini senin için yapar ve tek bir dosyaya paketler:

• favicon.ico: tarayıcı sekmelerinde görünen klasik ikon. İçinde 16, 32 ve 48 sürümleri olan gerçek bir çok boyutlu dosyadır.
• favicon-16x16.png, favicon-32x32.png ve favicon-48x48.png: küçük boyutlar.
• apple-touch-icon.png: iPhone ve iPad için ikon.
• android-chrome-192x192.png ve android-chrome-512x512.png: Android için ikonlar.
• mstile-150x150.png: Windows tile.
• site.webmanifest: tarayıcılara hangi ikonları kullanacaklarını söyler.
• head-snippet.html: yapıştıracağın kod, dosya olarak kaydedilmiş.

Dosyalar nereye gider?

Dosyaları web sitenin ana klasörüne yükle, sonra araçtaki kodu sayfalarının head bölümüne yapıştır. Tarayıcıya her ikonu nerede bulacağını söyleyen kod odur. İki küçük ipucu: site.webmanifest'i açıp sitenin adını ekle, çünkü boş bırakılıyor, ve beyazdan farklı bir şey istiyorsan tema rengini değiştir.

Yükleyebileceğin bir web siten henüz yok mu? İlk web siteni yayına alma rehberimiz alan adını, hostingi ve sayfaları anlatıyor. Boş sayfadan başlamak istemiyorsan, Bluehost'un AI website builder (sponsorlu bağlantı) aracı hosting içeriyor; yani dosyaları koyacağın bir yerin olurdu.

Hangi görsel en iyi sonucu verir?

• Kare ve büyük. En az 512 × 512 pikselle başla. Araç onu tüm boyutlara küçültür, yani kendin hiçbir şeyi yeniden boyutlandırmazsın.
• Ortalı. Kare olmayan bir görsel ortadan kareye kırpılır, bu yüzden önemli kısmı ortada tut.
• Saydam olması sorun değil. Logonun arka planı saydamsa ikonlar onu korur.
• Sade kazanır. 16 pikselde çok az yer var, bu yüzden net bir şekil ya da tek bir harf, ayrıntılı bir çizimden daha iyi okunur.

Bilmen gereken bir şey: bir seferde bir görsel

Oluşturucu tüm boyutları bir görselden tek seferde yapar. Birçok farklı logoyu bir seferde işlemez. Yapacak başka bir siten varsa Farklı bir görsel seç'e bas ve yeniden başla, birkaç saniye sürer.

Başlamadan önce bilmekte fayda var

Sık sorulan sorular