Как сделать иконку для сайта. Как установить Favicon на сайт

Приветствую вас, читатели Seo bloga Fomika! Сегодня поговорим о FaviconФавикон для сайтаЧто это такое и зачем он нужен для блога?

как сделать иконку для сайта

Как создать его и установить на блог? Обо всём этом будет сегодняшний пост.

Итак,что такое Фавикон? Это Иконка блога (сайта). Сегодня переоценить эту мелочь невозможно. Это визитная карточка блога, это то что отличает блог от миллионов других. Вот в поиске Яндекса Фавиконы сайтов выводятся и это имеет большое значение (я считаю). Сайт сразу может запомниться яркой, интересной, непосредственной иконкой.

Фавикон

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

Favicon можно взять готовый со специальных сервисов, сделать его из готового рисунка (изображения), а можно создать его самому.

Как и где создать Фавикон для сайта

Сервис по созданию Фавиконов — favicon.cc поможет создать вам свою уникальную иконку для сайта. Регистрироваться на этом сервисе не обязательно.

Он на английском языке к сожалению, но если вы работаете на Гугл Хром (как я), то он быстро переведёт вам эту страничку. Там в принципе нет ничего сложного. Выбираете цвет фавикончика и рисуете его, тыкая курсором в квадратики)))

Можно:

  1. Создать Favicon из готового изображения;
  2. Посмотреть последние созданные Favicon;
  3. Посмотреть лучшие фавиконы (и я не думаю что вы захотите ставить себе на сайт чей-то фавик, хотя дело ваше)

Под цифрой 4 я обозначил стирательную резинку(ставьте галочку  и стирайте) и под цифрой 5 можно передвинуть фавикон. Вообщем всё там очень просто.

Очень удобно работать над созданием фавика на этом сервисе, потому что рисуя его, он автоматически отображается в окошке чуть ниже.

Загрузить только что созданный вами фавикончик вы сможете нажав на кнопку Download Favicon

Идём дальше. Ещё один сервис для создания фавиконов — favicon.ru Это к счастью русский сервис, разберётесь без перевода.

Всё предельно ясно. Выбираете файл картинки из своего компьютера (размер картинки не должен превышать 300Кв), либо указываете адрес картинки в интернете и нажимаете/Создать фавикон/, после чего этот сервис выдаёт вам результат вашего фавика.

Дальше вы можете/Обрезать картинку/ и /Редактировать картинку/ ну и конечно /Создать ещё одну картинку/

Ещё Список сервисов Онлайн-генераторов иконок для сайта:

  1. favicon-generator.org
  2. degraeve.com
  3. favicongenerator.com
  4. antifavicon.com
  5. chami.com
  6. webscriptlab.com

Если же вы не хотите заморачиваться с созданием иконки, тогда можно тупо скачать уже готовый фавикон с различных сервисов, таких как:

  • iconj.com — сервис с огромной базой иконок. Также имеется возможность сгенерировать  (создать из уже имеющегося изображения) иконку и создать анимационный фавик-вкладка Animated Favicon
  • favicon.co.uk — тоже огромная база готовых иконок для сайта

Как установить Фавикон на сайт под управлением движка WordPress

Как я уже говорил выше,из поисковых систем, изображение Favicon в результатах поиска выдаёт только Яндекс. Для этого они создали специального робота, в задачи которого входит сбор информации о фавиконе. Этот робот индексирует фавиконы, обновляет информацию о них. Режим работы этого робота применимо к любому сайту — от несколько дней до 1 месяца.

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

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

Итак, давайте прикрепим наш фавикон к сайту. Теория такая: — Нужно файл фавикона положить в корневую папку вашего блога(сайта). Для этого нужно подключиться к вашему хостингу через Ftp клиент FileZilla и закачать ваш фавикон в папку public html.

Теперь перезагрузите страницу вашего сайта и посмотрите, появился фавикон или нет? Если вы меняли фавикон на другой, а после перезагрузки страницы он не сменился, то попробуйте очистить кэш вашего браузера.

Если это не помогло, тогда нужно прописать специальный код в соответствующем файле header.php вашего шаблона WordPress. Эту строчку кода нужно вставить между открывающими и закрывающими тегами HEAD. У меня вставлено сразу после открывающего тега HEAD.

<head>
 <link rel="shortcut icon"
 href="http://dengi-iz-ineta.ru/favicon.ico" type="image/x-icon" />
 <link rel="icon" href="http://dengi-iz-ineta.ru/favicon.ico" type="image/x-icon" />

Как прописать код в файле header.php? Можете скопировать эти строчки, только поменяйте адрес сайта на свой.

Для этого нужно также зайти на хостинг через Ftp клиент FileZilla и с помощью Notepad++  открыть файл header.php, который находится в папке с вашей темой -wp-content/themes/Папка с вашей темой оформления/ и после открывающего тега HEAD вставить туда этот код.

Как установить анимированный фавикон для сайта?

Ответ: — абсолютно также как мы устанавливали обычный фавикон. Отличие лишь в том что у файла будет другое расширение — GIF, а следовательно изменится и наш код.

<head>
<link rel="shortcut icon"
href="http://dengi-iz-ineta.ru/favicon.gif" type="image/gif" />
<link rel="icon" href="http://dengi-iz-ineta.ru/favicon.gif" type="image/gif" />

Яндекс, загружая ваш анимированный фавикон будет преобразовывать формат GIF в статичный PNG, поэтому в выдаче этого поисковика все иконки сайтов не двигаются… Хочу напомнить что анимированная иконка будет отображаться только в браузере FireFox.

И не забудьте подписаться на обновления блога, чтобы не пропустить всё самое интересное в мире блоговедения и онлайн-заработка.

С уважением, Алексей Фомицкий.


Понравилась статья - поделись с друзьями!



Просмотр

Подпишитесь на обновления блога по почте :

Количество читателей блога


К записи "Как сделать иконку для сайта. Как установить Favicon на сайт" 29 комментариев Самый активный комментатор в конце месяца получает денежный приз.

  1. WPixel.ru:

    в принципе в хедере можно и не прописывать путь к фавику,WP как правило на автомате его подхватывает сам

    [Ответить]

    Алексей Фомицкий Reply:

    Ну мало ли что.Может тема не пропустит или ещё что.Даю ответы на все случаи жизни 😀

    [Ответить]

    Андрей Reply:

    Для меня основная проблема при «рисовании иконки» :
    нарисовать так чтобы красиво получилось…
    Выходила одна ерунда.
    есть ли какие-то технологие создания красивых иконок на этом ресурсе?

    [Ответить]

    Алексей Фомицкий Reply:

    Насчёт технологии рисования-не знаю.Думаю-это чистый эксперимент…Проще сделать фавикон из готового своего изображения…

    [Ответить]

  2. WPixel.ru:

    а как тема может не пропустить?

    [Ответить]

  3. Андрей:

    А почему Гугл не показывает иконок при выдече списка результатов поиска?
    Обидно…
    🙁 🙁 🙁

    [Ответить]

  4. Светлана:

    Алексей, я установила фавикон. Иногда отображается, иногда нет. Возможно что то не так в настройках.

    [Ответить]

    Алексей Фомицкий Reply:

    Света,если всё делали по инструкции-должен появиться.У вас на втором сайте-стоит фавикон.Как вы его устанавливали? Так же и здесь…

    [Ответить]

    Андрей Reply:

    А в каких поисковиках у Вас иконка не отображается?

    [Ответить]

    WPixel Reply:

    Я чет не увидел иконки,мож путь не правильный прописан?

    [Ответить]

  5. Светлана:

    иконку сделала, загрузила ее в в папку public html, но она не появилась…
    Значит в header.php обязательно прописывать?

    [Ответить]

    Алекс Fomik Reply:

    Сначала попробуй почистить кэш браузера, чтобы она в нём отобразилась — если ты всё правильно сделала. А в яндексе она появиться не сразу. У меня она появилась через 2-3 месяца аж в поисковике…

    [Ответить]

    Алекс Fomik Reply:

    Да, Если чистка кэша не помогла, то код пропиши в хедер…

    [Ответить]

  6. Светлана:

    Со второго раза все получилось! Спасибо большое!После года существования блога наконец-то руки дошли иконку сделать… 🙂

    [Ответить]

    Алекс Fomik Reply:

    На здоровье Света! 🙂

    [Ответить]

  7. Анна:

    Установила новый фавикон, правда есть подозрение, что моя картинка не очень-то подходит для этой цели. Зато минус еще один плагин + драгоценный опыт! А фавикон можно и переделать.

    [Ответить]

    Алекс Fomik Reply:

    Насчёт отключения плагина — это хорошо, но твой новый фавикон действительно непонятен… Извини.

    [Ответить]

    Анна Reply:

    Леш, тут не за что извиняться, я же и сама все поняла. Перепробовала много вариантов, но пока всё не то.

    [Ответить]

  8. pikasso:

    где то видел скрипт где можно менять каждый час иконки фавиконов…вы такой не встречали?

    [Ответить]

    Алекс Fomik Reply:

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

    [Ответить]

  9. Руслан:

    С нуля собираю сайт по вашим инструкциям в первый раз. Намудрил с кодом и сломал тему))) но favicon установил. Потом установил другую, ломанную удалил и скачал заново. Тема норм и favicon остался. Пол часа нервов, но все работает.

    Интересно, как так? По идее header.php должен поменяться, следовательно и ссылка на иконку.

    [Ответить]

    Алекс Fomik Reply:

    В чём ваш вопрос?

    [Ответить]

  10. Макс:

    Очень полезная информация 🙂

    [Ответить]

    Алекс Fomik Reply:

    Спасибо Макс…

    [Ответить]

  11. ЕЛЕНА:

    Ну я тупая. На первом сайтк получилось без проблем, а сейчас что то нет. И объясни пожалуйста= что значит очистить КЭШ и как?

    [Ответить]

    Алекс Fomik Reply:

    Очистить кэш браузера? Идешь в настройки своего браузера, если у тебя гуглхром, то ищешь Личные данные — Очистить историю — выбираешь — за все время, далее у меня стоит одна единственная галочка на — Изображения и другие файлы, сохраненные в кеше. Далее нажимаешь — Очистить историю. Другие браузеры мне нужно смотреть. Могу позже подсказать как в Фаерфоксе почистить кэш. Ну и если у тебя на саете стоит плагин кэширования, то и дам жми кнопку — очистить весь кэш…

    [Ответить]

    Алекс Fomik Reply:

    Кэш — это страницы в браузере, которые ты уже просмотрела. Они сохраняются там, чтобы в дальнейшем браузеру было легче показывать их тебе (быстрее идет загрузка).Также и на сайте можно установить плагин кэширования. Я писал об этом у себя. Найди в поиске по сайту эту статью и почитай…

    [Ответить]

  12. ЕЛЕНА:

    Не получалось, не знаю почему. Пришлось установить плагин Easy Favicons и сразу появилась иконка. Я вспоминю, что и на первом сайте я устанавливала при помощи плагина.

    [Ответить]

    Алекс Fomik Reply:

    Жаль, что без плагина не получилось. Лишняя нагрузка на блог…

    [Ответить]

Оставить свой комментарий