Как сделать фавикон и поставить его на сайт

 

Доброго времени суток, уважаемые читатели. Продолжим разговор про создание красивого функционального блога, и сегодня мы рассмотрим, как сделать фавикон и установить его на сайт.

Думаю, что не все знают, что такое фавикон (favicon). Фавикон – это иконка, которая располагается рядом с названием статьи в заголовке браузера и отображается рядом с вашим сайтом в поисковой выдаче.

На фото favicon показан стрелками.

Для чего он вообще нужен. Есть несколько причин, почему фавикон необходимо ставить. Во-первых, уникальная иконка выделит ваш сайт среди тысяч подобных и придаст ему солидный вид. Во-вторых, увеличит кликабельность по вашим страницам в поисковой выдаче.

 

Как сделать фавикон

Итак, существует несколько способов создания иконки для вашего сайта.

1. Использование различных online генераторов:

favicon.ru
favicon.cc
genfavicon.com
favicon-generator.org
favicongenerator.com
antifavicon.com

Это, пожалуй, самые удобные сервисы для создания иконок. При помощи них можно загрузить любое изображение с вашего жесткого диска и переконвертировать в фавикон. Кроме того, в некоторых их них можно нарисовать иконку самостоятельно. Я использовал сервис favicon.cc для создания иконки этого сайта. На все про все у меня ушло ровно две минуты.

Напомню, что иконка должна быть определенного размера (16×16 пикселей) и иметь расширение ico. Последний сервис antifavicon.com предназначен специально для создания текстовых иконок.

 

2. Использование сервисов готовых иконок

Здесь все просто. Идете на сайт с базой иконок и скачиваете понравившуюся. Существенный минус этого способа – отсутствие уникальности (несколько пользователей могут установить на свои сайты одинаковые иконки, а это не очень хорошо для имиджа сайта). И вообще, если вы всерьез решили заняться блоггингом, то у вас все должно быть уникальным, то есть сделанным самостоятельно, либо заказанным у профессионалов.

Вот небольшой список сервисов:

audit4web.ru
iconj.com
favicon.co.uk
favicon.cc

 

3. Создание иконки при помощи фотошопа

Здесь тоже ничего сложного нет. Создаем новый файл размером 16 на 16 пикселей.

Увеличиваем его при помощи лупы и рисуем иконку.

Затем нажимаем сохранить как, в выпадающем окне выбираем расширение jpg, а в названии файла в ручную меняем jpg на ico. Сохраняем файл у себя на компьютере. Файл должен называться favicon.ico.

Итак, мы создали (нарисовали, сгенерировали, скачали) иконку для нашего сайта. Теперь необходимо установить ее на сайт. Как это сделать.

 

Как установить фавикон на сайт

Во-первых, полученную иконку надо закинуть на хостинг в корневую папку вашего сайта. Это можно сделать через FTP-клиент FileZilla, или через панель администратора вашего хостинга. Если вы не знаете, как это сделать, советую подписаться на обновления блога, вскоре мы подробно рассмотрим эти вопросы.

Надеюсь, с первой задачей вы справились. Теперь необходимо сообщить движку вашего блога о том, где находится файл-иконка. Для этого в файле header.php между тегами <head> и </head> нужно вставить следующий код:

<link rel="shortcut icon" href="http://адрес_вашего_сайта/favicon.ico" type="image/x-icon" />
<link rel="icon" href="http://адрес_вашего_сайта/favicon.ico" type="image/x-icon" />

На картинке это выглядит следующим образом:

Файл header.php находится в папке с темой вашего блога (/ваш сайт.ru/public_html/wp-content/themes/ваша тема/). Открывать его надо в текстовом редакторе. Я пользуюсь программой Notepad++. Очень удобная программа, всем ее рекомендую. Скачивать и закачивать файл header.php надо так же через панель администратора или FTP-клиент.

Теперь вы знаете, как сделать фавикон самостоятельно, где его скачать и как установить на свой блог. В скором будущем мы рассмотрим, как можно изменить дизайн вашего блога до неузнаваемости. Так что советую подписаться на обновления блога и получать свежие статьи на свою почту.

С уважением, Данил Новоселов

 

Интересные темы:

Создаем карту сайта
Как установить кнопки социальных сетей
Ставим на сайт поиск от Яндекса

 

 

34 comments к Как сделать фавикон и поставить его на сайт

  1. Сергей:

    Спасибо за информацию. Тоже сделал себе отличный фавикон при помощи favicon.cc

  2. Тоже собираюсь сделать фавикон. Спасибо за подборку сервисов!

  3. Здесь я могу быть спокоен. Потому что фавикон на моем сайте уже стоит. А у кого фавикона до сих пор нет, значит, ставьте. Фавикон — небольшой элемент, но он позволяет выделяться на фоне других. Ставьте.

     

  4. Creeper:

    Самое легкое, конечно, выбрать уже готовый фавикон среди множества наборов и галерей в сети.

    • Да, конечно, можно выбрать готовый. Но это плохой вариант. Я так думаю. Отвечу почему: если человек ведет свой сайт, он должен сделать его максимально уникальным: статьи должны быть уникальными, картинки уникальными, инфопродукты тоже уникальными.  Фавикон тоже сюда входит. Короче, уникальность рулит по полной программе. Согласны? Может быть кто-то со мной поспорит?

      • Вадим!

        Вы, как всегда правы!

        Да и кто же осмелится оспаривать прописные истины? Разве что только не шибко умный и  потом этот — «комментатор», который стремится нагнать комментарии

    • А мне кажется лучше сделать самому, тогда он будет действительно уникальным, а если взять из сети есть очень большая вероятность, что он будет где-то повторятся, а это, я считаю, не очень-то хорошо.

      • Виталий!

        Вероятность  того, что он будет где-то повторятся станет равна нулю, если Вы

         прочитаете и внимательно данную статью и обратите внимание на фразу

        «При помощи них можно загрузить любое изображение с вашего жесткого диска и переконвертировать в фавикон.»

         

  5. Лилия:

    Выбрать образ фавикона, такая же трудность, как создать логотип. Не знаешь на чем остановить свой выбор...

    • Большой выбор — не всегда плюс :) Все время сомнения мучают :)

    • Да нет с логотипом конечно дело труднее, но с фавиконом тоже нужно по мудрить, чтобы выбрать что-то достойное, с этим я согласен. 

    • У меня выбор занял минут 15 :)

      • У Сергея эта мудрость   заняла минут 15, а у меня и того меньше.

         И с логотипом конечно же трудность надуманная, Существует ряд онлайн сервисов, в которых можно сделать приличный логотип.

        Если заранее решить, кем хочешь быть — умным или красивым, то логотип делается минут 25.

    • А фавикон не может быть логотипом (или наоборот)? Какие-то чёткие отличия между ними есть?

      • Ирина!

        Для фавикона   можно использовать картинку  логотипа  и  наоборот  Отличия ищите в google

        • Ирина!

          Очень сожалею, что под Ваш микроскоп исследователя не попали оба моих блога.

          Это наверное потому, что на них нет денежных интересов, т.е. конкурса комментаторов. На одном из них Вы бы нашли всё касающееся и логотипа и фавиконов.

    • Лилия!

      Есть очень старая притча.

      Когда Бог раздавал животным определённые качества, то обезьяна их не получила до сих пор. Она не смогла сделать выбор между умными и красивыми и хотела одновременно быть и умной и красивой 

  6. Авторство в Гугле я уже оформил, сегодня фавикон сделаю :)

  7. Сделал фавикон. Очень просто все оказалось. Ничего мудрить не пришлось! :)

  8. Лилия:

    Есть вроде установки фавикона через плагин. Это для тех кто не хочет заморачиваться сам.

  9. Лилия!

    Устанавливать фавикон  через плагин не целесообразно. Нормальные блогеры, а не лентяи, которым не охота заморачиваться, наоборот избавляются от плагинов, заменяя их кодами

Добавить комментарий для Александр Иванович Отменить ответ

db972060