Favicon seti oluşturun _

Tarayıcı tabanlı favicon oluşturma nasıl çalışır

Tüm oluşturma hattı, Canvas API ve fflate sıkıştırma kitaplığını kullanarak tarayıcı sekmeniz içinde çalışır. Sunucu tarafı işleme, yükleme veya üçüncü taraf hizmetler yoktur.

1. Kaynak görselinizi yükleyin veya metninizi ya da emojinizi yüksek çözünürlükte ekran dışı bir tuvale işleyin. Bir görsel seçtiyseniz, tarayıcı tarafından yerel olarak çözülür. Metin modunu seçtiyseniz, sayfa kelimenizi seçilen yazı tipi, ön plan rengi ve arka plan rengiyle bir tuvale çizer.
2. Her hedef boyut (16, 32, 48, 180, 192, 512 piksel) için sayfa, tam o boyutta yeni bir ekran dışı tuval oluşturur ve ardından Canvas API'yi kullanarak kaynak içeriği bunun üzerine çizer. Tarayıcının yerleşik görsel yeniden boyutlandırma özelliği, çift doğrusal veya çift kübik filtreleme ile küçültmeyi otomatik olarak işleyerek her boyutta keskin bir favicon üretir.
3. Her tuval, canvas.toBlob() aracılığıyla bir PNG Blob'una aktarılır. Ön izleme paneli, indirmeden önce sonucu inceleyebilmeniz için altı boyutun tümünü gösterir. Kullanıma hazır bir HTML bloğu ve bir web uygulaması manifest snippet'ı (manifest.json), dosya adlarından oluşturulur ve bunları doğrudan site head etiketinize ekleyebilirsiniz.
4. ZIP İndir'e tıkladığınızda, sayfa her PNG Blob'unu belleğe okur, fflate kullanarak bunları bir manifest.json dosyasıyla birlikte tek bir ZIP arşivine paketler ve tek tıklamayla indirmeyi başlatır. Paketin tamamı tarayıcınızda oluşturulur — hiçbir aşamada hiçbir şey yüklenmez.

Neden tarayıcınızda favicon oluşturmalısınız?

• Eksiksiz bir favicon seti, tarayıcının ilk ziyarette favicon bulunamadı 404 hatasını ortadan kaldırır ve sitenizin yer imlerinde, tarayıcı sekmelerinde ve PWA kurulum ekranlarında profesyonel görünmesini sağlar. Eksik boyutlar, tarayıcının ya hiçbir şey yüklememesi ya da bulanık bir en yakın komşu ölçeğine düşmesi anlamına gelir.
• Paketlenmiş HTML ve manifest snippet'i, altı etiketi ve bir JSON manifest bloğunu elle yazmaktan kurtarır. Bunları site head'inize yapıştırın, gerekirse yolları ayarlayın; dakikalar değil, saniyeler içinde işiniz biter.
• Fotoğraf düzenleyicisi olmayan kilitli kurumsal cihazlarda istemci tarafı oluşturma tek seçenektir. Hiçbir şey yüklenmediğinden, veri sızıntısı riski yoktur ve hassas veya markalı görseller için uyumluluk incelemesi gerekmez.
• Metin ve emoji modu, hiçbir görsel olmadan favicon oluşturmanızı sağlar. Marka baş harfinizi, bir harfi veya bir emojiyi yazın, bir yazı tipi ve renk seçin ve eksiksiz bir set elde edin — kişisel projeler, prototipler veya şimdilik sadece geçici bir favicona ihtiyaç duyan siteler için mükemmeldir.

Yaygın favicon oluşturma uygulamaları

İnsanların yer imlerine eklediği veya yüklediği her sitenin bir favicona ihtiyacı vardır. İşte tarayıcı tabanlı bir oluşturucunun zaman kazandırdığı üç senaryo.

• Yeni bir açılış sayfası veya mikro site kurulumu. Bir marka logosundan bir dakikadan kısa sürede eksiksiz bir favicon seti oluşturun, etiketlerini site head'ine kopyalayın ve dağıtın. Herhangi bir tasarım aracı gerekmez.
• Aşamalı bir web uygulaması için PWA ikonları üretme. manifest.json için 192×192 ve 512×512 PNG ikonları gereklidir. Bunları favicon setinin geri kalanıyla birlikte tek adımda oluşturun, bir logoyu manuel olarak yeniden boyutlandırmak zorunda kalmayın.
• Prototipler ve hazırlık siteleri için yer tutucular oluşturma. Tek bir harf veya emoji yazın, bir arka plan rengi seçin ve tasarım ekibinden nihai marka varlıklarını beklemeden gerçekçi faviconlar elde edin.

Çalışan bir örnek: şirket logosundan favicon seti oluşturma

500×500 PNG logonuz var ve yeni bir pazarlama sitesi için eksiksiz favicon setine ihtiyacınız var.

Bu sayfayı açın ve logo PNG'sini yükleme alanına bırakın. Görsel yüklenir ve boyut ızgarasının yanında bir ön izleme belirir. Favicon oluştur'a tıklayın. Sayfa, logoyu 16, 32, 48, 180, 192 ve 512 pikselde altı ekran dışı tuvale çizer ve her sonucu gösterir. Ön izleme panelinin altında, 16/32/48 boyutları için rel="icon" girişleri, 180 boyutu için bir apple-touch-icon bağlantısı ve PWA ikonları için bir manifest bağlantısı içeren kullanıma hazır HTML bloğu belirir. Altındaki manifest snippet'ı, 192 ve 512 ikonlarını listeler. ZIP İndir'e tıklayın — sayfa, fflate aracılığıyla altı PNG'yi ve manifest.json'u tek bir ZIP arşivine paketler. Tüm süreç iki saniye sürer ve ilk sayfa yüklemesi dışında hiçbir bant genişliği tüketmez.

Araç hangi favicon boyutlarını oluşturur?

Altı boyut: standart tarayıcı faviconları için 16×16, 32×32 ve 48×48, Apple Touch Icon için 180×180 ve PWA manifest ikonları için 192×192 ve 512×512. Her boyut PNG olarak verilir. Modern tarayıcılar, PNG faviconları aracılığıyla kabul eder.

Bir metin veya emojiden favicon oluşturabilir miyim?

Evet. Metin veya emoji moduna geçin, bir kelime yazın veya bir emoji yapıştırın, bir yazı tipi, ön plan rengi ve arka plan rengi seçin ve Oluştur'a tıklayın. Metin, yüksek çözünürlükte ekran dışı bir tuvale işlenir ve ardından her hedef favicon boyutuna yeniden boyutlandırılır.

Görsel bir sunucuya yükleniyor mu?

Hayır. Görsel cihazınızdan asla ayrılmaz. Sayfa, görseli belleğe okumak için tarayıcının File API'sini ve her faviconu yeniden boyutlandırıp dışa aktarmak için Canvas API'sini kullanır. Oluşturma sırasında DevTools Ağ panelini açın — giden tek istekler ilk sayfa yüklemesi ve reklam çağrılarıdır. Hiçbir görsel verisi iletilmez.

Görsel yükleme için hangi formatlar kabul edilir?

Tarayıcının çözebileceği herhangi bir format: PNG, JPEG, WebP, GIF ve SVG (tarayıcı tarafından rasterleştirilir). Dosya boyutu sınırı, yükleme başına 10 MB'dir.

ZIP indirme nasıl çalışır?

Sayfa, fflate kitaplığını (talep üzerine paylaşılan bir vendor yolundan yüklenir) kullanarak oluşturulan tüm PNG'leri ve manifest.json'u standart bir ZIP arşivine paketler. Paketleme tamamen tarayıcı belleğinde gerçekleşir — yükleme yok, sunucu gidiş-dönüşü yok. ZIP, tek tıklamayla Blob indirme olarak sunulur.

Bu faviconları herhangi bir web sitesinde kullanabilir miyim?

Evet. Oluşturulan PNG faviconlar, etiketini destekleyen tüm modern tarayıcılarda çalışır. 180×180 Apple Touch Icon, iOS ve Safari'yi kapsar. 192×192 ve 512×512 PWA ikonları, Android'de Chrome ve diğer PWA destekli tarayıcılar için manifest gereksinimlerini karşılar.

Gerçek bir .ico formatı seçeneği var mı?

Mevcut sürüm PNG çıktısı verir çünkü tüm modern tarayıcılar bunları aracılığıyla kabul eder. Gerçek çok çözünürlüklü .ico formatı henüz desteklenmemektedir ve gelecekteki bir sürümde eklenebilir.