1. Що таке favicon
2. Навіщо потрібна фавіконки
3. У чому створити favicon
4. Створення фавіконки онлайн
5. Як відбувається процес створення іконки в Логастер
6. Дизайн-пакет зі знижкою
7. Плагін для створення фавіконок
8. Як зробити favicon.ico самому
9. відображення favicon
10. Як підключити favicon
11. Як перевірити коректність установки фавіконки
12. Можливі проблеми

Що таке favicon

Favicon - (скорочення від слів «Favorite Icon») - це маленька картинка розміром 16 × 16 пікселів, яку побачить відвідувач вашого сайту. Вона відображається поруч з URL сайту в адресному рядку браузера. Крім того ця іконка з'явиться поряд із назвою вашого сайту в списку відкритих вкладок, в закладках і в результатах пошуку, полегшуючи користувачеві швидко знайти ваш сайт серед інших сайтів.

За умовчанням як іконки сайту відображається значок браузера. Щоб сайт відрізнявся від інших і не загубився в незліченній кількості сірих вкладок, відкритих користувачем, потрібно зробити свою оригінальну фавіконки.

Хоча багато сучасних веб-браузери підтримують фавіконки в форматі GIF, PNG або інших популярних форматів файлів всі версії Internet Explorer як і раніше вимагають значки у вигляді файлів ICO (формат Microsoft). У цьому форматі вашу іконку зрозуміє будь-який браузер.

Навіщо потрібна фавіконки

Фавіконки потрібна, щоб ваш сайт якось виділявся в загальній масі на сторінці результатів пошукової видачі і був помітний декількох відкритих вкладках в браузері. Хороша іконка є як би логотипом вашого сайту, який буде пізнаваний і створює певне ставлення і викликає особливий рівень довіри.

Природно, що фавіконки здатна привернути увагу користувача і він прочитає заголовок-посилання на вашу статтю. Тема, в комбінації з хорошим сніпетів і красивою іконкою, збільшить кликабельность і відповідно відвідуваність ресурсу.

Відразу ж хочу зауважити, що до сайтів, які мають ярлик «ГС» - сама по собі ікона не здатна поліпшити враження від ресурсу. Але це як зустріч по одягу. Чудова фавіконки обов'язково створить перше враження про сайт, котрі володіють до відвідування.

У чому створити favicon

Ви, звичайно можете спробувати знайти готовий файл favicon.ico на сайті www.iconfinder.com, але думаю багатьом хотілося б зробити щось своє. Адже саме фавіконки виділятиме ваш сайт в пошуковій видачі. Про те як це зробити ви зараз знаєте. Отже, приступимо.

Існує маса програм і сервісів. Можна скористатися, наприклад, за допомогою інструменту Favicon Generator, можна легко перетворити будь-який GIF, PNG або JPEG в ICO, який підтримується всіма сучасними браузерами. Програма також дозволяє створювати фавіконки «з нуля» за допомогою зручного онлайн-редактора.

Створення фавіконки онлайн

Якщо попередній варіант з яких-небудь причин вас не влаштовує, то можете спробувати швидкий, легкий і простий спосіб і зробити фавіконки за кілька хвилин за допомогою сервісу Logaster .

Logaster - це онлайн-сервіс для створення логотипів і елементів фірмового стилю. У ньому ви в автоматизованому режимі, буквально в кілька кліків, отримаєте іконку для сайту в форматі ICO і PNG.

Але врахуйте, що ніякої автоматичний генератор логотипів не може замінити творчість людини.

Звичайно, великі компанії такими інструментами користуватися не будуть. Вони знайдуть дорогого дизайнера, який створить для них професійний логотип. Але, невеликим фірмам, приватним підприємцям такий інструмент може бути якраз до речі.

Як відбувається процес створення іконки в Логастер

1. Щоб фавіконки поєднувалася з вашим логотипом, вам буде запропоновано спочатку створити логотип (це безкоштовно).
2. Напишіть назву і, якщо хочете, слоган, вказуєте вид діяльності, а Logaster самостійно підготує для вас безліч варіантів логотипів.
3. Вибираєте відповідний логотип, ви зможете змінити його пізніше.

Ось що у мене вийшло

Тепер можна натиснути на кнопочку «Завантажити логотип». У безкоштовної версії на ньому буде водяна напис Logaster.com

Логотип можна купити. Після цього ви зможете скачати в обраному форматі (PNG, JPEG, PDF, SVG) і розмірі (1024 px, 5000 px).

Тепер переходимо безпосередньо до створення фавіконки.

1. Знову-таки вибираєте вподобаний варіант.
2. Можете змінити форму, зробивши її квадратної, з закругленими кутами, круглої або взагалі не вписувати її в певну форму.
3. При бажанні додайте цвітну обведення, клікнувши на інструмент «Обведення».
4. Натисніть на кнопку «Зберегти».

Ось яка вийшла фавіконки. В принципі, виглядає непогано.

Як додати фавіконки на свій сайт

1. Купуйте і активуйте фавіконки.
2. Скачайте її.
3. Разархівіруйте скачаний файл в кореневу папку вашого сайту.
4. Вставте цей код на всі сторінки сайту в тег <head>:

Дизайн-пакет зі знижкою

Додатково ви можете придбати весь комплект фірмового стилю. Ось один з варіантів.

Плагін для створення фавіконок

Існує величезна кількість різних програм для створення фавіконок. В основному вони є примітивними, що дозволяють створити іконки, використовуючи при цьому 16 кольорів.

Створити фавіконки можна прямо в Фотошопі. Для цього знадобиться плагін, який можна завантажити за адресою www.telegraphics.com.au. Для його установки, скопіюйте файл ICOFormat.8bi в директорію c: Program FilesAdobeAdobe Photoshop CS2Plug-InsFile Formats.

За допомогою плагіна ICOFormat.8bi, ви зможете зберігати картинки у вигляді «.ico-файлів».

1. 64-bit Windows (Vista / Windows 7):
   • Restart before installing;
   • Покласти плагін в папку C: Program FilesAdobePhotoshopPlug-InsFile Formats, але у мене інша структура, у мене цей файл зберігається тут: C: Program FilesAdobeAdobe Photoshop CS6 (64 Bit) Plug-ins.
   • If you are running on a 64-bit Windows system and are launching the 64-bit version of Photoshop CS4 or CS5, download the 64-bit version of the plugin and put it in the Plug -Ins folder corresponding to 64-bit Photoshop ( ie, the one in «Program Files» not «Program Files (x86)»).
2. Move the plugin into the «File Formats» folder inside your Photoshop Plugins folder:
   • For Windows (32-bit), ICOFormat.8bi
   • For Windows (64-bit), ICOFormat64.8bi
   • For Mac OS X, ICOFormat.plugin (note that separate versions are provided for CS2, CS3 / 4 and CS5)
   • For Mac OS X / Classic, icoformat
   • For 68K MacOS, icoformat (68K)
3. If using Corel PSP Photo X2, put the plugin in C: Program FilesCorelCorel Paint Shop Pro Photo X2LanguagesENPlugIns
4. Quit and relaunch Photoshop, if it's already running.

Є ще онлайн-сервіс www.convertico.com. ConvertICO це безкоштовний онлайн-конвертер файлів ICO / PNG. Він працює швидко і простий у використанні. Він використовується для перетворення піктограм на робочому столі, іконок додатків, а також фавіконок для веб-сайтів.

Як зробити favicon.ico самому

1. Відкрити Фотошоп.
2. Створити документ 32 × 32 пікселів.
3. Вставити з ілюстраторів смарт-об'єкт готового зображення.
4. За допомогою команди «Зберегти як» зберегти фавіконки в форматі .ICO *.
5. Отриману фавіконки завантажити в корінь сайту і підключити через тему Вордпресс, або руками прописати в шаблон сайту. Про те як підключати favicon , Я вже писав раніше.

* Якщо у вас не встановлений спеціальний плагін ICO (Windows Icon) Format, можете завантажити його з сайту www.telegraphics.com.au/sw/. Там є для Маков, Вінди 32, 64-розрядних з підтримкою всіх версій Photoshop, включаючи CS6.

відображення favicon

Щоб ваш сайт відображав фавіконки, її можна просто розташувати в корені сайту. Браузер і пошукові системи самі визначать, що у вас є файл favicon.ico і будуть її відображати автоматично. Даний спосіб є найпростішим і він дієвий в 95% випадків. Але, можна і явно підключити фавіконки.

Як підключити favicon

Фавіконки підключається за допомогою метатега <link> c зазначенням відповідних атрибутів.

Після створення favicon збережіть його в кореневому каталозі вашого сайту. Потім включите наступний код в секції <head> документа HTML.

де:

• Атрибут rel означає, що це іконка для сайту; може містити і «shortcut icon» (при цьому Microsoft Internet Explorer буде реагувати на рядок «shortcut icon», а браузери, що відповідають стандартам - на слово «icon»)
• href містить абсолютний або відносний URL до файлу, де він розміщений.
• Форматом файлу може бути png або gif, розміром 16 × 16 або 32 × 32 і з 8-бітної або 24-бітної глибиною кольору.

У деяких темах підключення відбувається програмно, за допомогою php-коду:

Як перевірити коректність установки фавіконки

Перейдіть по посиланню нижче і замість www.fortress-design.com напишіть адресу свого сайту

http://favicon.yandex.net/favicon/ www.fortress-design.com

Можливі проблеми

Бувають проблеми з фавіконки в Яндексі - Веб-майстер її чомусь не бачить. На що підтримка відповідає таким листом:

додаткові сервіси

• Favicon Editor
• Сервіс для створення favicon www.genfavicon.com