Bu sayfa, tarayıcınızın tercih ettiği dil olan Türkçe olarak gösteriliyor.
Bu sayfanın kodu başlamadı.
index.html dosyasını doğrudan bir klasörden açmak JavaScript modüllerini engeller, bu yüzden bir resim seçildiğinde hiçbir şey olmaz. Klasörü bunun yerine http üzerinden sunun:
Yukarıdan bir dosya seçtiğinizde açılır.hazır — internet bağlantısını kesin, bu yine de çalışır.bu tarayıcıda kullanılamıyor (diğer her şey çalışmaya devam eder).çevrimdışı kullanım için önbelleğe almak https:// veya localhost gerektirir.önbelleğe alma burada mümkün değil, ancak zaten hiçbir şey yüklenmiyor.dosyalarınız hiçbir yere gitmedi. {total} dosya yüklendi, hepsi bu sayfanın kendi dosyaları. {platform}bir şey {hosts} ile iletişim kurdu; bu araç bunu asla yapmaz. Bunu araştırmaya değer sayın. {platform}Sayfanın kendi reklam, ölçüm ve bağış düğmesi betikleri {hosts} sunucudan yüklendi; hiçbirine bir dosya ya da ondan bir bayt verilmedi.Sayfanın kendi reklam, ölçüm ve bağış düğmesi betikleri {hosts} sunucudan yüklendi; hiçbirine bir dosya ya da ondan bir bayt verilmedi.Bir şeyler bozuldu: {detail}. Baştan başlamak için sayfayı yeniden yükleyin.{count} dosya okunuyor…{count} dosya okunuyor…Bir örnek deneÖrnek oluşturuluyor…Bu tarayıcı örneği oluşturamadı. Bunun yerine bir dosya seçin.
Görselden ICO'ya — favicon, Windows ve macOS simge yapıcı
Bir resim girer. Bir tarayıcının, Windows'un ya da bir Mac'in istediği her boyut çıkar.
Ölçekleme de simge dosyalarının kendisi de kendi tarayıcınızda üretilir. Resim, tarayıcınızın zaten beraberinde getirdiği tuval tarafından çizilir ve her kap — Windows .ico'su, macOS .icns'i — o piksellerden, src/ico.js ve src/icns.js içindeki, okuyabileceğiniz birkaç yüz satırla kurulur. Bu aracın hiçbir türde ağ özelliği yoktur — getirecek bir şey yok, gönderecek bir şey yok — ve olsaydı bile bu sayfanın öbür ucunda bir logonun gönderilebileceği bir sunucu yok.
✗ Yükleme yok
✗ Hesap yok
✗ Filigran yok
✓ Çevrimdışı çalışır
✓ Açık kaynak
Canlı kontrol:kontrol ediliyor…
Çevrimdışı:kontrol ediliyor…
Bize güvenmek zorunda değilsiniz: geliştirici araçlarını açın, Ağ sekmesini izleyin ve bir simge yapın. Tek bir istek bile bir görsel, bir küçük resim, bir dosya adı ya da seçtiğiniz şeyden tek bir bayt taşımıyor. Ya da internet bağlantısını kesip yine de bir tane yapın.
Gizlilik iddiası nasıl doğrulanabilir
Logonuzun gidecek bir yeri yok. Content-Security-Policy, bu sayfanın iletişim kurabileceği her adresi tek tek sayar ve bunların hiçbiri bu siteye ait değildir. Dosyalarınızın toplanabileceği bir uç nokta burada yok, olsaydı bile onları oraya gönderecek bir kod yok.
Burada hiçbir şey bir şey getirmiyor.src/ içinde hiçbir yerde fetch, XMLHttpRequest ya da sendBeacon yok. Ölçekleme, bir tuvale yapılan bir drawImage'dir; her simge de bu sayfada, o piksellerin önüne src/ico.js ya da src/icns.js tarafından yazılmış bir başlıktır.
Dosya kendi baytlarından tarif ediliyor. Bitmiş bir simgenin yanında gösterilen boyut listesi, istediğiniz boyutların listesi değildir. Az önce yazılan dosyadan readIcoDirectory ya da readIcnsElements tarafından geri okunur; yani bir yazıcı ayarlarla çelişseydi sayfa bunu söylerdi, siz Windows hiçbir şey çizmediğinde ve macOS boş bir kâğıt çizdiğinde öğrenmezdiniz.
Google neyi yüklüyor, neyi almıyor. Reklam ve ölçüm betikleri Google'dan, bağış düğmesi de Buy Me a Coffee'den geliyor. Hiçbirine resminiz hakkında bir şey verilmiyor. Bir dosyayı okuyan, ölçekleyen ya da yazan her satır bu kaynaktan sunuluyor ve depoda listeleniyor.
Çevrimdışı çalışır. Ağ bağlantısını kesin, araç hiç değişmez; çünkü içinde en baştan beri bir ağ adımı yoktu. Hepsinin içindeki en basit kanıt bu.
Kendiniz kontrol edin. Yukarıdakilerin hiçbirine güvenmeniz gerekmez. Bu sayfa, depodaki şablonlardan ve yapılandırmadan, okuyup kendiniz çalıştırabileceğiniz bir derleme betiği tarafından üretilir ve sonuç dist dalına işlenir — yani sunulan şeyi kaynakların bir derlemesinin ürettiğiyle karşılaştırabilirsiniz:
Önce okunmaya değer dosyalar, Content-Security-Policy için config/site.toml, iki simge biçimi için src/ico.js ve src/icns.js — birinde dizin, girdiler ve maske; diğerinde Apple'ın adlandırılmış on yuvası — ve sayfadaki her boyutun nereden geldiği için src/sizes.js.
İş yerinizin güvenlik yazılımı bir yükleme uyarısı verirse. Tarayıcıda bir dosyanın seçildiği anı izler ve sayfanın onu göndermeye niyetli olup olmadığını bilemez — bu yüzden seçim anında uyarır. Buradan hiçbir şey gönderilmez: tarayıcınızın geliştirici araçlarını açın, Ağ sekmesine geçin ve bir dosya seçin. Onu taşıyan bir istek yoktur; sayfanın kendi yerel önizlemesi dışında hiçbir istek yoktur. Aynı denetimi BT ekibiniz yarım dakikada yapabilir.
1 Bir resim seçin
2 Simgenin ne için olduğunu söyleyin
Bir simge dosyası tek bir resim değil, birkaç resimdir: aynı logo, onu okuyan şeyin istediği her boyutta yeniden çizilir. Bunların hangi boyutlar olduğu bir zevk meselesi değildir — bir tarayıcı üç tanesini ister, yüksek yoğunluklu bir dizüstündeki bir uygulama on tanesini ister, bir Mac kendi onunu ister ve Windows Vista'dan önce yazılmış bir şey onların tamamen başka türlü saklanmasını ister.
Windows simgesi — .ico Her tarayıcı tarafından favicon olarak, Windows tarafından da bir uygulama, bir kısayol ve bir klasör için okunur. Boyutları aşağıdan siz seçersiniz.
macOS simgesi — .icns Bir Mac uygulama paketinin taşıdığı şey. Apple, 16 pikselden 1024 piksele tam olarak on yuva belirler; yani seçilecek bir şey yoktur: onunun tamamı girer ve bunlar yedi çizimden çıkarılır, çünkü bir Retina yuvası ile bir üstündeki boyut aynı resimdir.
Bir web sitesinin simge setinin geri kalanı Bir .ico, tarayıcı sekmesini ve Windows'u kapsar. Bir iPhone ana ekranını, bir Android kurulum istemini ya da başlat menüsüne sabitlenmiş bir kutucuğu kapsamaz — onlar 180 piksellik bir PNG, bir web uygulaması bildirimi ve bir XML dosyası okur ve hiçbiri bir .ico'nun içine bakmaz. Bunu işaretleyin, hepsini, bildirimi ve sayfanıza yapıştıracağınız HTML bloğunu da alın.
3 Görüleceği boyutta denetleyin
Bir şey indirmeden önce bakmaya değen kısım burasıdır. 512 pikselde kusursuz okunan bir logo, bir tarayıcı sekmesinde on altı piksel genişliğindedir ve onun ince kısımları — bir kelime logosundaki çizgiler, saç teli bir çerçeve, bir renk geçişi — bunu atlatamaz. Aşağıdaki her kare, seçtiğiniz dosyadan gerçek boyutunda çizilir.
Hazır
Bunu <head> içine yapıştırın
{name}: bu aracın okuyabileceği bir görsel değil.{name}: bu tarayıcı onu çözemedi.bu tarayıcı resmi çözemedi.bu tarayıcı PNG yazmayı kabul etmedi.bir simgenin içinde en az bir görsel olmalı.bir simge görseli sıfır piksel genişliğinde olamaz.{size} bir .ico içine sığmaz: biçim her kenarı tek bayta yazar, yani en büyüğü 256.piksel tamponu, iddia ettiği boyutla uyuşmuyor..ico değil: bir başlığı taşıyacak kadar uzun değil..ico değil: tip alanı 1 değil.dizin, dosyanın sonunu aşıyor.bir girdi, dosyanın sonundan ötesini gösteriyor.bir simgenin içinde en az bir görsel olmalı.“{type}” dört harfli bir icns tipi değil..icns değil: bir başlığı taşıyacak kadar uzun değil..icns değil: imza “icns” değil.başlık {claimed} bayt diyor, dosya ise {actual}.bir öge, dosyanın sonunu aşıyor.{type} ögesi, dosyanın taşıyamayacağı bir uzunluk bildiriyor.{n} bayt{n} KB{n} MB1 görsel{n} görsel1 boyut{n} boyut1 yuva{n} yuva{a}, {b}{a} ve {b}{a} ve {b}{size} · {bytes} · kare{size} · {bytes} · kare değilBunu önizlemede göster{name} dosyasını listeden çıkartarayıcı sekmesi, adres çubuğu ve Dosya Gezgini'ndeki küçük simge%125'te Windows liste görünümleri%150'de Windows görev çubuğumasaüstü, görev çubuğu ve tarayıcının yer imleri çubuğu%125'te masaüstüDosya Gezgini'nin orta boy simgeleri ve Google'ın bir faviconu okuduğu boyut%200'de Dosya Gezgini ve Alt-Tab değiştiricisiDosya Gezgini'nin büyük simgelerikurulum programlarının hâlâ okuduğu eski jumbo boyutDosya Gezgini'nin çok büyük simgeleri ve Başlat menüsü; bir .ico içindeki en büyüğüWeb sitesi faviconuBir sitenin köküne konan klasik favicon.ico. Üç boyut bütün geleneği oluşturur: sekme için 16, bir yer imi ve Windows kısayolu için 32, 48 de Google'ın bir site simgesini o boyutta okuduğu için.Windows uygulama simgesiBir .exe ya da bir kısayolun istediği, ve Visual Studio'nun kendi app.ico dosyasında olan: üç kabuk boyutu ve Başlat menüsüyle Dosya Gezgini'nin çok büyük görünümünün beslendiği 256.Windows uygulaması, her ölçekAynı simge, Windows'un %125, %150 ve %200 ekran ölçeklemesinde istediği ara boyutlarla birlikte. Daha büyük dosya, ve yüksek yoğunluklu bir dizüstünde sessizce yeniden örneklenmeyen tek sürüm.En geniş uyumlulukÜç boyut, hepsi Vista öncesi yöntemle saklanmış; kurulum programları, gömülü cihazlar ve bir .ico dosyasını kendi okuyup içindeki PNG'nin ne olduğunu bilmeyen eski kabuk araçları için.Boyutları kendiniz seçinBu biçimin taşıyabildiği her boyut. Hepsini işaretlemek nadiren doğru yanıttır: her biri ayrı bir resimdir, ve kimsenin istemediği bir boyutu hiçbir şey okumaz.{list} pxaşağıda işaretlediklerinizHiçbir şey işaretli değil, yani yapılacak bir şey yok.Hiçbir boyut işaretli değil, yani .ico içinde hiçbir şey olmazdı. Bir boyut işaretleyin, ya da başka bir çıktı.Resim başına: {parts}.Resim başına: {parts}. .icns 1024 piksele kadar çizilir, yani büyük olan odur; bir Mac'in istediği de budur.{count} taşıyan bir .icoApple'ın {n} yuvasının hepsini taşıyan bir .icnsbir sitenin ihtiyaç duyduğu {n} PNG ve üç metin dosyasıHiçbir şey işaretli değil, yani dosyada hiçbir şey olmazdı.En az bir boyut işaretleyin.{count} — {list} — {kind}. Zaten kare olmayan bir resim {fit}.64 piksele kadar Vista öncesi yöntemle, üstünde PNG olarak saklanırher boyut PNG olarak saklanırher boyut Vista öncesi yöntemle saklanırkareye tamamlanır, tamamlanan yer saydam bırakılırarka plan renginde kareye tamamlanırortadaki kareye kırpılırkareye esnetilir{n} tanesi sıkıştırmasız, ki bu tam {size} eder{n} tanesi PNG, boyutu resme bağlı{parts}. {tail}Dosyadaki hiçbir şey sıkıştırılmamış, dolayısıyla Windows Vista'dan eski yazılımlar dahil her şeyde açılır.Her girdi bir PNG, ki bu bir .ico'nun ulaşabileceği en küçük hâldir ve Windows XP ile birkaç kurulum programı için okunmazdır.Küçük boyutlar her şeyin okuyabilmesi için eski yöntemle, büyükler ise PNG olarak saklanır, çünkü kazanç oradadır.{name} {size}, yani kare değil, oysa bir simge hep karedir. Ortadaki kare alınıyor; uçlar kesiliyor.{name} {size}, yani kare değil, oysa bir simge hep karedir. Esnetiliyor, dolayısıyla her boyutta ezilmiş görünecek.{name} {size}, yani kare değil, oysa bir simge hep karedir. Tamamlanıyor, dolayısıyla resmin tamamı korunuyor ve altında üstünde boşluk kalıyor.Yalnızca {size}, dolayısıyla {list} resimden büyük. O boyut çizilmek yerine büyütülüyor, ve bir resmi büyütmek, içinde hiç olmamış bir ayrıntıyı geri getiremez.Yalnızca {size}, dolayısıyla {list} resimden büyük. O boyutlar çizilmek yerine büyütülüyor, ve bir resmi büyütmek, içinde hiç olmamış bir ayrıntıyı geri getiremez.{shape} {small}{name}, dosyaya girecek her boyutta çizilmiş hâliyle. Yukarıdaki her kare bu ekrandaki gerçek boyutundadır ve saydamlığın saydamlık olarak görünmesi için bir dama zemin üzerindedir. 16px olan gri bir lekeyse, simgenin ihtiyacı başka bir ayar değil, daha yalın bir çizimdir.{note} {list} piksel de yazılıyor; buraya konmadılar, çünkü o boyutta bir kare ekrana sığmaz — zaten ters giden hiçbir zaman o olmaz.{count} çiziliyor…{name} çiziliyor…Bitti.{name} {slots} taşıyor ve {size}.{names}, ikisi birlikte {size}.{count} {n} simge dosyasına dönüştürüldü, toplam {size}.{summary} Site setinin geri kalanı yanındaki zip içinde.{slots}, {size}{name} dosyasından, {size}.{detail} Bir Mac uygulama paketinin içine bırakın, ya da Bilgi Al ile klasör simgesi olarak ayarlayın.{detail} Ayrıca simge setinin geri kalanı için {n} dosya daha.{label} · {detail} · {size}sıkıştırmasız.{kind} dosyasını indirKopyalaKopyalandıSeçildi — Ctrl+C tuşlarına basınSimgeler. favicon.ico site köküne konur; tarayıcılar bu adresi söylenmeden ister, dolayısıyla kendi <link> etiketine ihtiyacı yoktur.Sitenizin adı.ico yerine PNG tercih eden tarayıcılar için sekmeyer imleri çubuğu ve sabitlenmiş bir Windows kısayoluiOS ana ekranı. Saydamsız çizilir: iOS saydamlığı siyaha çevirirAndroid ana ekranı ve kurulum davetibir web uygulamasının açılırken gösterdiği açılış ekranıuyarlanır bir başlatıcının kırptığı güvenli alanın içindeki aynı simgeWindows Başlat menüsüne sabitlenmiş bir kutucukWeb sitesi simge setiabox.tools/image-to-ico/ adresinde tarayıcının içinde yapıldı — yapmak için hiçbir şey yüklenmedi ve bu dosyalarla ilgili hiçbir şey hiçbir yere gönderilmedi.Bu dosya ve head.html dışındaki her dosyayı sitenizin köküne yükleyin, ki /favicon.ico, /apple-touch-icon.png ve benzeri adreslerde yanıt versinler. site.webmanifest, browserconfig.xml ve head.html içindeki yolların hepsi bunu varsayar. Bunun yerine bir alt klasöre koyacaksanız, o üç dosyayı buna göre düzenleyin.klasik favicon; {sizes} piksellik sürümleri taşıyorAndroid'in ve ana ekrana ekleme davetlerinin okuduğu dosyaWindows Başlat menüsüne sabitlenmiş bir kutucuğun okuduğu dosya<head> içine yapıştırılacak işaretleme; yüklenecek bir dosya değilYüklemeden önce site.webmanifest içindeki adı sitenizin adıyla, içindeki iki rengi de simgeye yakışanla değiştirin.Not: burada favicon.ico yok, çünkü .ico çıktısı kapalıydı. Bir sitenin gerçekten bir taneye ihtiyacı vardır — tarayıcıların kendiliğinden istediği adres odur.görselleriniz hiçbir yere gitmedi. {total} dosya yüklendi, hepsi bu sayfanın kendi dosyaları. {platform}bir şey {hosts} ile iletişim kurdu; bu araç bunu asla yapmaz. Bunu araştırmaya değer sayın. {platform}Sayfanın kendi reklam, ölçüm ve bağış düğmesi betikleri {hosts} sunucudan yüklendi; hiçbirine bir görsel ya da ondan bir bayt verilmedi.Sayfanın kendi reklam, ölçüm ve bağış düğmesi betikleri {hosts} sunucudan yüklendi; hiçbirine bir görsel ya da ondan bir bayt verilmedi.
İşe yaradı mı?
Ne yanlış gitti?
Teşekkürler — bu yardımcı oluyor.
Yalnızca yanıt gönderilir, yalnızca bir düğmeye bastığınızda. Dosyanız, adı veya onun hakkında hiçbir şey asla gönderilmez.
# Görselden ICO'ya — favicon, Windows ve macOS simge yapıcı
Bir resim girer. Bir tarayıcının, Windows'un ya da bir Mac'in istediği her boyut çıkar.
> Bir PNG, JPEG veya SVG'yi tarayıcınızda gerçek, çok boyutlu bir .ico ya da bir macOS .icns dosyasına dönüştürün. Favicon, Windows uygulama simgesi, Mac uygulama simgesi ve bir sitenin ihtiyaç duyduğu Apple ile Android dosyaları. Hiçbir şey yüklenmez.
Bu sayfa, tamamen tarayıcınızda çalışan etkileşimli bir araçtır: https://abox.tools/tr/favicon-olusturma/. Ona verdiğiniz hiçbir şey yüklenmez. Aşağıda, sayfanın bu araç hakkında sözcüklerle söylediği her şey yer alır; kullanmak için adresi açın.
## görselleriniz **asla yüklenmez**. Sunucu yoktur.
Ölçekleme de simge dosyalarının kendisi de kendi tarayıcınızda üretilir. Resim, tarayıcınızın zaten beraberinde getirdiği tuval tarafından çizilir ve her kap — Windows `.ico`'su, macOS `.icns`'i — o piksellerden, `src/ico.js` ve `src/icns.js` içindeki, okuyabileceğiniz birkaç yüz satırla kurulur. Bu aracın hiçbir türde ağ özelliği yoktur — getirecek bir şey yok, gönderecek bir şey yok — ve olsaydı bile bu sayfanın öbür ucunda bir logonun gönderilebileceği bir sunucu yok.
- ✗ Yükleme yok
- ✗ Hesap yok
- ✗ Filigran yok
- ✓ Çevrimdışı çalışır
- ✓ Açık kaynak
## Hiçbir şey yüklemeden nasıl .ico dosyası yapılır
1. **Resmi seçin.** Seçiciye bir PNG, JPEG, WebP ya da SVG bırakın veya birkaç tane seçip hepsini tek seferde dönüştürün. Kare olanı en kolayıdır ve 256 pikselden yukarısı her boyut için yeterli ayrıntı taşır. Tarayıcı onu doğrudan diskinizden okur; siz bunu yaparken hiçbir yere hiçbir şey gönderilmez.
2. **İhtiyacınız olan dosyaları seçin.** Windows ve bir tarayıcı `.ico` okur; bir Mac `.icns` okur ve diğerine hiç bakmaz. Birini işaretleyin ya da yaptığınız şey ikisinde de yayımlanacaksa ikisini birden. Bir web sitesi ayrıca Apple, Android ve kutucuk görsellerini de ister ve üçüncü kutu odur.
3. **Simgenin ne için olduğunu söyleyin.** Bir web sitesi faviconu 16, 32 ve 48 pikseldir; bir Windows uygulaması 256'yı da ister; yüksek yoğunluklu bir dizüstünde düzgün görünmesi gereken bir uygulama, Windows'un %125 ve %150 ölçeklemede istediği ara boyutları ister. İşe uyanı seçin ya da boyutları kendiniz işaretleyin. Listedeki her boyut, onu neyin istediğini söyler. `.icns`'te böyle bir seçim yoktur: Apple tam olarak on yuva belirler ve onu da girer.
4. **Şekli ve arka planı halledin.** Bir simge karedir ve çoğu logo değildir. Doldurun; resmin tamamı, üstünde ve altında boşlukla korunur. Kırpın; ortası alınır. Esnetin; ezilir. Arkasına oturacak bir renk seçmediğiniz sürece saydamlık saydamlık olarak korunur.
5. **İndirmeden önce 16 piksellik olana bakın.** Simgenin en sık görüleceği boyut odur ve ince çizgilerle küçük harflerin kaybolduğu yer de orasıdır. Ön izlemedeki her kare, sizin dosyanızdan gerçek boyutunda çizilir. En küçüğü bir lekeyse çözüm başka bir ayar değil, daha basit bir çizimdir.
6. **Dosyaları alın.** İçinde her boyutu olan tek bir .ico; istediğiniz buysa `favicon.ico` adıyla, çünkü tarayıcıların aradığı adres odur. İşaretlediyseniz yanında bir .icns; bir Mac uygulama paketine girmeye hazır. Web sitesi setini de işaretleyin; Apple, Android ve Windows kutucuk görsellerini, bildirimi ve sayfanıza yapıştıracağınız HTML bloğunu da alın. Tek dosyadan fazlası tek bir zip olarak iner.
## Uzun sürüm
[On altı pikselde hâlâ okunan bir favicon nasıl yapılır](https://abox.tools/tr/rehberler/favicon-olusturma/): Bir favicon.ico'nun gerçekte hangi boyutlara ihtiyacı olduğu, iPhone'ların, Android'in ve bir Mac'in hangi ek dosyaları istediği ve bir afişte işe yarayan bir logonun on altı pikselde neden kaybolduğu.
## Kutuda ayrıca
- [Görselden Data URI'ye](https://abox.tools/tr/resmi-base64e-donusturme/): Resmin tamamı tek satır metin olarak. Doğrudan CSS ya da HTML içine yapıştırın.
- [SVG'den Görsele](https://abox.tools/tr/svg-yi-pnge-donusturme/): Boyutu siz söyleyin. Bir vektörün kaybedecek kendi boyutu yok.
- [Görselden SVG'ye](https://abox.tools/tr/gorseli-svg-ye-donusturme/): Bir şekil, bir dış çizgi. Orada olmaması gerekeni gösterin, yeter.
- [Boy Karşılaştırma](https://abox.tools/tr/boy-karsilastirma/): Boyları yazın, resmi alın. Onu çizmek için hiçbir şey gönderilmez.
## Sorular
### Görselim herhangi bir yere yükleniyor mu?
Hayır. Resim kendi donanımınızda, kendi tarayıcınız tarafından çözülür ve ölçeklenir; .ico da o piksellerden, bu sayfadan sunulan kodla kurulur. Bu aracın hiçbir türde ağ özelliği yoktur — hiçbir zaman bir şey getirmez ve hiçbir zaman bir şey göndermez — ve sayfanın `Content-Security-Policy`'si iletişim kurabileceği her adresi tek tek sayar; bunların hiçbiri bu siteye ait değildir.
### Bir favicon.ico hangi boyutları içermeli?
16, 32 ve 48. Bu bir tercih değildir: 16, bir tarayıcının bir sekmede çizdiğidir; 32, Windows'un bir masaüstü kısayolu için kullandığı ve birkaç tarayıcının bir yer imi için kullandığıdır; 48 ise Google'ın bir site simgesini okuduğu boyuttur. Daha büyüğü .ico'nun içinde değil yanında bir PNG'de olmalıdır — buradaki web sitesi setinin ürettiği de budur.
### Bir Windows uygulama simgesi hangi boyutlara ihtiyaç duyar?
16, 32, 48 ve 256; Visual Studio'nun kendi varsayılan app.ico'sunun tuttuğu da budur. 16 başlık çubuğu ve küçük Explorer görünümü, 32 masaüstü ve görev çubuğu, 48 Explorer'ın orta simgeleri ve 256 başlat menüsü ile çok büyük görünümdür. Yüksek yoğunluklu bir ekranda Windows ayrıca 20, 24, 40, 64 ve 96'yı da ister ve yoklarsa elindeki en yakın boyuttan yeniden örnekler — "her ölçek" hazır ayarı onları da koyar.
### Dosya neden başladığım resimden büyük?
Çünkü bir .ico tek bir resim değil birkaç resimdir ve küçük olanlar, her şey okuyabilsin diye sıkıştırılmadan saklanır. 32x32'lik bir girdi içinde ne olursa olsun tam 4.264 bayttır ve sıkıştırılmamış bir 256x256 girdisi 264 KB'dir — 64'ün üstündeki boyutların varsayılan olarak PNG saklanmasının sebebi de budur. "Her boyut için PNG" seçmek var olan en küçük dosyayı yapar; her boyut için sıkıştırılmamışı seçmek ise en uyumlusunu.
### PNG ve sıkıştırılmamış girdiler arasındaki fark ne?
Yalnızca piksellerin .ico içinde nasıl saklandığı. Sıkıştırılmamış bir girdi, özgün Windows düzenidir — bir bit eşlem başlığı, baş aşağı pikseller ve bir bitlik bir saydamlık maskesi — ve şimdiye kadar çıkmış her Windows sürümü onu okuyabilir. Bir PNG girdisi ise simgenin içine sıkıştırılmış bütün bir PNG dosyasıdır; büyük boyutlarda üç ila on kat daha küçüktür ama yalnızca Windows Vista'dan itibaren anlaşılır. Varsayılan, her birini kazandığı yerde kullanır: 64 piksele kadar sıkıştırılmamış, üstünde PNG.
### 256 pikselden büyük bir simge yapabilir mi?
Hayır ve hiçbir şey yapamaz. Biçim her kenarı tek bir baytta saklar ve 0'ın bir karşılığı vardır — 256 demektir. Tavan budur; yani içinde 512 piksellik bir görüntü olan bir .ico daha büyük bir simge değil bozuk bir simgedir. 512 gerekiyorsa bir PNG gerekir ki web sitesi setinin Android ve bir web uygulamasının açılış ekranı için içerdiği de odur.
### Saydamlığı koruyor mu?
Evet, her iki girdi türünde de; ayrıca alfa kanalının yanına eski bir bitlik maskeyi de yazar, böylece alfayı okuyamayacak kadar eski yazılımlar siyah bir kutu çizmek yerine simgeyi yine de kesip çıkarır. Bilinçli olarak opak yapılan tek dosya, web sitesi setindeki Apple dokunma simgesidir: iOS onu kendi kutucuğuna yerleştirir ve saydamlığı siyaha çevirir; bu yüzden varsayılan olarak beyaz olan arka plan renginize düzleştirilir.
### Logom geniş, kelime biçiminde. Ona ne olur?
Bir şey olmak zorunda, çünkü bir simge karedir. Doldurmak her şeyi korur ve küçültür — 16 piksellik bir kareye doldurulmuş bir kelime logosu yaklaşık üç piksel yüksekliğinde ve okunmazdır. Ortaya kırpmak genellikle daha iyi sonuç verir: neredeyse her markanın faviconu için yaptığı gibi, semboli kompozisyondan çıkarıp onu kullanın. Ön izleme, siz bir şey indirmeden önce hangisinin hayatta kaldığını gösterir.
### Web sitesi setinde neler var ve hepsine ihtiyacım var mı?
Yedi PNG, bir web uygulaması bildirimi, bir browserconfig.xml ve yapıştırılacak bir HTML bloğu. Onlara ihtiyacınız var, çünkü bir .ico tarayıcıları ve Windows'u kapsar, başka hiçbir şeyi kapsamaz: bir iPhone ana ekranı kendi adıyla 180 piksellik bir PNG okur, Android ve her kurulum istemi bildirimi okur ve başlat menüsüne sabitlenmiş bir kutucuk XML'i okur. Bunların hiçbiri bir .ico'nun içine bakmaz. Her şey burada, sizin makinenizde üretilir ve zip'in içinde her dosyanın ne işe yaradığını söyleyen bir not vardır.
### Bir macOS simgesi de yapabilir mi?
Evet — *macOS simgesi*'ni işaretleyin; `.ico`'nun yanında ya da onun yerine bir `.icns` alın. Aynı fikrin başka bir kabıdır ve iki sistem de diğerininkini okumaz: Windows .ico ister, bir Mac uygulama paketi ise .icns ister. Orada boyutlar bir seçim değildir, çünkü Apple tam olarak on yuva yayımlar — 16, 32, 64, 128, 256, 512 ve 1024 piksel; bunlardan üçü, bir altındaki boyutun Retina sürümü olarak iki kez görünür. Onu da girer; yedi çizimden çıkarılırlar ve bir .icns'in daha büyük dosya olmasının sebebi de budur.
### .icns dosyasını nasıl kullanırım?
Bir uygulama için, pakette `YourApp.app/Contents/Resources/` içine konur ve `Info.plist` içinde `CFBundleIconFile` altında adlandırılır; her Mac paketleme aracının bunun için bir alanı vardır. Başka her şey için dosyayı Finder'da seçin, Command-C'ye basın, sonra değiştirmek istediğiniz klasör ya da disk imajında Get Info açın, sol üstteki küçük simgeye tıklayın ve Command-V'ye basın.
### .icns, iconutil'in ürettiğiyle aynı mı?
Aynı dört harfli türlerle aynı on yuva ve her birinde PNG; bir `.iconset` klasöründen `iconutil`'in ürettiği de budur. Bilinçli tek fark: Apple'ın aracı ayrıca, ardından gelen türlerin ve uzunlukların bir dizini olan bir `TOC` öğesi yazar. Bu, biçimin parçası değil bir iyileştirmedir — onsuz bir okuyucu öğeleri baştan sona gezer ve aynı cevaba varır — ve yanlış bir dizin, dizinsizlikten kötüdür; bu yüzden dışarıda bırakılır.
### Aynı anda birkaç resmi dönüştürebilir miyim?
Evet. Listedeki her resim aynı ayarlarla kendi .ico'suna dönüşür ve yığın, resim başına bir klasör içeren tek bir zip olarak iner — yoksa ikisinin de adı favicon.ico olur ve biri diğerinin üzerine yazardı. İşaretlediğiniz her çıktı, her resim için üretilir. O resmi ön izlemeye koymak için herhangi bir satıra tıklayın.
### Ücretsiz mi, hesap açmam gerekiyor mu?
Ücretsiz; hesap yok, giriş yok, deneme süresi yok, filigran yok. Dosyaların sayısında ya da boyutunda da bir sınır yok, çünkü bunların bedelini ödeyen bir sunucu yok — iş sizin kendi cihazınızda oluyor. Sitede reklam var, masrafı karşılayan da o; reklamlara görselleriniz hakkında hiçbir şey verilmiyor.
### Çevrimdışı çalışıyor mu?
Evet. Sayfayı bir kez yükleyin, sonra internet bağlantısını kesin, çalışmaya devam eder. Bu aynı zamanda hiçbir şeyin yüklenmediğini kanıtlamanın en basit yolu: logonuzu dönüştürülmek üzere uzağa gönderen bir araç, siz fişi çeker çekmez dururdu.
## Gizlilik iddiası nasıl doğrulanabilir
- **Logonuzun gidecek bir yeri yok.** Content-Security-Policy, bu sayfanın iletişim kurabileceği her adresi tek tek sayar ve bunların hiçbiri bu siteye ait değildir. Dosyalarınızın toplanabileceği bir uç nokta burada yok, olsaydı bile onları oraya gönderecek bir kod yok.
- **Burada hiçbir şey bir şey getirmiyor.** `src/` içinde hiçbir yerde `fetch`, `XMLHttpRequest` ya da `sendBeacon` yok. Ölçekleme, bir tuvale yapılan bir `drawImage`'dir; her simge de bu sayfada, o piksellerin önüne `src/ico.js` ya da `src/icns.js` tarafından yazılmış bir başlıktır.
- **Dosya kendi baytlarından tarif ediliyor.** Bitmiş bir simgenin yanında gösterilen boyut listesi, istediğiniz boyutların listesi değildir. Az önce yazılan dosyadan `readIcoDirectory` ya da `readIcnsElements` tarafından geri okunur; yani bir yazıcı ayarlarla çelişseydi sayfa bunu söylerdi, siz Windows hiçbir şey çizmediğinde ve macOS boş bir kâğıt çizdiğinde öğrenmezdiniz.
- **Google neyi yüklüyor, neyi almıyor.** Reklam ve ölçüm betikleri Google'dan, bağış düğmesi de Buy Me a Coffee'den geliyor. Hiçbirine resminiz hakkında bir şey verilmiyor. Bir dosyayı okuyan, ölçekleyen ya da yazan her satır bu kaynaktan sunuluyor ve depoda listeleniyor.
- **Çevrimdışı çalışır.** Ağ bağlantısını kesin, araç hiç değişmez; çünkü içinde en baştan beri bir ağ adımı yoktu. Hepsinin içindeki en basit kanıt bu.
**Kendiniz kontrol edin.** Yukarıdakilerin hiçbirine güvenmeniz gerekmez. Bu sayfa, depodaki şablonlardan ve yapılandırmadan, okuyup kendiniz çalıştırabileceğiniz bir derleme betiği tarafından üretilir ve sonuç `dist` dalına işlenir — yani sunulan şeyi kaynakların bir derlemesinin ürettiğiyle karşılaştırabilirsiniz: https://github.com/A-Box-of-Tools/website
Önce okunmaya değer dosyalar, Content-Security-Policy için `config/site.toml`, iki simge biçimi için `src/ico.js` ve `src/icns.js` — birinde dizin, girdiler ve maske; diğerinde Apple'ın adlandırılmış on yuvası — ve sayfadaki her boyutun nereden geldiği için `src/sizes.js`.
Hiçbir şey yüklemeden nasıl .ico dosyası yapılır
Resmi seçin. Seçiciye bir PNG, JPEG, WebP ya da SVG bırakın veya birkaç tane seçip hepsini tek seferde dönüştürün. Kare olanı en kolayıdır ve 256 pikselden yukarısı her boyut için yeterli ayrıntı taşır. Tarayıcı onu doğrudan diskinizden okur; siz bunu yaparken hiçbir yere hiçbir şey gönderilmez.
İhtiyacınız olan dosyaları seçin. Windows ve bir tarayıcı .ico okur; bir Mac .icns okur ve diğerine hiç bakmaz. Birini işaretleyin ya da yaptığınız şey ikisinde de yayımlanacaksa ikisini birden. Bir web sitesi ayrıca Apple, Android ve kutucuk görsellerini de ister ve üçüncü kutu odur.
Simgenin ne için olduğunu söyleyin. Bir web sitesi faviconu 16, 32 ve 48 pikseldir; bir Windows uygulaması 256'yı da ister; yüksek yoğunluklu bir dizüstünde düzgün görünmesi gereken bir uygulama, Windows'un %125 ve %150 ölçeklemede istediği ara boyutları ister. İşe uyanı seçin ya da boyutları kendiniz işaretleyin. Listedeki her boyut, onu neyin istediğini söyler. .icns'te böyle bir seçim yoktur: Apple tam olarak on yuva belirler ve onu da girer.
Şekli ve arka planı halledin. Bir simge karedir ve çoğu logo değildir. Doldurun; resmin tamamı, üstünde ve altında boşlukla korunur. Kırpın; ortası alınır. Esnetin; ezilir. Arkasına oturacak bir renk seçmediğiniz sürece saydamlık saydamlık olarak korunur.
İndirmeden önce 16 piksellik olana bakın. Simgenin en sık görüleceği boyut odur ve ince çizgilerle küçük harflerin kaybolduğu yer de orasıdır. Ön izlemedeki her kare, sizin dosyanızdan gerçek boyutunda çizilir. En küçüğü bir lekeyse çözüm başka bir ayar değil, daha basit bir çizimdir.
Dosyaları alın. İçinde her boyutu olan tek bir .ico; istediğiniz buysa favicon.ico adıyla, çünkü tarayıcıların aradığı adres odur. İşaretlediyseniz yanında bir .icns; bir Mac uygulama paketine girmeye hazır. Web sitesi setini de işaretleyin; Apple, Android ve Windows kutucuk görsellerini, bildirimi ve sayfanıza yapıştıracağınız HTML bloğunu da alın. Tek dosyadan fazlası tek bir zip olarak iner.
Uzun sürüm
On altı pikselde hâlâ okunan bir favicon nasıl yapılırBir favicon.ico'nun gerçekte hangi boyutlara ihtiyacı olduğu, iPhone'ların, Android'in ve bir Mac'in hangi ek dosyaları istediği ve bir afişte işe yarayan bir logonun on altı pikselde neden kaybolduğu.
Hayır. Resim kendi donanımınızda, kendi tarayıcınız tarafından çözülür ve ölçeklenir; .ico da o piksellerden, bu sayfadan sunulan kodla kurulur. Bu aracın hiçbir türde ağ özelliği yoktur — hiçbir zaman bir şey getirmez ve hiçbir zaman bir şey göndermez — ve sayfanın Content-Security-Policy'si iletişim kurabileceği her adresi tek tek sayar; bunların hiçbiri bu siteye ait değildir.
Bir favicon.ico hangi boyutları içermeli?
16, 32 ve 48. Bu bir tercih değildir: 16, bir tarayıcının bir sekmede çizdiğidir; 32, Windows'un bir masaüstü kısayolu için kullandığı ve birkaç tarayıcının bir yer imi için kullandığıdır; 48 ise Google'ın bir site simgesini okuduğu boyuttur. Daha büyüğü .ico'nun içinde değil yanında bir PNG'de olmalıdır — buradaki web sitesi setinin ürettiği de budur.
Bir Windows uygulama simgesi hangi boyutlara ihtiyaç duyar?
16, 32, 48 ve 256; Visual Studio'nun kendi varsayılan app.ico'sunun tuttuğu da budur. 16 başlık çubuğu ve küçük Explorer görünümü, 32 masaüstü ve görev çubuğu, 48 Explorer'ın orta simgeleri ve 256 başlat menüsü ile çok büyük görünümdür. Yüksek yoğunluklu bir ekranda Windows ayrıca 20, 24, 40, 64 ve 96'yı da ister ve yoklarsa elindeki en yakın boyuttan yeniden örnekler — "her ölçek" hazır ayarı onları da koyar.
Dosya neden başladığım resimden büyük?
Çünkü bir .ico tek bir resim değil birkaç resimdir ve küçük olanlar, her şey okuyabilsin diye sıkıştırılmadan saklanır. 32x32'lik bir girdi içinde ne olursa olsun tam 4.264 bayttır ve sıkıştırılmamış bir 256x256 girdisi 264 KB'dir — 64'ün üstündeki boyutların varsayılan olarak PNG saklanmasının sebebi de budur. "Her boyut için PNG" seçmek var olan en küçük dosyayı yapar; her boyut için sıkıştırılmamışı seçmek ise en uyumlusunu.
PNG ve sıkıştırılmamış girdiler arasındaki fark ne?
Yalnızca piksellerin .ico içinde nasıl saklandığı. Sıkıştırılmamış bir girdi, özgün Windows düzenidir — bir bit eşlem başlığı, baş aşağı pikseller ve bir bitlik bir saydamlık maskesi — ve şimdiye kadar çıkmış her Windows sürümü onu okuyabilir. Bir PNG girdisi ise simgenin içine sıkıştırılmış bütün bir PNG dosyasıdır; büyük boyutlarda üç ila on kat daha küçüktür ama yalnızca Windows Vista'dan itibaren anlaşılır. Varsayılan, her birini kazandığı yerde kullanır: 64 piksele kadar sıkıştırılmamış, üstünde PNG.
256 pikselden büyük bir simge yapabilir mi?
Hayır ve hiçbir şey yapamaz. Biçim her kenarı tek bir baytta saklar ve 0'ın bir karşılığı vardır — 256 demektir. Tavan budur; yani içinde 512 piksellik bir görüntü olan bir .ico daha büyük bir simge değil bozuk bir simgedir. 512 gerekiyorsa bir PNG gerekir ki web sitesi setinin Android ve bir web uygulamasının açılış ekranı için içerdiği de odur.
Saydamlığı koruyor mu?
Evet, her iki girdi türünde de; ayrıca alfa kanalının yanına eski bir bitlik maskeyi de yazar, böylece alfayı okuyamayacak kadar eski yazılımlar siyah bir kutu çizmek yerine simgeyi yine de kesip çıkarır. Bilinçli olarak opak yapılan tek dosya, web sitesi setindeki Apple dokunma simgesidir: iOS onu kendi kutucuğuna yerleştirir ve saydamlığı siyaha çevirir; bu yüzden varsayılan olarak beyaz olan arka plan renginize düzleştirilir.
Logom geniş, kelime biçiminde. Ona ne olur?
Bir şey olmak zorunda, çünkü bir simge karedir. Doldurmak her şeyi korur ve küçültür — 16 piksellik bir kareye doldurulmuş bir kelime logosu yaklaşık üç piksel yüksekliğinde ve okunmazdır. Ortaya kırpmak genellikle daha iyi sonuç verir: neredeyse her markanın faviconu için yaptığı gibi, semboli kompozisyondan çıkarıp onu kullanın. Ön izleme, siz bir şey indirmeden önce hangisinin hayatta kaldığını gösterir.
Web sitesi setinde neler var ve hepsine ihtiyacım var mı?
Yedi PNG, bir web uygulaması bildirimi, bir browserconfig.xml ve yapıştırılacak bir HTML bloğu. Onlara ihtiyacınız var, çünkü bir .ico tarayıcıları ve Windows'u kapsar, başka hiçbir şeyi kapsamaz: bir iPhone ana ekranı kendi adıyla 180 piksellik bir PNG okur, Android ve her kurulum istemi bildirimi okur ve başlat menüsüne sabitlenmiş bir kutucuk XML'i okur. Bunların hiçbiri bir .ico'nun içine bakmaz. Her şey burada, sizin makinenizde üretilir ve zip'in içinde her dosyanın ne işe yaradığını söyleyen bir not vardır.
Bir macOS simgesi de yapabilir mi?
Evet — macOS simgesi'ni işaretleyin; .ico'nun yanında ya da onun yerine bir .icns alın. Aynı fikrin başka bir kabıdır ve iki sistem de diğerininkini okumaz: Windows .ico ister, bir Mac uygulama paketi ise .icns ister. Orada boyutlar bir seçim değildir, çünkü Apple tam olarak on yuva yayımlar — 16, 32, 64, 128, 256, 512 ve 1024 piksel; bunlardan üçü, bir altındaki boyutun Retina sürümü olarak iki kez görünür. Onu da girer; yedi çizimden çıkarılırlar ve bir .icns'in daha büyük dosya olmasının sebebi de budur.
.icns dosyasını nasıl kullanırım?
Bir uygulama için, pakette YourApp.app/Contents/Resources/ içine konur ve Info.plist içinde CFBundleIconFile altında adlandırılır; her Mac paketleme aracının bunun için bir alanı vardır. Başka her şey için dosyayı Finder'da seçin, Command-C'ye basın, sonra değiştirmek istediğiniz klasör ya da disk imajında Get Info açın, sol üstteki küçük simgeye tıklayın ve Command-V'ye basın.
.icns, iconutil'in ürettiğiyle aynı mı?
Aynı dört harfli türlerle aynı on yuva ve her birinde PNG; bir .iconset klasöründen iconutil'in ürettiği de budur. Bilinçli tek fark: Apple'ın aracı ayrıca, ardından gelen türlerin ve uzunlukların bir dizini olan bir TOC öğesi yazar. Bu, biçimin parçası değil bir iyileştirmedir — onsuz bir okuyucu öğeleri baştan sona gezer ve aynı cevaba varır — ve yanlış bir dizin, dizinsizlikten kötüdür; bu yüzden dışarıda bırakılır.
Aynı anda birkaç resmi dönüştürebilir miyim?
Evet. Listedeki her resim aynı ayarlarla kendi .ico'suna dönüşür ve yığın, resim başına bir klasör içeren tek bir zip olarak iner — yoksa ikisinin de adı favicon.ico olur ve biri diğerinin üzerine yazardı. İşaretlediğiniz her çıktı, her resim için üretilir. O resmi ön izlemeye koymak için herhangi bir satıra tıklayın.
Ücretsiz mi, hesap açmam gerekiyor mu?
Ücretsiz; hesap yok, giriş yok, deneme süresi yok, filigran yok. Dosyaların sayısında ya da boyutunda da bir sınır yok, çünkü bunların bedelini ödeyen bir sunucu yok — iş sizin kendi cihazınızda oluyor. Sitede reklam var, masrafı karşılayan da o; reklamlara görselleriniz hakkında hiçbir şey verilmiyor.
Çevrimdışı çalışıyor mu?
Evet. Sayfayı bir kez yükleyin, sonra internet bağlantısını kesin, çalışmaya devam eder. Bu aynı zamanda hiçbir şeyin yüklenmediğini kanıtlamanın en basit yolu: logonuzu dönüştürülmek üzere uzağa gönderen bir araç, siz fişi çeker çekmez dururdu.