Разработка сайта для Вашего бизнеса. Веб дизайн. Дизайн логотипа, фирменного стиля, рекламная фотография . Комплексный рекламный креатив.

Ralex. We do the work.
На рынке с 1999го года. Средняя ценовая категория. Ориентация на эффективность решений.
Ознакомтесь с нашим портфолио
Узнайте больше о услугах
Свяжитесь с нами:
E-mail: [email protected]
Tel: (044) 587 - 84 - 78
Custom web design & дизайн и разработка сайта "под ключ"
Креативный, эффективный дизайн. Система управления сайтом (СУС).
Custom flexible разработка систем электронной коммерции
Система e-commerce разрабатывается под индивидуальные потребности. Гибкая функциональность.
Search Engine Optimzation & оптимизация под поисковые системы (SEO)
Постоянная оптимизация и мониторинг сайта в поисковых системах. Достигаем результата быстро и эффективно
Custom logo design & дизайн логотипа и фирменного стиля
Многолетний опыт. Огромное портфолио. Уникальное предложение и цена.
профессиональная рекламная фотография
креативно, смело, качественно
Custom logo design & рекламный креатив. дизайн рекламы
Многолетний опыт. Огромное портфолио. Уникальное предложение и цена.

Favicon для сайту - створення і установка

  1. Що таке іконка сайту favicon
  2. Який найшвидший спосіб отримати favicon
  3. Як створити favicon
  4. Як встановити favicon на сайт
  5. Як прописати шлях до favicon в шаблоні WordPress

Наша взаимовыгодная связь https://banwar.org/

Привіт, шановні читачі. Сьогодні, в продовження теми « самостійне створення сайту »Поговоримо про створення та встановлення іконки для Вашого сайту. Свого роду це логотип сайту або блогу, який видно в браузері і в результатах пошуку Яндекс. А називається ця ікона - Favicon (значок веб-сайту або веб-сторінки).

Favicon

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

До вищевказаних відображенням даної іконки можна додати, що ця ікона також відображається в якості картинки поруч із закладкою в браузері

І така на перший погляд дрібниця, але впадає в очі і запам'ятовується відвідувачеві. Але більш важливим є те, що ця favicon позитивно впливає на пошукову оптимізацію сайту. У Яндекса навіть є спеціальний пошуковий робот, для індексації таких іконок. І якщо у Вас буде правильно оформлена іконка favicon, це позитивно позначиться при ранжируванні Вашого сайту пошуковими системами. І якщо у Вас ще немає іконки favicon, Ви просто зобов'язані виправити цей недолік. Але для початку трохи теорії.

Що таке іконка сайту favicon

За замовчуванням - це маленьке зображення з розміром сторін 16х16 пікселів, формату ICO. Тобто це файл favicon.ico, розташований в кореневій папці сайту. Виявивши цей файл в кореневій папці сайту, багато сучасних браузерів здатні відображати зображення іконки без внесення змін до коду шаблону Вашого сайту.

Але сучасні браузери здатні відображати іконки не тільки формату ICO але і PNG, GIF, JPEG, а також анімовані GIF. Але для цього в шаблон вашого сайту буде потрібно прописати невелику Сточки коду. Але про все по порядку.

Який найшвидший спосіб отримати favicon

Безумовно, існує кілька способів створення іконки для сайту, як самостійно, так і на замовлення. Але ми розглянемо самостійний спосіб створення фавікон.

Якщо Ви творча особистість і у Вас є здібності до образотворчого мистецтва, то безумовно Вам підійде спосіб створення іконки в графічному редакторі Photoshop, де Ви зможете створити будь-яку іконку. Але от не задача, Photoshop не може зберігати зображення у форматі ICO, але це зовсім не проблема і далі Ви все зрозумієте.

Також є можливість створити іконку favicon для сайту на безкоштовних онлайн сервісах. Таких сервісів досить багато, з ними легко працювати і у них є ряд переваг. І я розповім Вам як комбінувати можливості Photoshop і онлайн генераторів зі створення favicon.

А взагалі Ви можете завантажити з Інтернету вже готові іконки і вибрати для себе відповідну. У мережі зараз величезна безліч колекцій favicon і набравши в пошуку запит, Ви знайдете безліч таких іконок. Ось приклад, де я найчастіше знаходжу потрібні мені іконки:

IconFinder - відмінний ресурс для підбору іконок, не тільки в якості favicon але і для інших цілей. Наприклад, для категорій, рубрик, контактів і багато іншого. Тут можна вибрати один з декількох форматів і завантажити іконку. Пропонуються як платні, так і безкоштовні варіанти.

Як створити favicon

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

Крок 1. Пошук підходящої іконки

Для пошуку я скористаюся вже згаданим трохи вище сервісом IconFinder і знайду іконку скажімо для сайту займається популяризацією електронної музики.

Для цього в поле пошуку, вводимо запит і натискаємо кнопку Search (Пошук). Врахуйте, запит теж необхідно робити на англійській мові, але це я думаю не проблема, адже є перекладач від Гугла :-).

Мені сподобалася гітара, зазначена на скріншоті.

Мені сподобалася гітара, зазначена на скріншоті

Тепер потрібно вибрати потрібний нам розмір 16х16 пікселів, формат ICO і зберігаємо іконку на свій комп'ютер.

Тепер потрібно вибрати потрібний нам розмір 16х16 пікселів, формат ICO і зберігаємо іконку на свій комп'ютер

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

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

Крок 2. Створення favicon

Якщо Ви завантажили іконку потрібного Вам розміру і формату (16х16, ICO), то Вам достатньо перейменувати скачаний файл в файл ось такого виду: favicon.ico

Якщо ж у Вас зображення великого розміру, тоді буде потрібно спеціальний онлайн сервіс для перетворення Вашого зображення в стандартний favicon.ico. І як я вже говорив таких сервісів багато, але я покажу приклад на одному сервісі, який знаходиться на першому місці в пошуковій видачі Гугла при запиті «favicon генератор».

Отже, переходимо на головну сторінку цього генератора favicon.ico Generator .

Цей сервіс дозволяє створити іконку з нуля, намалювавши її прямо в спеціально відведеному віконці. Приклад моєї творчості нижче:

Приклад моєї творчості нижче:

Також тут є можливість знайти і завантажити іконку. Для цього буде потрібно підібрати іконку і завантажити на свій комп'ютер.

Для цього буде потрібно підібрати іконку і завантажити на свій комп'ютер

Але нас цікавить ще вона можливість даного генератора - це перетворення нашого, заздалегідь підібраного зображення в іконку favicon. Для цього переходимо на вкладку Import Image і завантажуємо потрібне для перетворення зображення. У нашому випадку, це гітара.

У нашому випадку, це гітара

Тепер, Ви можете, якщо це необхідно внести коректування і зберегти готовий favicon на свій комп'ютер.

Тепер, Ви можете, якщо це необхідно внести коректування і зберегти готовий favicon на свій комп'ютер

Тепер, коли у нас є готовий favicon.ico, треба цей файл скопіювати в кореневу папку вашого сайту.

Як встановити favicon на сайт

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

Але як же скопіювати файл на сайт? Для цього можна використовувати FTP з'єднання в будь-якому з файлових менеджерів (Total Commander або FileZilla). А також можна використовувати файловий менеджер в панелі управління Вашого хостингу. Приклад використання файлового менеджера на хостингу, можна подивитися тут .

Я ж використовую для таких цілей файловий менеджер Total Commander. Для початку потрібно налаштувати FTP з'єднання:

Для настройки Вам будуть потрібні дані, які Ви отримали в листі від Вашого хостинг-провайдера. А точніше, це ім'я сервера або порт для підключення і логін і пароль на FTP підключення.

Після установки з'єднання, підключаємося до сайту.

Після установки з'єднання, підключаємося до сайту

Тепер потрібно відкрити папку Вашого сайту, як правило, це / public_html / папка вашого сайту / і скопіювати в цю папку файл favicon.ico.

ico

Як тільки файл скопійований, можна оновлювати сторінку Вашого сайту в браузері і насолоджуватися іконкою. Правда іноді буває, що іконка відразу не відображається, для цього треба скинути кеш браузера і оновити сторінку сайту знову. Ось приклад очищення кешу в браузері Firefox, відкрийте настройки і виконайте запропоновані дії.

Ось приклад очищення кешу в браузері Firefox, відкрийте настройки і виконайте запропоновані дії

Як прописати шлях до favicon в шаблоні WordPress

Для початку відкриваємо адміністративну панель WordPress і переходимо в розділ «Зовнішній вигляд» - «Редактор». Де потрібно відкрити файл заголовка (header.php) і вставити ось такий код:

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

між тегами <head> ... </ head>

За великим рахунком це все. Але слід розповісти ще про декілька можливості установки favicon.ico. Так якщо Ви захочете встановити іконку в форматі GIF, PNG або JPEG, слід додати тип файлу в вищевказаний код. До речі, Ви також можете встановити анімований favicon в форматі GIF. Але така іконка буде, рухатися тільки в браузері Firefox. І надійніше буде прописати в коді шаблону другий шлях до іконки в форматі ICO.

приклади:

іконка в форматі PNG

<Link href = "/ image.png" rel = "icon" type = "image / png" />

іконка в форматі GIF

<Link href = "/ ikonka.gif" rel = "shortcut icon" type = "image / gif" />

Вам не обов'язково використовувати ім'я файлу favicon. Досить правильно вказати тип файлу (type) і шлях до цього файлу (href)

<Link href = "/ site / image / ico.png" rel = "shortcut icon" type = "image / png" />

Так само можна вказувати абсолютний URL до файлу іконки, і завантажити цей файл з іншого сайту.

<Link href = "http://timvet.ru/img/icon.png" rel = "shortcut icon" type = "image / png" />

Ось тепер ніби все. Якщо, що упустив, прошу, додайте в коментарях. Бажаю удачі з установкою favicon.

PS У WordPress всі описані маніпуляції в цій статті, можна зробити в два кліка використовую спеціальні плагіни, наприклад Favicons. Ці плагіни Ви без праці відшукайте в пошуковику. Але я все ж не прихильник великої кількості плагінів, так як кожен з них надає додаткове навантаження на сервер.

З повагою, Максим Зайцев.

Але як же скопіювати файл на сайт?
Категории
  • Биология
  • Математика
  • Краеведению
  • Лечебная
  • Наука
  • Физике
  • Природоведение
  • Информатика
  • Новости

  • Новости
    https://banwar.org/
    Наша взаимовыгодная связь https://banwar.org/. Запустив новый сайт, "Пари Матч" обещает своим клиентам незабываемый опыт и возможность выиграть крупные суммы.


    Наши клиенты
    Клиенты

    Быстрая связь

    Тел.: (044) 587-84-78
    E-mail: [email protected]

    Имя:
    E-mail:
    Телефон:
    Вопрос\Комментарий: