Çevrimiçi bir favicon oluşturun. Favicon oluşturmanın evrensel yolu
Ayrıca oku
Herkese selam!
Bu yazımda sizlere siteye favicon nasıl yüklenir onu anlatacağım. Bu, sitenin kök dizini kullanılarak veya şablonun işlevselliği kullanılarak yapılabilir. Tüm seçenekleri analiz edeceğiz ve belirli bir durum için hangisinin en iyi olacağını belirleyeceğiz.
Ama ondan önce, aynı favicon'un nasıl çizilebileceğinden bahsedeceğiz. Ardından, logonun hangi boyutta olması gerektiğini anlayacağız, sonunda oluşturulan simgeyi siteye nasıl ekleyeceğinizi anlatacağım.
Bir favicon, 16 x 16 boyutunda bir web sitesi simgesidir (veya 32 x 32, ancak daha fazla değil). Bir tarayıcı sekmesinde görüntülenir. Şuna benziyor:
Ayrıca, simge arama sonuçlarında görüntülenir ve sitenizin kendi favicon'u yoksa, kullanıcıların buna dikkat etmesi pek olası değildir. Özellikle her küçük şeyi gerçekten takdir eden daha deneyimli olanlar.
Yandex Webmaster'da bir favicon'un olmaması, acilen düzeltilmesi gereken bir hata olarak sınıflandırılır. Bunun nedeni sadece arama motorundaki kişilerin ikonsuz bir siteye güvenememeleri değil, aynı zamanda belirli arama algoritmalarına da sahip olmalarıdır. Robotlar bunu görüyor teknik eksiklikler ve çoğu zaman sorundaki kaynağı azaltır. Tüm SEO promosyonlarını etkileyebilecek üzücü bir fenomen.
Biraz özetleyelim:
- Favicon etkileri davranışsal faktörler ve arama sonuçlarında tıklanabilirlik.
- Arama robotları, bir favicon'un varlığını veya yokluğunu da hesaba katabilir.
- Böyle bir teknik kusur, trafikte düşüşe neden olabilir.
Başka bir deyişle, herhangi bir sorunuz varsa: bir favicon ekleyin veya eklemeyin, o zaman cevap açıktır - eklediğinizden emin olun.
Şimdi bu simgeyi nasıl çizeceğimizi bulalım. Bu, çeşitli çevrimiçi hizmetler, editörler kullanılarak yapılabilir.
Bitmiş sürümü nereden indirebilirim?
uzakta en iyi seçim ama birileri kullanıyor. İnternetten hazır bir favicon indirebilir ve özellikle kendinizinkini yaratma zahmetine girmeyebilirsiniz. Hepsi uygun formatlarda ve doğru boyutlarda sunulur.
"Hazır favicon'u indir" gibi bir arama motoruna istediğiniz sorguyu girmeniz yeterlidir, ardından size çok sayıda farklı varyasyon sunulacaktır.
Resmi PC'nize indirin ve ardından siteye yükleyin. Her şey basit. Tamamen ücretsizdirler, kimse sizi azarlamaz. rağmen Konuşuyoruz bir şirket hakkında, hatta küçük bir şirket hakkında, o zaman başka birinin logosu bulunduğunda hoş olmayan olaylar ortaya çıkabilir.
Hazır seçenekler çeşitli sitelerde aranabilir. Kural olarak, bazı web yöneticilerinin beğenebileceği çeşitli tematik logo koleksiyonları vardır.
Ancak, kendi başınıza bir favicon oluşturmanın daha iyi olacağını bir kez daha tekrarlayacağım.
Site simgesi oluştur
Çevrimiçi hizmetler
Çevrimiçi hizmetlerde bir favicon çizebilirsiniz. Arama motoruna uygun sorguyu girmeniz yeterlidir, ardından planınızı gerçekleştirmenize yardımcı olabilecek tüm siteler listesi dikkatinize sunulur.
Bu kurs, yetkin yaratıcılığın en önemli özelliklerini kapsayacaktır. bilgi projeleri, ekiple etkileşim ve işinizi geliştirirken kesinlikle ihtiyaç duyacağınız diğer yararlı yönler.
bugün istiyorum siteniz için bir favicon oluşturmaya yönelik hizmetleri size tanıtmak. Favicon, İngilizce favori ve simge kelimelerinin kısaltmalarıdır. Bu, ico uzantılı favicon adı verilen 16 x 16 piksellik bir görüntüdür. O yerleştirilir kök klasör web siteniz barındırılıyor. Bir siteyi yüklerken, tarayıcı otomatik olarak bu dosyayı arar, ardından onu sayfa URL'sinden ve yer imlerinden önce adres çubuğuna ekleyerek sitenize atar. Web sitesinin simgesi herhangi bir pratik kullanım taşımaz ve yalnızca onu tanımaya yarar.
Artık, kaynağının benzersizliği ve orijinalliği hakkında en azından bir şekilde düşünen herhangi bir web tasarımcısı, bunun için özel bir simge yapmakla yükümlüdür. Adres çubuğundaki herhangi bir tarayıcıda, sitenizin adı ve simgesi modern ve alakalı görünecektir. Ayrıca, benzer sitelerin kütlesinden sıyrılmasını sağlayacak olan yer imlerinde ve Sık Kullanılanlarda da fark edilecektir. Kaynağınızın konusuna göre bir simge seçebilirsiniz ve onu incelemeye bile başlamadan, ziyaretçi onun neden bahsettiğini hemen anlayabilir. Bu da sitenin tanınırlığına ve bir marka olarak oluşmasına iyi bir etki yapacaktır.
Varsayılan olarak, bir web sitesi geçerli tarayıcıda kendisi için sağlanan simgeyi görüntüler. Aynı şekilde, çoğu sürüm modern tarayıcılar kişisel web sitesi favicons desteği. Ve arama motoru Artık Google ile birlikte Rusça konuşulan alana hakim olan Yandex, arama sorgusu, sıralama siteleri simgeleriyle birlikte görünür. Bu nedenle, gecikmeden, oluşumuna çok dikkat etmek zorunludur.
İnternette zaten depolayan birçok kaynak var. hazır simgeler. Birçoğu var, ancak şimdi bir favicon oluşturmakla ilgileniyoruz.
Bir web sitesi için bir favicon oluşturmanız mı gerekiyor? Çevrimiçi bir favicon oluşturmak için hizmetleri düşünün
Site için simgeler oluşturmak için en popüler hizmet. İçinde çalışmak oldukça basittir ve acemi bir kullanıcı bile halledebilir. Site ikonu olarak kullanılmasını istediğimiz bir görseli yüklüyoruz. Onu işler. Ortaya çıkan resme bakıyoruz ve bize uygunsa İndir'i tıklayın. Dosya otomatik olarak isimle kaydedilir. Kendiniz piksel piksel çizebilir ve isterseniz onu bir simge olarak da kaydedebilirsiniz. Favicon oluşturmak için basit bir modelin kullanılması önemlidir. Çok renkli çok şey varsa, o zaman sıradan olmayan bir nokta ortaya çıkacaktır.
Kullanımı bir o kadar kolay olan bir sonraki hizmet . İçinde çalışmak yaklaşık olarak önceki analoğa benzer. Tek şey, İngilizce olması ve daha fazla reklam olması. Ancak genel olarak, üretim eylemleri oldukça benzerdir. Bir resim yükleyin, izleyin, düzenleyin ve kaydedin.
Artık web sitesi tanıtım hizmetleri sağlayan veya bunlarla ilgili analiz toplayan hemen hemen her kaynak, ek seçenek favicons oluşturmak için. Örneğin, bu ek seçeneğe de sahip olan iyi bilinen hizmetler:
Ancak özellikle yaratım için uyarlanmış hizmetleri seviyorum. İşte bak, başka bir şirin çevrimiçi araççeşitli boyut ve biçimlerde simgeler oluşturmak için. Mütevazı ve zevkli. Dosyamızı yükledik. Bir beden seçin. Önizleyin ve bilgisayarınıza kaydedin.
Simgeler oluşturmak için herkesin favori Photoshop'unu kullanmak elbette mümkün olacaktır. Ancak ico uzantılı resimleri kaydetmez. Bunun yerine kaydeder, ancak bunun için özel bir eklenti paketini açmanız gerekir - icoformat.8bi, onu Photoshop klasöründeki Plug-Ins\File Formats klasörüne kurun. Bu, dosyaları istediğimiz uzantıyla kaydedecektir. Benim için oldukça zahmetli.
Bu seçeneği sunuyorum. Photoshop'ta, bir simge olarak görmek istediğimiz bir resim oluşturuyoruz, herhangi bir uzantıyla kaydediyoruz ve .
Ayrıca kullanabilirsin çevrimiçi dönüştürücüler bir biçimden diğerine grafikler. Örneğin burada veya . Onlarla herhangi bir uzantıyı değiştirebilirsiniz. grafik dosyası ico'da.
Simge site için bir favicon haline nasıl getirilir?
Aşağıdaki adımlar gereklidir:
1 Dosyanın adlandırıldığından emin olun.
2 Filezilla kullanarak sitemizin kök klasörüne yerleştiriyoruz. Teorik olarak, bu eylemler yeterlidir ve tarayıcı, nerede bulunduğunu otomatik olarak belirleyecektir. Ama biz güvenli oynuyoruz ve bu dosyanın yolunu html koduyla yazıyoruz.
3 Bunun için temamızın header.php dosyasını alın (doğrudan WordPress'te yönetici panelinde düzenleyebilir veya sunucudan indirebilirsiniz), açın ve kapanış etiketinden önce yazın aşağıdaki kod:
/favicon.ico"/>
/favicon.ico"/> |
4 Dosyayı kaydedin ve barındırmaya geri aktarın.
5 Geçerli tarayıcının önbelleğini temizliyoruz ve bu kadar. İstenilen sonucu aldık.
Bu arada, favicon'un kökte yer alması gerekli değildir. Href özniteliği doğrudan ona giden yolu belirtir. Şöyle çıkıyor:
|
|
Simgenin bir ico uzantısına sahip olması da gerekli değildir. Ayrıca png ve gif uzantılarını da kullanabilirsiniz. Bunu yapmak için kod, çıktı dosyasının türünü değiştirir.
Yani, image/x-icon olan type'ı image/png veya gif olarak değiştiriyoruz.
Bu arada, bir şey daha ekleyebilirsiniz. Site için bir favicon oluşturup yükledik ve WordPress yönetici panelinde standart favicon varsayılan olarak kaldı. Genel olarak her yerde değişebilmesi için temamızın function.php dosyasına aşağıdaki php kodunu eklemeniz gerekmektedir:
işlev sp_set_favicon() ( yankı " "; ) add_action("admin_head", "sp_set_favicon"); add_action("login_head", "sp_set_favicon"); add_action("wp_head", "sp_set_favicon");
işlev sp_set_favicon() ( Eko ".get_bloginfo("template_url") /> " ; add_action("admin_head", "sp_set_favicon" ) ; add_action("login_head" , "sp_set_favicon" ) ; add_action("wp_head", "sp_set_favicon" ) ; |
Şimdi tüm başlıklara yansıtılacak.
Bu konuda, genel olarak ve hepsi. Bugün bir site için neden favicon oluşturmanız gerektiğini tartıştık ve bir site için favicon oluşturmak için çevrimiçi hizmetleri ve onu kurmanın inceliklerini inceledik. Blog güncellemelerine abone olmayı unutmayın. Yakında görüşürüz!
Bir favicon.ico'nun nasıl oluşturulacağına ve barındırılacağına ilişkin videoyu izleyin:
Artık kişisel site simgesi - Favicon - herhangi bir web kaynağının bir tür kartvizitidir. Böyle bir simge, istenen portalı yalnızca tarayıcı sekmeleri listesinde değil, aynı zamanda örneğin Yandex arama sonuçlarında da vurgular. Kural olarak, Favicon, sitenin tanınırlığını arttırmanın yanı sıra başka herhangi bir işlev gerçekleştirmez.
Kendi kaynağınız için bir simge oluşturmak oldukça basittir: uygun bir resim bulursunuz veya bir grafik düzenleyici kullanarak kendiniz çizersiniz ve ardından resmi istediğiniz boyuta - genellikle 16x16 piksel - sıkıştırırsınız. Sonuç favicon.ico dosyasına kaydedilir ve sitenin kök klasörüne yerleştirilir. Ancak bu prosedür bile, web'de bulunan Favicon oluşturucularından birinin yardımıyla büyük ölçüde basitleştirilebilir.
Çoğu web simgesi düzenleyicisi, site simgesi simgeleri oluşturmak için ihtiyacınız olan tüm araçları sunar. Bu durumda sıfırdan bir resim çizmek gerekli değildir - hazır bir resim kullanabilirsiniz.
Yöntem 1: Favicon.by
Rusça çevrimiçi favicon oluşturucu: basit ve görsel. Yerleşik 16x16 tuvali ve kurşun kalem, silgi, damlalık ve dolgu gibi minimum araç listesini kullanarak kendi kendinize bir simge çizmenize olanak tanır. Tüm RGB renklerine ve şeffaflık desteğine sahip bir palet var.
Dilerseniz, bitmiş bir görüntüyü bir bilgisayardan veya üçüncü taraf bir web kaynağından oluşturucuya yükleyebilirsiniz. İçe aktarılan resim de tuval üzerine yerleştirilecek ve düzenlenebilir hale gelecektir.
Sonuç olarak, favicon adlı ve 16x16 piksel çözünürlüğe sahip bir grafik ICO dosyası elde edersiniz. Bu simge artık web sitenizin simgesi olarak kullanılmaya hazır.
Yöntem 2: X Simge Düzenleyici
64x64 piksele kadar ayrıntılı simgeler oluşturmanıza olanak sağlayan bir HTML5 tarayıcı uygulaması. Önceki hizmetin aksine, X-Icon Editor daha fazla çizim aracına sahiptir ve bunların her biri esnek bir şekilde yapılandırılabilir.
Favicon.by'de olduğu gibi, burada da bitmiş görüntüyü siteye yükleyebilir ve gerekirse uygun şekilde düzenleyerek bir favicon'a dönüştürebilirsiniz.
Bir favicon'a dönüştürmeyi düşündüğünüz bir görüntünün ayrıntılarını korumak istiyorsanız, X-Icon Editor bunun için harikadır. Bu hizmetin ana avantajı, 64×64 piksel çözünürlüğe sahip simgeler oluşturma yeteneğidir.
Favicon (eng. Favori Simgesi), sitede gezinirken tarayıcının adres çubuğunda, tarayıcı sekmesinde veya yer imlerinde ("Sık Kullanılanlar") görüntülenen özel bir biçimde küçük bir simgedir (resim, resim).
favicon, siteniz için ek bir dekorasyon, mini logonuzdur. Ayrıca, Yandex, Google aramasında sitelerin listesini görüntülerken de gösterilir ve sitenizi diğerlerinden vurgular.
Bir web sitesi için neden bir favicon'a ihtiyacınız var?
favicon, sitenizin ticari markasıdır. Bugün birçok şirket, onları rakiplerinden ayıran ayırt edici bir favicon simgesine sahiptir. Simgenin kullanıcılar tarafından daha iyi hatırlanması için, şirketlerin logolarını da içinde göstermesi gerekir ki bu da site başlığının unsurlarından biridir. Favicon kullanmanın bir diğer olumlu özelliği de tarayıcıda çok sayıda siteyi görüntülerken sayfaların tam başlığını değil sadece ikonunu görmeniz ve gitmek istediğiniz sekmeyi hemen kolayca belirleyebilmenizdir.
Bir favicon üzerinde tasvir etmek için daha iyi olan nedir?
- Simge, sitenin temasıyla eşleşmelidir.
- marka, siteniz bu markayla ilişkiliyse. Aynı zamanda farklı sayfalar için farklı markalar görüntülenebilir;
- Tıklamak istediğiniz bir favicon kullanın, bu, Yandex'de, Google aramada görüntülendiğinde tıklanabilirliği artıracaktır;
- Web sitenizin farklı bölümleri için birkaç favicon tasarımı yapın.
- Farklı etkinlikler (örn. Yeni Yıl, Sevgililer Günü veya Kozmonotluk Günü, :) için bazı favicon tasarımları yapın.
Hareketli bir favicon nasıl yapılır?
ICO formatı animasyonu desteklemez. Ancak modern tarayıcılar, küçük resimler için GIF biçimini kullanmanıza izin verir. Modern tarayıcılar (favicon.gif) için bir animasyon dosyası ve Intertet Explorer gibi eski tarayıcılar için başka bir dosya (favicon.ico) belirtmek mümkündür. Bunu yapmak için, baş bölümünde aşağıdaki iki satırı ekleyin:
Doğal olarak, önce her iki dosyayı da sitenin kök klasörüne yerleştirmeniz gerekir.
Tarayıcıda resimlerin görüntülenmesi yasaksa ne olur?
Sayfa koduna katıştırılmış bir resim içeren bir favicon yaparsanız:
Bu simge, resimler devre dışı bırakıldığında bile tarayıcıda gösterilecektir. .
Bir web sitesinden favicon nasıl alınır?
Tüm web yöneticileri favicon.ico'yu sitenin köküne yerleştirmez. Favicon'un adresini almak için aşağıdaki betiği kullanın:
]*)link([^>]*)(rel="icon"|rel="kısayol simgesi")([^>]*)>/iU", $html, $out)) ( $link_tag = $out; if (preg_match("/href([s]*)=([s]*)"([^"]*)"/iU", $link_tag, $out)) ( $favicon = trim($out); if (strpos($favicon, ") ://")===false) $favicon = $url. "/" .ltrim($favicon, "/"); ) ) ?>
Arama motorları Google, Yandex ve favicon
Arama motoru robotları site simgelerini önbelleğe alır. Önbelleğe alınan simgeler aşağıdaki istekler için kullanılabilir:
Ek olarak, Yandex sizi farklı sitelerden simgelerden oluşan bir "sprite" yapabilir:
iPhone ve iPad için Simgeler
Resme bir bağlantı belirtmeseniz bile, iphone yine de sitenin kök klasöründe apple-touch-icon.png adlı bir dosyayı arayacak ve bulursa ondan bir resim çekecek, köşelerinde yuvarlatacak ve ona cihazın kendisi tarafından otomatik olarak bir parlama uygulanacaktır. Bunu önlemek için apple-touch-icon.png yerine apple-touch-icon-precomposed.png yazmanız gerekir iPhone sahipleri ve puanları çünkü. onlar için 57x57 boyutunda güzel bir simge yapıyoruz (bu arada, daha büyük olabilir, ancak bu, öğle yemeği ekranındaki simgenin standart boyutudur), onu şu şekilde bağlarız:
Favicon dinamik olarak nasıl değiştirilir?
DOM aracılığıyla bir etiket özelliğinin değerini değiştirmeye çalışırsanız, istediğiniz sonucu alamazsınız. Sayfa simgesini dinamik olarak değiştirmek için, önce eski simgeye sahip bağlantı etiketini sayfa başlığından kaldırmanız ve ardından yeni içerikle eklemeniz gerekir. Şu şekilde yapılır: // Yeni simge dosyasına bağlantı var icon="new_favicon.ico"; var kafa = document.getElementsByTagName("kafa"); // HEAD etiketinden eski simgeyi bulun ve kaldırın var links = head.getElementsByTagName("link"); için (var ben = 0; ben< links.length; i++) { var lnk = links[i]; if (lnk.rel=="shortcut icon") { head.removeChild(lnk); } } // Добавить новую иконку var link = document.createElement("link"); link.setAttribute("href",icon); link.setAttribute("type","image/x-icon"); link.setAttribute("rel","shortcut icon"); head.appendChild(link);HTML5 ve site simgesi
HTML5, aynı simgenin birden çok farklı sürümünün bildirilmesine izin vermek için boyutlar özniteliğini ekledi ve bunlar PNG dosyaları olabilir:
Windows 8'de tabletler için bir kutucuk nasıl bildirilir?
Windows 8.0 duyurusu şuna benzer:
Windows 8.1 ve IE 11, browserconfig.xml'de bildirilen görüntünün birden çok sürümünü bekler. Örneğin:
Dosya adı değiştirilmediyse beyan etmemek mümkündür:
Bugün çok ilginç bir konuya değineceğiz. Sitenizde çalışırken er ya da geç bir favicon oluşturmanız gerekecek. Basit bir ifadeyle, site simgesi, siteniz için tarayıcınızdaki bir sekmede görünen bir simgedir. Ayrıca, sitenizin "Favoriler"e eklenip eklenmediği tarayıcının hızlı erişim alanında da görülebilir.
En popüler sitelerin favicon'ları
Favicon'un kaliteli olması gerektiğini söylemenin bir anlamı olmadığını düşünüyorum çünkü bir dereceye kadar sitenizin yüzüdür. Bu yazıda, ihtiyaçlarımızı karşılayan favicon'ları nasıl oluşturacağımızı öğreneceğiz ve ayrıca bunları dönüştürme hizmetiyle tanışacağız. Aşağıda daha fazlasını okuyun.
Video versiyonu:
Favicon ne olmalı
Favicon'un kendisinin oluşturulmasına geçmeden önce, ideal olarak ne olmaları gerektiği üzerinde durmak güzel olurdu. Yani, mükemmel site simgesi:
- Açık ve anlaşılır
- kaliteli yapılmış
- Sitenizin anlamını taşır
- Sitenizle ortak bir stile sahip
- Diğer sitelerin simgelerinden sıyrılıyor
Yukarıdaki parametreler ideal favicon'a atfedilebilir. Ve sitemiz için tam da böyle bir simge oluşturmamız gerekiyor. Ancak, favicon'da tam olarak neyin görüntülenmesi gerektiği konusunda anlaşmazlıklar var. Bu konuda sitenizin genel tarzından ve temasından hareket etmeniz gerektiğine inanıyorum. Herhangi bir resim veya metin içerebilir. Favicon'a metin yerleştirilmişse, en fazla 2 harften oluşmalıdır. Aksi takdirde, favicon'un boyutu temel olarak 16 * 16 piksel olduğu için kimse böyle bir metni çıkaramaz.
Site simgelerinin boyutları nelerdir?
Bildiğiniz gibi, artık çok çeşitli tarayıcılar, monitörler ve cihazlar var. Ve site simgesi boyutu gereksinimleri farklıdır. Dikkate alınması gereken aşağıdaki boyut seçenekleri vardır:
- 16*16px - çoğu tarayıcı ve cihaz için uygun standart favicon boyutları
- 32*32 piksel - bazı durumlarda kullanılır internet gezgini Ve safari
- 57*57 piksel - ekranda görüntülenirken kullanılır iPhone
- 72*72 piksel - ekranda görüntülenirken kullanılır ipad
- 114*114 piksel - retina ekranlarda görüntülenirken kullanılır (57*2=114)
- 144*144 piksel - retina ekranlarda görüntülerken kullanılır ipad (72*2=144)
Favicon'lar hangi formatta olmalıdır?
Önceden, tarayıcılar yalnızca şu biçimdeki site simgelerini kabul ediyordu: "iko". Artık, aşağıdakiler de dahil olmak üzere diğer formatları anlamayı öğrendiler: "png". Bizim durumumuzda bir taşla 2 kuş vuracağız. İlk olarak, formatta bir favicon oluşturacağız. "png" ve ardından şuna dönüştürün: "iko".
Site simgeleri oluşturmanın birkaç yolu
Bugün, site simgeleri oluşturmanın iki ana yolu vardır:
- Özel çevrimiçi hizmetler aracılığıyla
- Photoshop ve Adobe Illustrator gibi özel programlar aracılığıyla kendinizinkini oluşturun
Her yöntemin kendine has özellikleri vardır. Çevrimiçi hizmetler aracılığıyla site simgesi oluşturmanın avantajı, bunun için herhangi bir özel beceriye sahip olmanıza gerek olmamasıdır. Siz sadece gerekli görüntüyü yükleyin, değiştirin ve tamamlanmış favicon'u indirin. Veya sadece metinle çalışın ve çevrimiçi hizmetin araçlarıyla bir simge çizin. Genel olarak, bu yöntemin ana avantajı basitliğidir. Bununla birlikte, dezavantajı, bu tür site simgelerinin kalitesinin arzulanan çok şey bırakmasıdır. Çevrimiçi hizmet simgesi galerisinin sınırsız olmaması gibi basit bir nedenle benzersiz bir site simgesi elde edemezsiniz. Ve kendi resimlerinizi kullanırken, hizmetin araçlarını kullanırken kaliteli bir ürün oluşturmak o kadar kolay değil. Çevrimiçi hizmetin araçları aracılığıyla manuel olarak bir simge çizme durumunda, "hayal edilemez bir şey" elde edilir.
Bu nedenle ikinci, daha karmaşık ama başarılı çözümü seçiyoruz. Bir favicon oluşturmak için programı kullanacağız photoshop. Bu programla ilgili deneyiminiz yoksa endişelenmeyin. Talimatlarıma uyarak, görevle kolayca başa çıkabilirsiniz.
Site simgesi oluştur
Daha önce de belirttiğim gibi, bir resim veya sadece harfler kullanılarak bir favicon oluşturulabilir. Bizim durumumuzda bir çeşit resim kullanacağım. Örneğin otomotiv temalı bir web sitemiz olduğunu düşünelim. Bu nedenle, otomatik bölgeden bir görüntü bulmamız gerekiyor. Sitemizin simgesini tekerlek şeklinde yapmayı öneriyorum.
görüntüyü seçiyoruz
Her yerden fotoğraf çekebilirsiniz. Örneğin, aynı yöntemle yandex resimleri. Ana koşul, görüntünün gölgeler ve hacimler olmadan basit olması gerektiğidir. Bunun nedeni ise 16 piksellik bir boyuta küçültüldüğünde çok fazla detaya sahip olmayacak olmasıdır. Ekstra hacim ve gölgeler nedeniyle resim bulanık olabilir.
Aramayı kullanarak uygun bir resim buluyorum google istek üzerine "tekerlek". Tek yapmam gereken sağ tıklayıp "Görüntüyü Farklı Kaydet" i seçerek kaydetmek.
Google görsellerde uygun görsel Sonra, bu görüntüyü ile açıyoruz photoshop. Favicon'un şeffaf bir arka plana sahip olması çok önemlidir. Bizim durumumuzda durum böyle değil. Arka planı kaldırmak için Sihirli Değnek aracını kullanıyoruz. İşinin özü çok basit. Bu araçla, aynı renkteki bir görüntüdeki alanları seçebiliriz. Görüntümüzün arka planı, tekerleğin kendisiyle net bir şekilde zıtlık oluşturduğundan, bunu yapmak çok kolay olacaktır. Bir kez tıklayarak tek renkli bir alan seçiyoruz. Bir klavye kısayoluna basarak CTRL + Sil bu alanı kaldırıyoruz.
Çarkımızın arka planını kaldırıyoruz Bunu görüntünün arka planının tüm bölümleriyle yapıyoruz. Böylece resmimizde tekerlek şeffaf bir arka plan üzerinde, bizim de yapmak istediğimiz buydu. Böylece sitemizin simgesi için boşluk hazır.
2 farklı boyutta bir favicon oluşturun
2 favicons 64px ve 16px yapmayı öneriyorum. Öncelikle daha büyük bir simge (64px) oluşturmamız gerekiyor. Bunu yapmak için klavye kısayoluna basıyoruz CTRL+N. Açılan pencerede görselin yüksekliğini ve genişliğini 64px olarak seçiyoruz.
Gelecekteki favicon'un boyutunu ayarlayın Ardından, tekerleğimizi az önce oluşturduğumuz görüntünün alanına taşımamız gerekiyor. Bunun için çarklı resme dönüyoruz ve "Taşı" aracını seçiyoruz. Bir sonraki adımda çarkın görüntüsüne tıklıyoruz ve farenin sol tuşu basılı tutularak onu yeni görüntünün olduğu alana taşıyoruz. Taşırken tekerleğin bulunduğu katmanın seçili olduğundan emin olun. Aksi takdirde aktarım başarısız olur.
Çarkı yeni bir görüntüye aktarma Tekerlekleri yeni görsele taşıdıktan sonra uymadıklarını görüyoruz. Tekerleği 64 piksele kadar ölçeklendirmemiz gerekiyor. Bunu yapmak için tuşu basılı tutuyoruz VARDİYA ve küçültmek için görüntünün köşegen noktasına tıklayın. Böylece sitemiz için ilk favicon'u oluşturduk. Size 64 * 64px boyutunda olduğumuzu hatırlatırım. Şimdi sadece "Dosya" sekmesinde "Web için Kaydet" seçeneğini seçerek kaydetmemiz gerekiyor. formatı seçiyoruz PNG-24 ve klasör Görüntüler. Favicon'un kendisi de yalnızca Latin harfleriyle adlandırılır - favicon.
Favicon'u kaydet Harika. Şimdi daha küçük bir favicon oluşturmamız gerekiyor. Bunun için "Image" sekmesine tıklayıp "Image Size" fonksiyonunu seçiyoruz. Burada genişlik ve yüksekliği 16px olarak ayarlıyoruz. Şimdi bu görüntüyü web için kaydetmemiz gerekiyor. Buna "favicon-2" diyebiliriz.
Böylece, burada sitemiz için 2 favicons biçiminde oluşturduk. "png". Önce 64 piksellik bir sürüm oluşturduk, böylece daha sonra kolayca 16 piksele ölçeklendirebiliriz. Önce 16px ile bir değişken oluşturursanız, kaliteyi kaybetmeden 64px'e yükseltemezsiniz. Bu nedenle, çift çalışma yapmamak için bunu aklınızda bulundurun.
Bir web sitesine favicon yükleme
Etiketin içindeki siteye bir favicon yüklemek için Biz yazarız:
" biçiminde bir favicon'umuz varsa iko" o zaman biz " yerine png" Reçetelemek " iko". Örneğin:
Gördüğünüz gibi, site simgesi istediğimiz gibi görüntüleniyor.
Site ikonunun "ico" formatına dönüştürülmesi
Modern tarayıcılar, site simgelerini şu biçimde kolayca tanıyabilir ve görüntüleyebilir: "png". Ancak, formata dönüştürmeniz gerekebilir. "iko". Bu formatın avantajlarından biri, tüm boyutlardaki favicon'ların tek bir dosyada saklanabilmesidir. Bunun çok uygun olduğunu kabul edin. Bu nedenle, simgelerimizi dönüştürmek için harika bir hizmet kullanacağız - xiconeditor.com. Onunla çalışmak çok kolay. Her şey 4 adımda gerçekleşir:
1. Öncelikle faviconlarımızı yüklememiz gerekiyor. Bunun için butona tıklıyoruz. "İçe aktarmak".
xiconeditor.com hizmetinde favicons yükleme 
3. İstenirse, düğmesine tıklayabilirsiniz. "Ön izleme" ve nasıl görüntüleneceğini görün. formatındaki faviconlarımızı indirmek için "iko" butona tıklıyoruz "İhracat".
Böylece, burada favicon'ları nasıl oluşturacağımızı öğrendik. "png" ve onları formata dönüştürün "iko". Photoshop'ta görüntünün ayrıntılı işlenmesini özellikle düşünmedim, çünkü çoğu kişi için aşırıya kaçacak. Gerekirse, elbette Photoshop'ta piksellerle çalışarak favicon kalitesini daha da artırabilirsiniz. Tüm esasları basitleştirilmiş bir biçimde ifade etmeye çalıştım. Ve benim için hepsi bu. Umarım bu ders sizin için yararlı olmuştur. Eğer doğruysa:
- Bu makaleyi sosyal ağlarda paylaşın, böylece daha fazla kişi faydalansın;
- Yararlı ve ilginç blog yazılarını kaçırmamak için bültenime abone olun.
Bunun üzerine sana veda etmiyorum. İlginiz için teşekkür ederiz, bir sonraki yazılarda görüşmek üzere!