Bir WordPress sitesinde meşgulüm ve favicon olmak üzere son dokunuş eklemek için sahneye geldim. Öncelikle bir geliştiriciyim bu yüzden grafikler ve simgeler en güçlü noktam değil.

Bir favicon oluştururken en iyi uygulamalar nelerdir (boyutlar vb, zaten tasarımım var)? Mobil, tablet, retina ekranları vb. Mümkün olan her cihaz için uyum sağlamak istiyorum. Ayrıca bulanık olmasını da istemiyorum, bu yüzden hangi piksel yoğunluğunu kullanacağımı ve her şeyi bilmem gerekiyor.

Bunu yapacak bazı Mac uygulamaları veya çevrimiçi araçlar varsa (ve doğru şekilde yaparsanız) bu da harika olurdu. Aksi halde Illustrator ve Photoshop'ta yolumu nasıl bulacağımı biliyorum.

Favicons'un temelleri - 2013 için en iyi yöntem :

ICO favicon.ico (32x32)

PNG favicon.png (96x96)

Döşeme Simgesi tileicon.png (144x144)

Apple Touch Simgesi apple-touch-icon-precomposed.png (152x152)

Ve GitHub'daki favicon boyutlarına / türlerine "acı veren bir takıntılı" kopya kağıdı .

Her zaman bir okumaya değer: http://www.jonathantneal.com/blog/understand-the-favicon/

Neleri dahil etmek?

En az miktar

<!-- Desktop browsers (including 16x6, 32x32 & 48x48 PNGs) -->
<link rel="shortcut icon" href="/favicon.ico">

<!-- Modern browsers (196x196 should cover all modern browsers) -->
<link rel="icon" type="image/png" href="/favicon.png">

<!-- iOS & other mobile devices (ideally 180x180, at least 120x120) -->
<link rel="apple-touch-icon" href="touch-icon-iphone.png">

Obsesif için

<!-- Desktop browsers (including 16x6, 32x32 & 48x48 PNGs)  -->
<link rel="shortcut icon" href="/favicon.ico">

<!-- Modern browsers & Devices -->
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">
<link rel="icon" type="image/png" href="/favicon-64x64.png" sizes="64x64">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-128x128.png" sizes="128x128">
<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">

<!-- iOS & other mobile devices -->
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6plus.png">

<!-- Windows Tiles (optionally omitted and replaced with browserconfig.xml in root directory) -->
<meta name="msapplication-TileColor" content="#582686" />
<meta name="application-name" content="Your Website" />
<meta name="msapplication-square70x70logo" content="tile-small.png" />
<meta name="msapplication-square150x150logo" content="tile-medium.png" />
<meta name="msapplication-wide310x150logo" content="tile-wide.png" />
<meta name="msapplication-square310x310logo" content="tile-large.png" />

favicon.ico

favicon.ico favicons'un en eskisidir, bunu okuyan pek çok insan doğduğundan beri çalıştı ve bugün hala mükemmel çalışıyor.

Microsoft , 16x16, 32x32 ve 48x48 boyutlarında görüntüler eklemenizi önerir .

Favicon'unuzu tanımlamanın standart yolu:

<link rel="shortcut icon" href="/favicon.ico" />

Tarayıcılar web sitenizin kök dizinini arayacak, favicon.icoböylece bağlantıyı atabilirsiniz. Daha eski bazı tarayıcılar, favicon.icodaha uygun bir boyutta PNG bildirilse bile beyan edilenlere varsayılan olacaktır , bu nedenle ICO'yu kökte bildirilmemiş bırakmak ve farklı boyutta PNG'leri bildirmek iyi bir fikir olabilir.

favicon.png

HTML5, sizesbirden çok boyutlu simgelerin bildirilmesine yardımcı olmak için bu özelliği getirdi . Belirli PNG'leri kullanmak, size kullanılan boyutlar üzerinde daha fazla kontrol sağlar ve yalnızca doğru resmin yüklendiği anlamına gelir.

<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">

• www.w3.org - HTML5 - Bağlantı türü "simge"

Beyan ettiğiniz ebatlar, desteklemek istediğiniz cihazlara bağlıdır. Bazı yaygın ve çok yaygın olmayan boyutlar:

• 32x32
• 48x48
• 64x64
• 96x96
• 128x128 Chrome Web Mağazası simgesi
• 160x160 Android için Chrome
• 192x192 Android için Chrome
• 195x195 Opera Hızlı Arama simgesi
• 196x196 Android için Chrome
• 228x228 Opera Sahili simgesi

Apple Touch Simgesi

iOS web klibi simgeleri, farklı aygıtlar ve çözünürlükler için çeşitli boyutlarda gelir. Bir veya birkaç boyutta simge belirleyebilirsiniz, ilgili boyutta bir simge bulunmazsa, belirtilen boyutta olmayan genel simge kullanılır.

Bir bağlantı öğesi kullanılarak hiçbir simge belirtilmezse, iOS, apple-touch-iconöneki olan simgeler için kök dizininde arama yapar . iOS cihazları (garip bir şekilde) bu simgeleri kullanacak tek cihaz değildir (örneğin, Android Chrome), bu nedenle bunları bildirmek daha güvenli bir seçenektir.

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6plus.png">

• iOS İnsan Arabirimi Yönergeleri - Simge Boyutları

• iOS Geliştirici Kitaplığı - Web Klibi için Bir Web Sayfası Simgesi Belirtme

Windows Döşemeleri

Döşemeler, bir web sitesini Windows veya Windows Phone'daki başlangıç ​​ekranına sabitlediğinizde ve çeşitli boyutlarda olduğunda kullanılır.

<meta name="msapplication-square70x70logo" content="tile-small.png" />
<meta name="msapplication-square150x150logo" content="tile-medium.png" />
<meta name="msapplication-wide310x150logo" content="tile-wide.png" />
<meta name="msapplication-square310x310logo" content="tile-large.png" />

Önerilen resim boyutları, bu resimlerin adlarından daha büyüktür. Bunlar microsoft.com tarafından önerilen boyutlar

                   | Minimum   | Recommended
Small  | 70 x 70   | 56 x 56   | 128 x 128
Medium | 150 x 150 | 120 x 120 | 270 x 270
Wide   | 310 x 150 | 248 x 120 | 558 x 270
Large  | 310 x 310 | 248 x 248 | 558 x 558

Çini rengi ve başlığı

Döşemelerin varsayılan davranışı, döşemenin başlığını <title>etiketten almak ve arka plan rengini gösteren döşeme görüntülerinde saydamlığa saygı duymaktır. Bu meta etiketleri kullanarak rengi ve başlığı özelleştirebilirsiniz:

<meta name="msapplication-TileColor" content="#582686" />
<meta name="application-name" content="Your Website" />

browserconfig.xml

Tüm msapplicationmeta etiketleri, kök klasördeki bir XML dosyası ile silinebilir ve değiştirebilirsiniz browserconfig.xml. XML dosyası şöyle görünmelidir:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="images/tile-small.png"/>
      <square150x150logo src="images/tile-medium.png"/>
      <wide310x150logo src="images/tile-wide.png"/>
      <square310x310logo src="images/tile-large.png"/>
      <TileColor>#582686</TileColor>
    </tile>
  </msapplication>
</browserconfig>

İleri Okuma ve Kaynaklar

• Favicon Hile Sayfası

• Favicons, Touch İkonları, Döşeme İkonları, vb. Hangisine ihtiyacınız var? - Bir sınav olarak yazılmıştır ancak birçok yararlı bilgi içermektedir (ve sadece bir makale olarak okuyabilirsiniz, bunun bir sınav olduğunu unutmayın)

• İkon El Kitabı

• ImageMagick - Görüntüleri dönüştürmek için kullanışlı komut satırı aracı.

• RealFaviconGenerator.net - Kapsamlı favicon üreteci.

• FAVIC-O-MATIC - Kolayca özelleştirilebilir çıktı formatlarına sahip kapsamlı favicon jeneratörü.

Bu araç süper bir zaman tasarrufu. Denemek! Sizin için her şeyi halleder.

Resminizi 800px x 800px civarında bir şeye yükleyin, böylece güzel ve net.

http://realfavicongenerator.net/

Ayrıca, bu meta etiketi ekleyin, böylece bazı kişiler iOS cihazına kaydederse simgenizi adlandırabilirsiniz.

<meta name="apple-mobile-web-app-title" content="Website Name">

Umarım yardımcı olur!

Tüm olası değişkenleri üretmek için bu GRUNT görevini kullanın:

https://github.com/gleero/grunt-favicons

PNG görüntüsünden bilinen tüm tür ve boyut simgelerini oluşturur. ImageMagick'i kullanır.

Giriş: png cinsinden kare logo. Ayrıca, kaynak dosyalarının yakınında, örneğin, source.16x16.png çözünürlük öneki de bulunabilir.

Çıktı:

favicon.ico (16x16, 32x32, 48x48) — desktop browsers, address bar, tabs, safari reading list, non-retina iPhone, windows 7+ taskbar, windows desktop;
favicon.png (64x64) — modern browsers;
apple-touch-icon.png (57x57) — iPhone non-retina, Android 2.1+;
apple-touch-icon-60x60.png (60x60) — iPhone iOS7+;
apple-touch-icon-72x72.png (72x72) — iPad non-retina;
apple-touch-icon-76x76.png (76x76) — iPad non-retina iOS 7;
apple-touch-icon-114x114.png (114x114) — iPhone retina, iOS 6 and lower;
apple-touch-icon-120x120.png (120x120) — iPhone retina, iOS 7 and higher;
apple-touch-icon-144x144.png (144x144) — iPad retina;
apple-touch-icon-152x152.png (152x152) — iPad retina iOS 7;
windows-tile-144x144.png (144x144) — Windows 8 tile;
coast-icon-228x228.png (228x228) - Coast browser;
firefox-icon-16x16.png (16x16) - Firefox on Android / Windows;
firefox-icon-30x30.png (30x30) - Firefox OS;
firefox-icon-32x32.png (32x32) - Firefox on Android / Windows;
firefox-icon-48x48.png (48x48) - Firefox on Android / Windows;
firefox-icon-60x60.png (60x60) - Firefox OS;
firefox-icon-64x64.png (64x64) - Firefox on Android / Windows;
firefox-icon-90x90.png (90x90) - Firefox OS;
firefox-icon-120x120.png (120x120) - Firefox OS;
firefox-icon-128x128.png (128x128) - Firefox on Android / Windows;
firefox-icon-256x256.png (256x256) - Firefox on Android / Windows;
homescreen-196x196.png (196x196) - Android Homescreen.

Html dosyasına değişiklikler ekler.

http://faviconit.com

tek resimli PNG'den tüm cihazlar için yaklaşık 15 farklı simge boyutu oluşturacaktır.

Ben de bir favicon çözümü arıyordum ve herhangi bir üçüncü taraf web servisine güvenmek istemedim. Basit bir derleme adımı olarak işe yarayacak herhangi bir genel çözüm bulamadım, bu yüzden faviconbuild oluşturdum . ImageMagick'e dayandığından sisteminizin son sürümünü indirebilir veya yayınlarımda sağladığım bazılarını kullanabilirsiniz .

MIT lisansı altında yayınladım, bu yüzden herhangi biri ticari veya kişisel kullanım için kullanmakta serbesttir, ya da ondan bir miktar ilham alır. Herhangi bir hata bulursanız veya uzatmak istiyorsanız, bu işe dahil olmaktan çekinmeyin .

Proje sayfasını daha ayrıntılı bilgilerle güncelleyeceğim , ancak gerçekten kullanışlı ve standart bir yardım menüsü var ve Unix, Mac ve Windows'ta çalışıyor.

Sadece terminalinizde .bat veya .sh betiğini çalıştırın.

Windows için ex:

faviconbuild.bat -h

veya Unix / Mac için (veya Cygwin kullanıyorsanız Windows):

faviconbuild.sh -h

Bu size mevcut seçeneklerle birlikte sürüm bilgisini verecektir. Betik bir giriş görüntüsü almak ve web sitenize eklemek için gerekli html işaretlemesiyle birlikte gerekli tüm görüntüleri çıkarmak için tasarlanmıştır.

Bu, şu anda projemden birinde nasıl kullandığımın bir örneği:

./faviconbuild/faviconbuild.sh -i ./source.png

Sadece faviconbuild klasörünü projeye özel bir klasöre yerleştirdim, böylece asıl proje dosyalarına dokunmam gerekmiyordu ve yan tarafta source.png dosyasını yerleştirdim. Komut dosyasının varsayılan davranışı, her şeyi gitignored iç içe geçmiş bir yapı klasörüne koymaktır, bu nedenle eğer git kullanıyorsanız projeyle çakışmaz.

Bir şey eksikse, lütfen bir özellik isteği gönderin.

Ayrıca daha fazla bilgi içeren bir blog yazısı var.

Umarım bunu faydalı buluyorsunuz.

Favicon boyutları ve jeneratörleri ile ilgili birçok faydalı bilgi var.

Farklı boyutlardaki tasarım ihtiyaçlarını açıklayarak tartışmaya ekleyebilirim.

Evet, favicon, simge, sembol ve logo boyutları aynı sanat esasına dayanabilir, ancak her biri en doğru görünmesi için özellikle bu boyuta getirilmeli Daha küçük başlarsanız 16 piksel boyutunda ve otomatik olarak oluşturulan görüntü 128 piksel boyutunda optimize edilmez.

İstediğiniz tüm hileleri kullanarak sanatınızı 128 pix veya büyük boyutlu kare formatlarında çizin. Farklı boyut simgelerini birer birer dışa aktarın, sonucu inceleyin ve master'ı bu boyutta en iyi şekilde çalışacak şekilde ayarlayın.

16 x 16 için 16x16 kare kareler oluşturacağım ve çıktıların en iyi kontrolünü elde etmek için ayrı ayrı renklendireceğim.