Düzgün bir favicon seti tek bir dosyadan fazlasıdır: tarayıcılar çok boyutlu bir .ico ister, iOS 180px apple-touch-icon ister, Android 192 ve 512px PNG'ler ile bir web manifest ister. Bu araç bunların hepsini tek bir görselden oluşturur ve tek bir ZIP'e paketler, üstelik <head> etiketinize yapıştıracağınız tam HTML etiketleriyle birlikte.
Önizleme, ikonunuzu gerçek 16, 32 ve 48px boyutunda gösterir, böylece yayınlamadan önce minik boyutlarda tanınabilir kalıp kalmadığını kontrol edebilirsiniz.
Nasıl kullanılır
- Logonuzu ekleyinKare görseller en iyi sonucu verir; diğerleri ortadan kırpılır.
- Küçük boyutları kontrol edin16px önizlemesi, çoğu kullanıcının bir sekmede gerçekten göreceği şeydir.
- ZIP'i indirinfavicon.ico, altı PNG, site.webmanifest ve yapıştırmaya hazır bir html-snippet.txt.
Bir görsel girer, tam bir favicon seti çıkar
Tek bir logo ya da simge bırakın, bu oluşturucu modern bir sitenin ihtiyaç duyduğu tam seti kursun: 16, 32 ve 48 piksellik sürümleri paketleyen çok boyutlu bir favicon.ico, Apple touch simgesi için 16, 32, 48, 180'de bağımsız PNG'ler ve Android ile PWA kurulumları için 192 ve 512, ayrıca bir site.webmanifest. Her şey tek bir ZIP olarak iner; böylece doğrudan proje kök dizininize bırakabilirsiniz.
Ayrıca doğru bağlantı ve meta etiketleri zaten bağlanmış, yapıştırmaya hazır bir HTML head kod parçası da alırsınız. Onu şablonunuza kopyalayın, dosyaları yükleyin ve favicon; hiç işaretleme elle yazmadan tarayıcı sekmelerinde, yer imlerinde ve ana ekran kısayollarında görünsün.
Her boyutta keskin simgeler
Faviconlar acımasızca küçüktür; bu yüzden oluşturucu, tam boyutlu önizlemeleri 16, 32 ve 48 pikselde tam olarak bir tarayıcı sekmesinin göstereceği gibi işler. Bu, 16px'te lapaya dönen bir logoyu göndermeden önce yakalamanızı sağlar. Kaynak görseliniz kare değilse, araç onu ortadan kırpar; böylece simge ezilmiş değil, dengeli kalır.
Tüm süreç tarayıcıda orijinal görselinizden çalışır; bu da yüksek çözünürlüklü bir logodan hiçbir yükleme ya da hesap olmadan favicon PNG'leri ve bir ICO oluşturabileceğiniz anlamına gelir.
İnsanlar bunu ne için kullanıyor
Yeni bir site başlatma — Sekmeler ve yer imleri ilk günden bitmiş görünsün diye favicon.ico ve her PNG boyutunu tek geçişte oluşturun.
Bir PWA kurulum simgesi ekleme — Uygulamanız düzgün bir ana ekran simgesiyle kurulsun diye 192 ve 512 PNG'lerini ve bir site.webmanifest dışa aktarın.
Apple touch simgesi — iOS yer imleri ve ana ekranları keskin bir kutucuk göstersin diye 180x180 apple-touch-icon üretin.
Mevcut bir siteyi yeniden markalama — Oluşturucudan tek bir yeni logo geçirin ve tüm simge setini bir kerede değiştirin.
Müşteri teslimi — Geliştiricinin sadece bırakması için ico, PNG'ler, manifest ve head kod parçasından oluşan tek bir ZIP teslim edin.
Küçük boyutta okunabilirliği kontrol etme — Ayrıntılı bir logonun hâlâ simge olarak okunduğunu doğrulamak için tam boyutlu 16px önizlemesini kullanın.
Kare olmayan logo — Geniş bir kelime markası verin ve ortadan kırpma onu dengeli bir kare favicona dönüştürsün.
Statik site ya da çerçeve projesi — Oluşturulan head etiketlerini Next, Astro ya da düz HTML şablonunuza kopyalayın ve gönderin.
Tek bir görselden tam bir favicon seti üretin — tarayıcıda, tek geçişte
Bir favicon tek bir 16×16 piksellik sonradan akla gelen bir şey gibi görünür ve yıllarca da öyleydi. Modern tarayıcılar ve platformlar onu sessizce küçük bir prodüksiyona dönüştürdü. Bugün bunu düzgün yapmak için bir favicon.ico, 16 pikselden 512 piksele kadar bir dizi PNG, iOS ana ekranları için bir Apple touch icon, sitenin bir uygulama olarak kurulabilmesi için bir site.webmanifest ve HTML <head>'inizde doğru <link> ve <meta> etiketleri bloğuna ihtiyacınız var. Bir boyutu kaçırın, sekme simgeniz retina bir ekranda bulanık görünür; manifest'i kaçırın, "ana ekrana ekle" simgesi bir ekran görüntüsüne geri döner; etiket bloğunu yanlış yapın, bazı platformlar her şeyi görmezden gelir.
Bu, proje başına bir kez yapıp sonra ayrıntılarını unuttuğunuz bir görev için çok fazla zahmetli çıktı. IMG.DIY tek bir kaynak görsel alır ve tam seti üretir — .ico, her PNG boyutu, web manifest ve bir kopyala-yapıştır HTML parçası — tamamen tarayıcınızda Canvas ile yeniden boyutlandırarak. Logonuz yerel olarak okunur ve cihaz üzerinde her hedef boyuta çizilir; hiçbir şey yüklenmez. Lansmandan önce üçüncü bir taraf sunucusuna göndermek istemeyeceğiniz bir marka işareti ya da piyasaya sürülmemiş bir ürünün logosu için, o yerel garanti sahip olmaya değer ve hiçbir şeye mal olmaz.
Tüm işlem hattı istemci tarafında çalıştığı için, PWA bir kez önbelleğe alındığında çevrimdışı da çalışır; böylece kilitli bir iş makinesinde ya da hiç bağlantı olmadan simgeleri yeniden üretebilirsiniz. Ücretsiz, hesap yok, simgelerinize gömülü filigran yok.
Onu farklı kılan ne
- Yalnızca bir .ico değil, tüm set. ICO, 16'dan 512'ye PNG'ler, Apple touch icon ve
site.webmanifesttek bir indirmede. - Kopyala-yapıştır HTML dahil.
<head>'inize bırakacağınız tam<link>/<meta>bloğu; böylece simgeler tarayıcılar arasında gerçekten kaydolur. - Hiçbir şey yüklenmez. Logonuz yerel olarak yeniden boyutlandırılır — işaret gizli ya da lansman öncesiyse kullanışlı.
- Tek geçiş, sihirbaz yok. Bir görsel besleyin, her şeyi alın; sonradan araştırmanız gereken platform seçimlerini soran çok adımlı bir akış yok.
- Çevrimdışı ve temiz. Önbelleğe alınmış PWA, kayıt yok, üretilen hiçbir simgede filigran yok.
IMG.DIY ile diğer favicon üreticilerinin karşılaştırması
| Özellik | favicon.io | realfavicongenerator.net | Manuel (tasarım uygulaması + kod) | IMG.DIY |
|---|---|---|---|---|
| Dosyalar yüklenir | Evet, sunucularına | Evet, sunucularına | Hayır, yerel | Hayır, tarayıcıda kalır |
| Tam set (.ico + PNG'ler + manifest) | Evet | Evet, çok kapsamlı | Siz birleştirirsiniz | Evet |
| HTML parçası sağlanır | Evet | Evet, ayrıntılı | Siz yazarsınız | Evet |
| Sonuca kadarki adımlar | Az | Daha fazla (çok seçenek) | Çok | Tek geçiş |
| Çevrimdışı çalışır | Hayır | Hayır | Evet | Evet, ilk ziyaretten sonra |
| Fiyat | Ücretsiz | Ücretsiz katman; ücretli seçenekler | Uygulama maliyeti + zamanınız | Ücretsiz |
| Hesap gerekir | Hayır | Hayır | Hayır | Hayır |
Rekabet hakkında dürüst olalım: realfavicongenerator mükemmeldir ve gerçekten daha kapsamlıdır — simgenizi gerçek platformlarda önizler, Safari sabitlenmiş sekme maskeleri ve temalandırma gibi uç durumları ele alır ve platform başına görünümü ince ayarlamanıza olanak tanır. Bu düzeyde denetim istiyorsanız ve görselinizi yüklemeye aldırmıyorsanız, harika bir seçimdir. favicon.io hızlı ve basittir ve o da sağlam bir set üretir. IMG.DIY'nin farkı, tam çıktının yükleme yok ve tek geçiş ile birleşimidir: aynı pratik teslimatları alırsınız — ico, PNG'ler, manifest ve onları bağlamak için HTML — logonuz tarayıcıdan ayrılmadan ve bir yapılandırma sihirbazından geçmeden. "Bir logom var, yapıştırmam gereken her şeyi ver ve dosyamı hiçbir yere gönderme" için, uyum budur.
Neden IMG.DIY
Eksiksiz set
ICO + 16/32/48/180/192/512 PNG'ler + manifest.
Kopyala-yapıştır HTML
Tam link etiketleri bir metin dosyası olarak dahil.
Gerçek boyut önizlemesi
İkonu önce gerçek 16/32/48px boyutunda görün.
Gizli
Logonuz tarayıcıdan asla çıkmaz.