Çevrimiçi favicon oluşturma programı. Favori ikonları oluşturmanın çok yönlü bir yolu. Favicon'u çevrimiçi olması için nereden indirebilirim?

Merhaba sevgili okuyucular! Bugünün makalesi siteniz için bir favicon (favicon.ico) oluşturmakla ilgili. Gönderiden, bir favicon'un ne olduğunu, bu simgenin hangi boyutlarda olduğunu ve neden yapılıp blogunuza yüklenmesi gerektiğini öğreneceksiniz. Ek olarak, makale, birkaç dakika içinde çevrimiçi bir sık ​​kullanılan simge oluşturmanıza olanak tanıyan favicon oluşturucuların yanı sıra indirebileceğiniz siteler sağlayacaktır. galeriler ve hazır favori ikonları koleksiyonları.

İlk önce, bir Favicon'un ne olduğunu anlayalım, neden gerekli, belki onsuz yapabilirsiniz?

1. Favicon simgesi nedir ve ne işe yarar?

konsept Favicon olarak çevrilebilen iki İngilizce Sık Kullanılan Simgesinden gelir. "favoriler" için simge (küçük resim)... Sık Kullanılanlar, temel Internet Explorer tarayıcısındaki yer imlerinin adıdır. Örneğin, Chrome tarayıcısında şöyle görünürler:

Her kaynak için küçük bir resim var, mini gibi bir şey. Sitelerin URL'lerini değil, küçük logolarını - favicon'ları işaretlemenin daha uygun olduğunu kabul edin. Bu arada, buna ek olarak, site simgesi, sitenin açık sayfasının URL'sinden hemen önce veya yer iminin başlığında tarayıcının adres çubuğunda görüntülenir:

Favicon.ico uzantılı küçük bir dosyadır (16x16 piksel) (bu uzantı, işletim sistemleri tarafından simgeleri depolamak için kullanılır). Hemen hemen her site Favicon.ico'ya sahiptir ve hangi hosting üzerinde bulunduğu veya hangi motor / temayı kullandığı önemli değildir. Çevrimiçi oluşturucular ve site simgesi galerileri, herhangi bir görüntüden birkaç dakika içinde bir simge oluşturmanıza, onu sıfırdan çizmenize veya hazır bir simge indirmenize olanak tanır, bu nedenle henüz blogunuzda bir sık ​​kullanılan simge kullanmıyorsanız, durumu düzeltin. .

Bu küçük resim ne için? İlk olarak, web siteniz için bir mini logodur, ziyaretçileriniz onu daha iyi hatırlayacaktır. Bu nedenle, onu oluşturmaya karar verirseniz, favicon'un ziyaretçilerin dikkatini çektiğinden ve hatırlanması kolay olduğundan emin olun. İkincisi, Runet Yandex'deki en popüler arama motoru, sonuçlarında her sitenin yanına kendi favicon'unu yerleştirir, bu da kaynağınızı simgesi olmayan diğerlerinin arka planından ayırt etmenize olanak tanır. Kullanıcıların, görüntünün yanlarında gösteriş yaptığı siteleri ziyaret etme olasılığı daha yüksektir (hangisi olduğu önemli bile değildir), bu da favicon'un izin verdiği anlamına gelir.

Bu arada, Yandex'in sitedeki içeriği değil, yalnızca kaynakların favorilerini dizine ekleyen özel bir botu bile var. Bir favicon oluşturup siteye yükledikten sonra, bu Yandex botu onu indeksleyene kadar biraz beklemeniz gerekecek ve bu işlem genellikle bir haftadan bir aya kadar sürer. Yandex'in site ikonunuzu indeksleyip indekslemediğini üç şekilde kontrol edebilirsiniz:

• Yandex arama kutusuna sitenizin adresini yazın (örneğin, http://site) ve yakınlarda bir favicon olup olmadığına bakın.
• http://favicon.yandex.net/favicon/ bağlantısını takip edin alan("site"yi sitenizin URL'si ile değiştirmeniz gereken yer). Simge dizine eklenmişse, göreceksiniz.
• Yandex.Webmaster'a (http://webmaster.yandex.ru) gidin ve favicon.ico'nun varlığını kontrol edin.

2. Çevrimiçi oluşturucular ve galeriler Favicon

Bu nedenle, bir site için çok gerekli olan bir favicon'un ne olduğunu zaten anladık. 16'ya 16 piksel olması gerektiğini ve uzantısının .ico olması gerektiğini öğrendik. Artık favicon.ico oluşturmanın birkaç yolu var:

1. Favicon galerilerinden hazır bir simge indirin.
2. Photoshop veya çevrimiçi bir oluşturucu kullanarak sıfırdan bir favori simgesi yapın.
3. Hazır bir görüntüden favicon yapın (görüntü boyutları önemli değildir).

2.1 Koleksiyonlar ve galeriler Favicon

1. http://www.thefavicongallery.com/ - çok çeşitli konuların simgelerini içeren küçük bir galeri. Yaklaşık 300 resim içerir. Beğendiğiniz bir resmi indirmek için, üzerine sağ tıklayıp "farklı kaydet" seçeneğini seçmeniz ve ardından favicon'u bilgisayarınıza kaydetmeniz gerekir.
2. http://www.iconj.com/- her zevke ve renge göre 3 binden fazla simge. Resmi .gif veya .ico formatında kaydetmek mümkündür. Simgenin html kodunu bile alabilirsiniz. Animasyonlu faviconlar var. Koleksiyonun tek dezavantajı, bir sayfada yalnızca 30 simge bulunmasıdır, bu nedenle uygun görüntüyü seçmek için birçok sayfaya bakmanız gerekir.
3. http://www.favicon.cc/- büyük bir favori simgesi koleksiyonu, ancak bir sayfada yalnızca 20 sık kullanılan simge var, çevirmek uzun zaman alacak.
4. http://www.favicon.co.uk/- ayrıca birçok favori ikonu içeren iyi bir galeri. Her sayfada 144 simge vardır, bu da görüntülemeyi çok kolaylaştırır. Favicon temaları çok farklı.
5. - siteniz için küçük bir koleksiyon (84 adet) mini resim.

2.2 Sıfırdan bir web sitesi için favicon nasıl yapılır

Sıfırdan bir site simgesi oluşturmanın avantajı, ortaya çıkan simgenin benzersiz olması ve benzersizliğin çok önemli olmasıdır! Bu nedenle tembel olmamak ve 5-10 dakika kendi favori simgelerinizi oluşturmak için harcamak daha iyidir.

Simgeyi oluştururken herhangi bir sorun olmamalıdır. yani burada her şey açık.

2.2.4 Favicon-Generator.org

Başka bir iyi çevrimiçi favicon oluşturucu. Bu linkten ulaşabilirsiniz - http://favicon-generator.org/.

Bu jeneratörde de herhangi bir sorun olmamalıdır. Ekranda, çevrimiçi favicon oluşturucunun işlevleri çevrilir.

2.3 Mevcut bir görüntüden bir site için favicon nasıl yapılır

Siteniz için sıfırdan bir favicon oluşturmak istemiyorsanız, mini logonun temeli olacak bir resim kullanabilirsiniz. Bu durumda, önceden bir resim (tercihen kare, aksi takdirde favicon.ico oluştururken desen bozulabilir) hazırlamanız ve ardından çevrimiçi favicon oluşturucu hizmetinde kullanmanız gerekecektir. En popüler kaynaklardan ikisine göz atalım.

2.3.1 Favicon.ru

Çevrimiçi oluşturucunun kullanımı çok kolaydır, herhangi bir boyuttaki herhangi bir görüntüyü 16x16 piksellik küçük bir simgeye kolayca dönüştürebilir. Şimdi bu hizmetle çalışmanın basitliğini kendiniz göreceksiniz.

Resim eklemenin iki yolu vardır:

• "Dosya seç" düğmesini kullanarak bilgisayarınızda istediğiniz görüntüyü bulun ve indirin.
• Resmin İnternet'teki adresini alana girin (bu dosya bilgisayarınızda bile olmayabilir) ve hizmet her şeyi kendi başına yapacaktır.

Dosya yüklendikten sonra, " favicon.ico oluşturun!"Ve birkaç saniye bekle. Ardından favicon'u bilgisayarınıza indirmeniz yeterlidir.

2.3.2 Favicon.cc

Bu çevrimiçi oluşturucu öncekinden daha güçlüdür, ancak aynı zamanda daha karmaşıktır. Başlamak için bağlantıyı takip edin - favicon.cc ve ardından Görüntüyü İçe Aktar'a tıklayın (sol pencerede).

Ardından "Dosya seç" düğmesine tıklayın ve istediğiniz görüntüyü yükleyin. Buna dayanarak, siteniz için bir favicon oluşturulacaktır. Bu durumda, küçültüldüğünde görüntüyle ne yapacağınızı seçmeniz gerekecektir:

• Boyutları koru - resmin en boy oranını değiştirmeden koruyun.
• Kareye küçült simgesi - resim bozulabilirken resmin kenarlarını kare yapın.

Resmi yükledikten sonra, çevrimiçi oluşturucuda düzenleyebilir veya değiştirmeden bırakabilirsiniz. Alınan favicon.ico size uygunsa, bilgisayarınıza indirin.

3. Bir WordPress bloguna favicon nasıl kurulur

Çoğu zaman, favicon sitenin kök klasöründe bulunur, ayrıca daha uygundur, bu yüzden bu seçeneği dikkate alacağız. Bu iki basamakta yapılır.

İLK ADIM... İlk olarak, temada favicon'a giden yolu gösteren bir html kodu satırı bulmanız gerekecek. Bir WordPress blogu için header.php dosyasını bulmanız ve satırı bulmanız gerekir, şöyle görünmelidir (temaya bağlı olarak biraz farklılık gösterebilir):

Bu satırı aşağıdaki iki ile değiştirmeniz gerekir:

< link rel= "icon" href= "/favicon.ico" type= "image/x-icon" >

< link rel= "shortcut icon" href= "/favicon.ico" type= "image/x-icon" >

ÖNEMLİ! Bu satırlar etiketlerin içine yerleştirilmelidir ve

İKİNCİ ADIM.Şimdi favicon'u sitenin kök klasörüne eklemeniz gerekiyor. Hostinginize gidin ve adında bir dosya yerleştirin favicon.ico(16 × 16 piksel).

Her şeyi doğru yaptıysanız, artık sitenizin kendi favicon'u var.

Merhabalar, blogumun sevgili ziyaretçileri. Bugün sizin için çevrimiçi favicon yapmanıza yardımcı olacak 10 hizmetten oluşan bir seçki hazırladım. Ayrıca makalenin sonunda bence en uygun 5 siteyi vurguladım.

Başlangıç ​​olarak, favicon'un ne olduğunu bulmaya değer mi? Sanırım çoğunuz bu kavrama aşinasınız ama size tekrar anlatacağım. Tek kelimeyle, bu sitenizin simgesidir. Yandex'de arama yaptığınızda sitenin yanında küçük bir 16x16 simgesi gördünüz, yani bu favicon. Ayrıca bazı tarayıcıların adres çubuğunda ve yer imlerinde de görülebilir.

Bu küçük resim her şeyden önce markanızdır. İnsanlar sitenizi bununla tanıyacak. Bu nedenle, Yandex aramasında hemen görünebilmesi için orijinal ve akılda kalıcı olması gerekir. Bu kadar küçük bir simgeyi kendi başınıza çizmek zordur ve bir resimden favicon yapmanıza yardımcı olacak çevrimiçi hizmetler kurtarmaya gelir. Bazılarına sırayla bir göz atalım ve güçlü ve zayıf yönlerini belirleyelim.

• Kullanımı rahat.
• Bir resimden favicon yapmak veya kendiniz çizmek mümkündür.
• Profesyonellerden sipariş edilebilir.
• Ortaya çıkan sonucun bir önizlemesi.
• Sanırım orada değiller, ihtiyacınız olan her şey sitede, sadece hazır ikon galerisi olmadığını vurgulayabilirim.

1. 
   

   • Bir resimden oluşturmak veya kendiniz çizmek mümkündür.
   • Oluşturulduktan sonra, siteye eklenecek bir bağlantı örneği gösterilir.
   • Her şey İngilizce.
   • Çirkin tasarım.
   • Oluşturma sırasında resmi kırpmak mümkün değildir.

2. 3 www.Chami.com

3. 
   

   • Güzel kullanıcı dostu arayüz.
   • Bir resimden favicon yapmak veya kendiniz çizmek mümkündür.
   • Boyama için geniş renk paleti.
   • Önizleme yok.
   • Her şey İngilizce.
   • Hazır simgeler galerisi yok.

4. 
   

   • Kullanışlı arayüz.
   • Ekstra bir şey yok.
   • Hazır simgeler galerisi yok.
   • Kendiniz çizmek imkansız.
   • Oluşturma sırasında bir resmi kırpamazsınız.

5. 
   

   • Kullanışlı güzel arayüz.
   • Ekstra bir şey yok.
   • Kendiniz çizmek veya bir resimden oluşturmak mümkündür.
   • Hazır simgelerden oluşan bir galeri var.
   • Simgenin boyutunu oluştururken kaydedebilir veya küçültebilirsiniz.
   • Ön izleme.
   • Animasyonlu bir simge yapabilirsiniz.
   • Boyamak için çok sayıda renk.
   • Her şey İngilizce.

6. 
   

   • 16x16 ve 32x32 simge boyutları vardır.
   • Ek işlev yoktur, yalnızca bir resimden bir favicon oluşturulması.
   • Önizleme yok.

7. 
   

   • Ön izleme.
   • Geniş bir hazır simgeler koleksiyonu.
   • Resmi kırpmak mümkündür.
   • Her şey İngilizce.
   • Sitede hatalar var.
   • Uygunsuz arayüz.

8. 
   

   • Simge boyutları 16 × 16, 32 × 32, 48 × 48 ve 64 × 64 arasından seçilebilir.
   • Her şey İngilizce.

9. 
   

   • Ekstra bir şey yok.
   • Simgenin boyutunu seçmek mümkündür.
   • Kendiniz çizebilir veya bir resimden çevrimiçi bir favicon yapabilirsiniz.
   • Resmi kırpmanın bir yolu yok.
   • Önizleme yok.

Daha birçokları olmasına rağmen sizi sadece 10 çevrimiçi hizmetle tanıştırdım. Bana göre, bunlar arasında en popüler olanlar. Başkalarını kullanırsanız, yorumlara yazın, ben ve diğer okuyucular onlar hakkında bilmek isteyecektir.

Ve şimdi, söz verildiği gibi, bence TOP-5 uygun ve kaliteli hizmetler.

Bunlar benim ilk beşim. Hangi hizmeti önce, hangisini en son koyacağınızı bilmek istiyorum. Cevapları yorumlarda duymaktan memnun olurum.

not Kendiniz için henüz bir favicon bulamadıysanız, siteyi kontrol ettiğinizden emin olun. Faviconka.ru... Üzerinde her zevke uygun 2.000'den fazla hazır ikon bulacaksınız. Umarım makale sizin için yararlı olmuştur ve çevrimiçi bir favicon yapma hizmetinizi bulmuşsunuzdur.

Modern web sitelerinin ayrılmaz bir parçası, tarayıcı sekmeleri listesindeki belirli bir kaynağı hızlı bir şekilde tanımlamanıza olanak tanıyan Favicon'dur. Kendine özgü etiketi olmayan bir bilgisayar programını hayal etmek de zordur. Aynı zamanda, bu durumda siteler ve yazılımlar, tamamen açık olmayan bir ayrıntıyla birleştirilir - her ikisi de ICO formatında simgeler kullanır.

Bu küçük görseller hem özel programlarla hem de çevrimiçi servisler yardımıyla oluşturulabilir. Bu arada, bu tür amaçlar için çok daha popüler olan ikincisidir ve bu makalede sizinle birlikte bu tür kaynakları ele alacağız.

Grafikler, web servislerinin en popüler kategorisi değildir, ancak iş ikon oluşturmaya geldiğinde, kesinlikle aralarından seçim yapabileceğiniz çok şey vardır. Çalışma prensibine göre, bu tür kaynaklar, kendiniz bir resim çizdiğiniz kaynaklara ve bitmiş bir görüntüyü ICO'ya dönüştürmenize izin veren sitelere ayrılabilir. Ancak temelde tüm simge oluşturucular her ikisini de sunar.

Yöntem 1: X-Icon Editor

Bu hizmet, ICO görüntüleri oluşturmak için en işlevsel çözümdür. Web uygulaması, simgeyi ayrıntılı olarak manuel olarak çizmenize veya hazır bir görüntü kullanmanıza olanak tanır. Aracın ana avantajı, görüntüleri 64x64'e kadar çözünürlükte dışa aktarma yeteneğidir.

Bu nedenle, farklı boyutlarda aynı türde simgelerden oluşan bir set oluşturmanız gerekiyorsa, bu amaçlar için X-Icon Editor'dan daha iyi bir şey bulamazsınız.

Yöntem 2: Favicon.ru

Bir web sitesi için 16x16 favicon oluşturmanız gerekiyorsa, Rusça çevrimiçi hizmet Favicon.ru da mükemmel bir araç olabilir. Önceki çözümde olduğu gibi, burada kendiniz bir simge çizebilir, her pikseli ayrı ayrı renklendirebilir veya bitmiş bir resimden bir favicon oluşturabilirsiniz.

Sonuç olarak, PC'nize 16 × 16 piksel görüntü olan ICO uzantılı bir dosya kaydedilir. Hizmet, yalnızca bir görüntüyü küçük bir simgeye dönüştürmesi gerekenler için mükemmeldir. Ancak, Favicon.ru'da hayal gücünü göstermek kesinlikle yasaktır.

Yöntem 3: Favicon.cc

Hem isim hem de çalışma prensibi açısından bir öncekine benzer, ancak daha da gelişmiş simge oluşturucu. Hizmet, normal 16x16 görüntüler oluşturmaya ek olarak, web siteniz için hareketli bir favicon.ico çizmeyi kolaylaştırır. Ayrıca kaynak, ücretsiz olarak indirilebilen binlerce özel simge içerir.

İngilizce arayüzü sizi rahatsız etmiyorsa, önceki hizmetle çalışma lehine kesinlikle hiçbir argüman yoktur. Favicon.cc'nin animasyonlu simgeler oluşturabilmesine ek olarak, kaynak, ne yazık ki Rus dilindeki muadilinden yoksun bırakılan içe aktarılan görüntülerdeki şeffaflığı da doğru bir şekilde tanır.

Yöntem 4: Favicon.by

Web siteleri için favicon oluşturucunun başka bir sürümü. Sıfırdan veya belirli bir görüntüye dayalı olarak bir simge oluşturmak mümkündür. Farklılıklar, üçüncü taraf web kaynaklarından görüntüleri içe aktarma işlevini ve oldukça şık, özlü bir arabirimi içerir.

Genel olarak, bu makalede tartışılan hizmetlerle çalışma konusunda hiçbir fark yoktur, ancak Favicon.by kaynağı, görüntüleri ICO'lara dönüştürmekle çok daha iyi başa çıkar ve bunu fark etmek oldukça kolaydır.

Yöntem 5: Çevrimiçi Dönüştürme

Bu siteyi neredeyse her yerde bulunan bir çevrimiçi dosya dönüştürücüsü olarak biliyor olmanız muhtemeldir. Ancak herkes bunun herhangi bir görüntüyü ICO'ya dönüştürmek için en iyi araçlardan biri olduğunu bilmiyor. Çıktıda 256 × 256 piksele kadar çözünürlüğe sahip simgeler alabilirsiniz.

Gördüğünüz gibi, Online-Convert web sitesini kullanarak bir ICO simgesi oluşturmak hiç de zor değil ve bu sadece birkaç fare tıklamasıyla yapılıyor.

Bir atölye tarzında yeni bir ders ve bu sefer favicon'un sırlarını anlıyoruz. Favicon - yer imlerinde ve tarayıcı çubuğunda görüntülenen küçük bir simge. Kendi web siteniz varsa ve en küçük ayrıntılarda bile kendinizi diğerlerinden farklı kılmak istiyorsanız - favicon gerekli. En avantajlısı, elbette, herhangi bir grafik tanımlama olmadan soluk bir adres listesinin arka planına karşı yer imleri arasında görünüyor. Ancak, dersimiz tarayıcı satırına nasıl favicon ekleyeceğiniz hakkında değil, Photoshop'ta kendi favicon'unuzu nasıl çizeceğiniz hakkındadır.

Favicon'umu hangi formatta kaydetmeliyim?

Her şey tarayıcıya bağlıdır. İçin Microsoft Gezgini uygun simge formatı ICO... İmleç yaptığımızda bu formatla zaten karşılaşmıştık. Diğer tarayıcılar için Google Chromeönceki elma safarisi normal yapacak GIF veya PNG resim. Favicon yarı saydam olabilir. Bunu yapmak için, yarı saydam bir şekilde kaydetmeniz gerekir. PNG resim ve ardından biçime dönüştürün ICO... Bu iyi bir programda yapılabilir. IcoFX. Ancak, favicon oluşturmak için birçok üçüncü taraf sitesi vardır ve bunların en belirgin olanı www.favicon.ru'dur.

Bir web sitesine favicon nasıl yerleştirilir?

bundan nasıl emin olunur favicon işe yarayacak mı? 4 koşul yerine getirilmelidir.

• Dosya çağrılmalıdır - favicon.
• Favicon boyutu 16 üzerinde 16 piksel
• Favicon için en uygun yer sitenin kök klasörüdür.
• Meta etiketlere simge adresi ekleyin heder site dizininde.

HTML ifadesinde şöyle görünür:

Farklı tarayıcılar için birkaç simge oluşturabilirsiniz, örneğin ICO ve diğeri de PNG resim ve tüm bunları etiket aracılığıyla belirtin bağlantı ... Modern tarayıcılar çoğu zaman kendileri adlı sitenin kökünde bir dosya ararlar. favicon ancak kesinlik adına kesin bağlantıları belirtmekten zarar gelmez.

Photoshop'ta bir favicon nasıl oluşturulur

Yaratmak faviconÇok basit. aynısını yapmak ister misin favicon Vkontakte veya Odnoklassniki gibi mi? İyi faviconİnternetin dolu olduğu herhangi bir favicon "jeneratöründe" büyük resimleri küçülterek yapılmaz. Favicon çok küçük. Aslında biz biraz piksel sanatı, kendine has özellikleri olan. Bir mektup yazıp sadece azaltamazsınız. 16 piksel .

Beğenmek favicon yeniden boyutlandırma sırasında harfin kenarları birkaç piksel gideceğinden bulanık ve belirsiz olacaktır. Kibar olduğu ortaya çıkacak kenar yumuşatma bu genellikle iyidir, ancak piksel sanatı söz konusu olduğunda, bu geçişlere gerek yoktur. Öte yandan, yuvarlaklık üzerinde gereksiz "sıyırma" yapmaktan kaçınmaya değer, aksi takdirde merhaba 1999 GIF'leri alacaksınız.

Boyutta bir dosya oluşturun 16 x 16 piksel ... Çok basit bir yarı şeffaf oluşturacağız favicon c biraz derinliği olan bir harf şeklinde. Derinlik, bir alt gölge ve bir gradyan ile oluşturulacaktır.

Arka planı çiz

Neden bu öğreticinin açılış ekranında büyük bir pürüzsüz ve yalanmış görüyorsunuz? favicon? Çünkü öğretici giriş için yakınlaştırdım. Görüntüyü niteliksel olarak büyütmeyi nasıl başardım? 16 piksel? Çok basit, eğer kullanmak mümkünse ve mantıklıysa her zaman bir vektörde çalışırım. Ve vektör, herhangi bir dönüşümü kolayca aktarır ve kaliteyi kaybetmez.

Bir araç seçin Yuvarlak Dikdörtgen Aracı... Seçenekler çubuğunda, vektörde çizim yapmanıza izin verecek bir mod seçin. Panelin açılır menüsünde, onay işareti - Piksellere yasla... Bu, vektör yollarının piksellere yapışması ve "aralarını" çizmemesi için gereklidir.

bir yüzeyimiz var favicona, ve yarı saydam kenarlar daha düzgün bir yuvarlaklık yaratacaktır. Şimdi beyaz arka plandan kurtulma zamanı, buna ihtiyacınız yok. Görünürlüğünü kapatın. Veya normal bir katman yapmak için katmana çift tıklayın ve ardından silin.