Emoji ve renklerle HTML favicon kodu oluşturma

Favicon için hangi çıktıyı hazırlayabilirsiniz?

Favicon, tarayıcı sekmesinde veya yer imlerinde siteyle ilişkilendirilen küçük simgedir. Favicon Generator, seçtiğiniz emojiyi ve renkleri kullanarak bir SVG favicon tanımı hazırlar; bunun yanında HTML içine yerleştirilebilen favicon işaretlemesi de üretir. Böylece dosya hazırlamak yerine, elde ettiğiniz işaretlemeyi sitenizin uygun HTML bölümünde değerlendirebilirsiniz.

Araçta üç görsel tercih öne çıkar: SVG içinde metin olarak kullanılacak emoji, arka plan rengi ve metin rengi. İsteğe bağlı simge URL'si de HTML bağlantılarına eklenebilir. Bu alan, adresi bir görsele dönüştürme seçeneği olarak değil, oluşturulan HTML'de kullanılacak bir değer olarak düşünülmelidir. Site başlığı alanı görünüyorsa, bu alanın favicon içeriğini değiştirmediğini bilmek de gereksiz denemeleri önler.

SVG ve HTML favicon işaretlemesi oluşturma adımları

Favicon Generator aracını açın ve SVG içinde görünmesini istediğiniz emojiyi ilgili alana yazın. Alanı boş bırakırsanız araç, SVG içindeki metin için varsayılan anahtar emojisini kullanır. Kullanacağınız karakterin görünümünü, sitenizin görsel diliyle birlikte değerlendirin.
Arka plan rengini ve metin rengini belirleyin. Bu alanları boş bıraktığınızda arka plan için #2563eb, metin için #ffffff kullanılır. Kendi renklerinizi girerseniz bu değerler SVG içinde kullanılır; renk sözdiziminin ayrıca doğrulandığı kabul edilmemelidir.
HTML'de ayrıca simge bağlantısı göstermek istiyorsanız, isteğe bağlı simge URL'si alanına değeri girin. Alan dolu olduğunda adres, oluşturulan HTML'deki iki simge bağlantısında kullanılır ve HTML'e uygun biçimde kaçışlanır. Bu işlem adresin indirilmesini, kontrol edilmesini veya bir resme çevrilmesini ifade etmez.
Site başlığı alanı sunuluyorsa, bunu yalnızca arayüzdeki giriş olarak değerlendirin. Varsayılan değer My Site olabilir; ancak bu değer oluşturulan işaretlemeye aktarılmaz. Favicon görünümünü değiştirmek için başlık yerine emoji ile renk alanlarını düzenleyin.
Oluşturma kontrolünü seçin ve dönen materyali inceleyin. Başarılı oluşturma yolunda sonuçta favicon için SVG işaretlemesi ile HTML favicon işaretlemesi bulunur. İhtiyacınıza göre SVG tanımını doğrudan kullanabilir veya HTML bölümündeki bağlantı işaretlemesini sitenizin ilgili yerine aktarabilirsiniz. Aktarım yapmadan önce işaretlemenin hangi bölümünü kullanacağınızı belirleyin; iki çıktı aynı kullanım biçimini temsil etmez.
Simge URL'si eklediyseniz, sonuçtaki iki HTML bağlantısında beklediğiniz adresin yer aldığını kontrol edin. URL alanını boş bıraktığınız senaryoda ise SVG veri URI'si içeren favicon bağlantısını ve ayrı SVG işaretlemesini inceleyin. Böylece URL bağlantısı ile SVG tabanlı çıktıyı birbirine karıştırmadan seçim yapabilirsiniz.

Üretilen işaretlemeyi değerlendirirken nelere bakmalı?

Sonucu incelerken iki farklı malzeme arayın: faviconun SVG tanımı ve bu tanımı sayfaya bağlayan HTML işaretlemesi. HTML çıktısında SVG veri URI'si kullanan bir favicon bağlantısı yer alır; ayrıca araç SVG işaretlemesini de sağlar. Bu ayrım, yalnızca bağlantı satırına mı yoksa SVG içeriğine mi ihtiyaç duyduğunuzu anlamanıza yardımcı olur.

SVG içindeki metin, girişte verdiğiniz emojidir. Emoji alanı boş bırakıldıysa anahtar emojisi kullanılır. Benzer şekilde, seçtiğiniz arka plan ve metin renkleri SVG'ye aktarılır; alanların boş olması durumunda varsayılan mavi ve beyaz değerler devreye girer. Sonucu değerlendirirken renklerin ve emojinin beklediğiniz görsel karşılığı üretmesini ayrıca kontrol edin, çünkü araç bu değerlerin sözdizimini doğrulayan bir işlem olarak tanımlanmamıştır.

Dolu bir simge URL'si, HTML içindeki iki simge bağlantısında görülen adresi etkiler. Bu davranış, URL'nin hedefindeki içeriğin alındığını veya favicon dosyasına dönüştürüldüğünü göstermez. Site başlığı değişse bile çıktıdaki favicon materyalinin değişmemesi beklenir; başlık girdisi oluşturulan işaretlemede kullanılmaz.

Bu araçtan beklenen çıktı SVG ve HTML favicon işaretlemesidir. Raster favicon dosyaları ya da başka görsel biçimleri sunduğu sonucuna varmayın. Ayrıca emoji ve renk girdilerinin geçerli olup olmadığını sizin kullanım bağlamınızda gözden geçirmeniz gerekir. İşaretlemeyi yerleştirdiğinizde tarayıcıdaki görünüm, kullandığınız HTML bağlamı ve seçtiğiniz girdilerle birlikte değerlendirilmelidir.

Uygulamalı örnek

Kişisel bir tarif sitesinin sekmesinde kahve emojili ve yeşil arka planlı bir favicon göstermek istiyorsunuz.

Kahve emojisini seçin, arka plan rengini #166534, metin rengini #ffffff yapın, simge URL'si alanını boş bırakın ve oluşturma kontrolünü seçin.

Başarılı sonuçta yeşil arka plan, beyaz metin ve seçilen emojiyle bir SVG favicon tanımı ile SVG veri URI'si içeren HTML favicon işaretlemesi yer alır.

Sınırlamalar

Kapsam SVG ve HTML favicon işaretlemesiyle sınırlıdır; raster favicon dosyaları veya başka görsel biçimleri sunduğu belirtilmez. Emoji ve renk sözdiziminin doğrulandığı da kabul edilmemelidir.

Sık yapılan hatalar

Başlık alanını değiştirip favicon görünümünün yenilenmesini beklemek yanlış yönlendirebilir. Görsel değişiklik için emojiyi veya arka plan ile metin renklerini düzenleyin; başlık değeri oluşturulan işaretlemede kullanılmaz.

Sık sorulan sorular

Emoji girmezsem ne olur?

Alan boş bırakıldığında araç, SVG içinde metin olarak varsayılan anahtar emojisini kullanır. Başka bir sembol istiyorsanız emoji alanına seçtiğiniz karakteri girin.

Bir simge URL'si ekleyebilir miyim?

Alan dolu olduğunda simge URL'si oluşturulan HTML'deki iki simge bağlantısında kullanılır. Adresin bir görsele dönüştürüldüğü veya indirildiği sonucu çıkarılamaz.

Site başlığı favicon'u değiştirir mi?

Başlık girdisi işaretlemede kullanılmadığı için favicon değişmez. Görünümü etkilemek üzere emoji, arka plan rengi veya metin rengi alanlarını değiştirin.