Uyarlanabilir bir favicon oluşturma

Bu gönderide, SVG ile uyarlanabilir bir favicon’un nasıl oluşturulacağı üzerine düşüncelerimi paylaşmak istiyorum. deneyin gösteri.

Videoyu tercih ederseniz, işte bu gönderinin bir YouTube versiyonu:

genel bakış #

Bir gelenek favicon bir web projesini cilalamanın harika bir yoludur. Masaüstü tarayıcı sekmelerinde ve ayrıca “sonrası için kaydet” okuyucularında, sitenize bağlanan diğer blog gönderilerinde ve daha fazlasında görüntülenir. Geleneksel olarak bu, .ico dosya türü, ancak son zamanlarda tarayıcılar kullanımına izin verdi SVG, bir vektör formatı. kullanma aşamalı geliştirme iyi desteklenerek hizmet edebilirsin .ico favicons ve bir .svg mümkün ise.

SVG mümkün kalite kaybı olmadan ölçeklendirmek ve küçültmek için ve potansiyel olarak çok küçük olabilirler, ayrıca gömülü CSS’ye, hatta gömülü medya sorgularına sahip olabilirler. Bu, bir okuyucu uygulamasında veya yer imleri çubuklarında bir SVG favicon kullanılıyorsa, SVG içinde sağlanan koyu tercih stilleri nedeniyle kullanıcının temayla ilgili (açık veya koyu) bir simge alma şansı olduğu anlamına gelir. SVG daha sonra yerleşik stilini kullanarak açık ve koyu kullanıcı tercihlerine uyum sağlar.

işaretleme #

SVG işaretlemesi xml kullanarak .svg daha dinamik kod türlerini tutmasına izin veren dosya türü uzantısı.

yaparak başlayın favicon.svg #

adlı yeni bir dosya oluşturun. favicon.svg ve şunları ekleyin:

svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
&LT/svg>

İşte benim SVG dosyam, boyutlandırdım viewBox resmimle ilgili:

svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
&LT/svg>

Şekiller ve yollar ekleme #

Ardından, SVG yol kodunu ekleyin. Genellikle bu, SVG’yi bir kod düzenleyicide açmak anlamına gelir, ancak bu kod genellikle insan dostu değildir. İşte bir SVG’yi dışa aktarma ve optimize etme konusunda size rehberlik eden harika bir rehber tasarım araçlarından.

Bu GUI Yarışması için çizim, onu yapan bir tasarımcıdan geldi. Adobe Illustrator. Büyük ölçüde optimize ettim. geçtim SVGOMG ve ardından işi elle düzenledi.

İşte bir örnek skull benimkinden resim yolu grubu, temizledikten sonra:

svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">





&LT/svg>

İnsan tarafından okunabilir olduğuna dikkat edin Kimlik seçiciler beğenmek #eyes-and-nose Ve sınıflar beğenmek .favicon-stroke. Bunlar, CSS hazırlığındaki el düzenlememden. SVG’nizin uyarlanabilir bir favicon olması için sınıf ve kimlik eklemek gerekli değildir.

Favicon SVG’yi HTML’den bağlayın #

İçinde &LThead> HTML’nizin etiketi, .ico favicon, aşağıdakileri ekleyin:

link rel="icon" href="/favicon.ico" sizes="any">

Yeni simge şuna benzer görünebileceğinden .ico sürümünün kullanıldığını doğrulayın. DevTools’un Ağ panelini açın. Resimlere göre filtreleyin ve favicon arayın:

stiller #

HTML gibi, bir &LTstyle> bu belge kapsamına göre kullanmak için işaretlemeye etiketleyin:

svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
style>

&LT/style>
  …
&LT/svg>

Hafif tema sürümü, favicon SVG’min varsayılan rengi olacaktır. Bunun için yazdığım stiller çoğunlukla kontur ve dolgu renkleriydi:

svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
style>







&LT/style>
  …
&LT/svg>

Sırada, en eğlenceli kısım, favicon’unuzun karanlık tema versiyonunu tasarlamak. Bunun için stiller, stil etiketi içindeki bir medya sorgusuna girecektir:

svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
style>
    …



&LT/style>
  …
&LT/svg>

benimki şöyle bitti:

svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
style>
    …






&LT/style>
  …
&LT/svg>

Parlak mor kenarlıkları güzel, soğuk bir koyu gri (#343a40), kafatası kemiği rengini beyazdan açık soğuk griye (#adb5bd), ama pembe vurgulu şapkayı bıraktı.

Çözüm #

Artık nasıl yaptığımı bildiğine göre, nasıl yapardın‽ 🙂

Yaklaşımlarımızı çeşitlendirelim ve web üzerinde oluşturmanın tüm yollarını öğrenelim. Bir demo oluşturun, beni tweetle bağlantılar ve onu aşağıdaki topluluk remiksleri bölümüne ekleyeceğim!

Topluluk remiksleri #