SVG'den Favicon Oluşturucu

Bir adet SVG logosu yükleyin ve modern bir web sitesinin ihtiyaç duyduğu her şeye sahip olun: uygun bir çoklu çözünürlüklü favicon.ico dosyası, tarayıcıların ve akıllı telefonların gerçekten talep ettiği her boyutta PNG simgeleri ve <head> dosyanıza yapıştırabileceğiniz HTML <link> etiketleri. Tüm görüntüleme işlemi tarayıcınızda gerçekleşir — SVG dosyası cihazınızdan asla dışarı çıkmaz.

Bu Araç Nedir?

Favicon.ico dosyası sadece küçük bir resim değildir — aynı simgenin çeşitli boyutlarını tek bir dosyada barındırabilen bir kapsayıcı biçimidir; böylece tarayıcı, görev çubuğu veya yer imleri çubuğu, simgeyi göstereceği alana en net görünecek çözünürlüğü seçebilir. Bir PNG dosyasını favicon.ico olarak yeniden adlandırmak bu sonucu vermez: bu, yanlış dosya uzantısına sahip tek bir görüntüdür ve bazı tarayıcılar bunu tolere etse de, ham baytları okuyan birçok araç, tarayıcı ve eski tarayıcılar gerçek ICO konteyner yapısını bekler ve hata verir ya da boş bir simgeye geri döner.

Bu araç gerçek bir ICO dosyası oluşturur: SVG dosyanızı 16×16, 32×32 ve 48×48 boyutlarında işler, her birini dahili olarak PNG olarak kodlar ve Windows Vista'dan beri tüm tarayıcılar ve işletim sistemleri tarafından desteklenen aynı PNG-in-ICO formatını kullanarak bu üçünü tek bir geçerli favicon.ico dosyasına paketler. Bunun yanı sıra, 180×180 boyutunda (birisi sitenizi ana ekranına eklediğinde iOS'un simge için kullandığı boyut) ve 192×192 / 512×512 boyutlarında (Android ve PWA yükleme uyarılarının web uygulaması manifestosundan aldığı boyutlar) ayrı PNG dosyaları da elde edersiniz.

Neden Kullanmalısınız?

Adı değiştirilmiş bir PNG dosyası değil, gerçekten geçerli bir çoklu çözünürlüklü favicon.ico dosyası oluşturur.
Gerçek bir dağıtımda ihtiyaç duyulan tüm simge boyutlarını tek seferde karşılar: 16, 32, 180, 192, 512 piksel.
Yapıştırmaya hazır <head> HTML — rel/sizes/type öznitelikleri konusunda tahminde bulunmaya gerek yok.
Kare olmayan SVG’ler, uzatılmak yerine şeffaf bir kare üzerinde ortalanır.
Her şey tarayıcınızda yerel olarak görüntülenir; SVG dosyası hiçbir zaman yüklenmez.

Nasıl Kullanılır

Kutucuğa tıklayın veya SVG logo dosyanızı buraya sürükleyip bırakın.
Bu araç, favicon’u her boyutta otomatik olarak oluşturur — ayarlamanız gereken hiçbir şey yoktur.
Sitenizin kök dizinine favicon.ico dosyasını ve ayrıca tek tek PNG simgelerini indirin.
HTML kod parçasını kopyalayın ve sayfanızın <head> etiketinin içine yapıştırın.

Örnek

Giriş

logo.svg — a company mark, 3 KB vector

Çıkış

favicon.ico (16/32/48px combined), plus favicon-16.png, favicon-32.png, apple-touch-icon.png (180px), icon-192.png, icon-512.png

Tek bir SVG dosyası ile, gerçek bir dağıtım için gerekli olan tüm simge dosyaları elde edilir.

Hangi simge boyutu nerede kullanılır?

Dosya	Boyut	Şu amaçlarla kullanılır:
favicon.ico	16/32/48 piksel (toplam)	Tarayıcı sekmesi, yer imleri çubuğu, görev çubuğu
favicon-16.png / favicon-32.png	16×16 / 32×32	PNG favikonlarını tercih eden tarayıcılar için yedek çözüm
apple-touch-icon.png	180×180	Site Ana Ekrana eklendiğinde iOS ana ekran simgesi
icon-192.png	192×192	Android ana ekran simgesi, web uygulaması manifest dosyası
icon-512.png	512×512	PWA yükleme uyarısı, Android açılış ekranı simgesi

SVG kaynağı neden önemlidir?

SVG, şekilleri pikseller yerine matematiksel veriler olarak sakladığından, hem 16 piksel hem de 512 piksel boyutunda yeniden oluşturma işlemi tam olarak aynı yol verilerinden başlar — büyük boyutta büyütme kaynaklı bozulma olmaz ve küçük boyutta da aracın uzlaşmak zorunda kalacağı zorla piksel hizalama tahminleri söz konusu değildir. Elinizde yalnızca bir PNG logosu varsa, bu araç size yardımcı olamaz; logoyu önce SVG formatına dönüştürün veya yeniden oluşturun, çünkü küçük bir PNG dosyasını 512 piksel boyutuna büyütmek sadece bulanık bir sonuç verecektir.

→ SVG Dönüştürücü

Sıkça Sorulan Sorular

Neden bir PNG dosyasının adını favicon.ico olarak değiştirmiyoruz?

Bir .ico dosyası kendine özgü bir ikili kapsayıcı biçimine sahiptir (içinde kaç adet resim bulunduğunu belirten bir ICONDIR başlığı ve bunu takip eden her resim için bir dizin girdisi) — .ico olarak yeniden adlandırılmış bir PNG dosyası, içindeki uzantısı yanlış olan sıradan bir PNG dosyasından ibarettir. Çoğu modern tarayıcı bu durumu hoş görür ve dosyayı yine de görüntüler, ancak bu araç, formatın tasarlandığı amaç doğrultusunda ve daha katı okuyucuların beklediği şekilde, üç farklı çözünürlük içeren gerçek bir ICO kapsayıcısı oluşturur.

Zaten favicon.ico dosyam varken neden PNG simgelerine ihtiyacım olsun ki?

favicon.ico dosyası yalnızca klasik tarayıcı sekmesi/yer imi kullanım durumunu kapsar. 180×180 boyutundaki PNG dosyası, bir kullanıcı sitenizi ana ekranına eklediğinde iOS tarafından kullanılır (apple-touch-icon); 192×192 ve 512×512 boyutundaki PNG dosyaları ise Android ve PWA yükleme istemleri tarafından web uygulamanızın manifest dosyasından alınır. Bunlar olmadan, telefonun ana ekranındaki simgeniz genel bir ekran görüntüsüne veya boş bir kareye dönüşür.

Logom kare şeklinde değil — bu durumda ne olacak?

Her hedef boyutta, logo uzatılmak yerine şeffaf bir karenin ortasına yerleştirilir; böylece geniş veya uzun bir logo, bir kareye sıkıştırılmak yerine doğru oranlarını korur.

İndirdiğim dosyaları nereye koymalıyım?

favicon.ico, apple-touch-icon.png, icon-192.png ve icon-512.png dosyalarını sitenizin kök klasörüne (index.html dosyasının yanına) yerleştirin, ardından oluşturulan <link> etiketlerini sayfanızın <head> etiketleri arasına yapıştırın.

SVG dosyam herhangi bir yere yüklendi mi?

Hayır. SVG, yerel <canvas> öğeleri üzerine işlenir ve ICO/PNG dosyaları tarayıcınızda birleştirilir. Sunucuya hiçbir şey gönderilmez.