Рубрика // Дизайн сайта 01.08.10

Как создать и как установить фавикон Favicon.ico вашему сайту.

Как создать и как установить фавикон Favicon.ico вашему сайту.Фавикон от английского — «иконка избранного». Одним словом, когда вы заходите в свой любимый браузер, то можете наблюдать маленькую картинку рядом с закладкой, а так же рядом возле поля URL адреса страницы, на которой вы находитесь. Так же можете видеть эту картинку фавикона в закладках, в табах различный интерфейсах программы, а так же когда в результатах поиска выдачи Яндекса или Гугла. Одним словом классная картинка, которая позволяет быстро ориентироваться среди десятков открытых сайтов.


Что именно такое Favicon.ico? Давайте разберемся. Прежде всего это картинка, которая может быть как и статической, так и анимационной. Favicon имеет размер 16 на 16 пикселей, но не больше. Если у вас будет больше размер, то возможно он не будет отображаться где – нибудь в меню, или не дай бог в Яндексе.
Как мне сделать свой Favicon.ico? Все довольно просто. Для того чтобы сделать собственную иконку для сайта, можно пойти двумя путями. Самостоятельно с помощью программ, или же воспользоваться специальными сервисами. Тут выбирать вам. Вот несколько программ, которые без проблем сделают все необходимое:

посещаемость сайта, статистика, анализ, как узнать, статистика посещений, показатель отказов

Программы для создания favicon

Adsen FavIcon – Программа для создания иконок. За основу рисунка, можно взять файл BMP или JPG, и переконвертировав  ее в формат ICO установить на сайт.
IcoFX – Абсолютно бесплатная программа для создания иконок. Интерфейс программы прост до неузнаваемости. У вас будет возможность нарисовать собственную икону с нуля, а можете взять готовую и изменить ее до неузнаваемости. Кроме стандартных инструментов, которые позволяет нарисовать вам иконку, у вас будет возможность наложить на нее несколько красивых эффектов. Могу сказать, что эта программа одна из лучших в своем роде.
Favicon Create – Самая простая на мой взгляд программка. Чтобы сделать иконку нам понадобится всего лишь картинка в формате *.jpg, *.jpeg, или *.bmp. Загружаем в программу, затем выбираем размер, выбираем глубину цвета, и нажимаем кнопку старт. Все готово.
Icon Empire – Пожалуй, самая мощная из всех программ,  которые я видел. Эта программа может создавать различные иконки, не только для WEB, но и для Windows. Так же программа умеет делать анимированные , да и простые курсоры с глубиной цвета до 32 бит. Можно взять за основу любой графический файл. Вот кстати скрин программы.

Как создать и как установить фавикон Favicon.ico вашему сайту.

Онлайн сервисы для создания иконок

Есть на много проще вариант, для создания долгожданной иконки. Можно не устанавливать громоздкие программы, которые загрязняют вам реестр,  а можно воспользоваться онлайн сервисом для создания сего чуда. В рунете есть несколько сервисов предлагающие нам такую услугу. И так смотрим:

www.favicon.ru – Русский сервис для создания иконок. Довольно таки качественный. Позволяет создавать favicon из картинки, которую вы загружаете в специальную форму.
www.favicon.by —  Тоже русский сервис.
html-kit.com — Английский но все понятно без слов. Загрузили  — получили.
tools.dynamicdrive.com
FaviconGenerator.com
Favicons with text instead of images
graphicsguru.com

Установка иконки на ваш сайт

И так, иконка у нас готова, пора бы и установить ее на сайт. Но для этого нам необходимо сделать несколько вещей, а именно:

1. Переименовать полученный файл в favicon.ico .
2. Скопировать полученный файл в корневую папку (обычно это —/public_html ).
3. Добавить специальный код между тегами <head></head>:


<link rel=”icon” href=”/favicon.ico” type=”image/x-icon”>
<link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon”>

На этом  наши труды по поводу создания и установки практически закончились. Если вы не увидите иконку сразу, то необходимо подождать некоторое время, пока сервер не обновит файлы. Так же это касается Яндекса. Обновление иконки в поисковой выдаче можно ждать пару дней. Так что терпим и ждем.

  • Facebook
  • Memori
  • Twitter

Теги:   

30 Комментариев к " Как создать и как установить фавикон Favicon.ico вашему сайту. "

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

  2. Спасибо, действительно понравилось!
    Молодец, что НЕ разбавил статью «водой»)

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

    Сделал для сравнения две вавиконки — в .ico и в .png.
    В формате .png качество иконки было значительно лучше, чем в .ico:
    favicon получился с красивым непокоцанным градиентом.

    Для создания favicon лучше использовать программу IrfanView с установленным плагином, в которой действительно несложно делать высококачественные favicon и прочие иконки-картинки.

    Так что стоит упомянуть в статье и о формате .png

    • Артем:

      Alexdemath, про png упустил. Будет время дополню и про этот формат. Хорошо что существуют комментарии. Благодаря им, можно узнать, чего не хватает в статье.

  3. кто подскажет по конкретнее куда вставить код для аниме фавикона.двиг joomla.

    • Артем:

      Все просто. Находите index.php вашей установленной темы. Темы находятся в папке templates. Вставляем код
      и все.

  4. это я знаю. Не просто же в любое место.

  5. просто на дно этой папки кинуть он же не будет работать

    • Артем:

      Да, кидаете иконку в корень сайта. Это папка public_html. Затем вставляете код <link rel=”icon” href=”/favicon.ico” type=”image/x-icon”> <link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon”> перед тегом </head> . Иконку нужно переименовать в favicon.ico

      • короче фавикон заработал как положено анимация а сайт не работает))))))пишет ошибку

        Fatal error: Call to a member function countModules() on a non-object in /home/zona8127/public_html/templates/pwc035_j15/functions.php on line 139

  6. Артем:

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

  7. всё там вставил. я сразу поставил на два шаблона.на другой шаблон переключил и всё заработало.и сайт тоже.может что то шаблон.ставил код в одно и тоже место.не понятно.

  8. Работал в этой программе …всё очень просто и доступно

  9. а я то думал почему оей иконки нет в яндексе а надобыло еще код разместить

  10. 3. Добавить специальный код между тегами :
    Где найти это на вордпрессе?

  11. Может ли изменение фавикона спровоцировать резкое падение посещаемости?

  12. Разместила фавикон в корневом каталоге. Сразу картинка появилась в Хроме. В Эксплорере и файр фоксе картинки нет. Сайт рисовала сама (коряво) в редакторе NVU -просто HTML. Предложенную строчку разместила как сказано, но только в файле index.html… Изменений нет- хром по-прежнему показывает фавикон, остальные системы нет((( Хоть и кэш очищала раз 10ть)))))

  13. О Ворде, разместил в корневой, индекс.php, shortcut icon,вставил код и ничего :о(

  14. Может надо вставить в код адрес сайта

  15. Спасибо за статью. Всегда пользовалась для создания иконки сервисом сайта favicon.by, а вчера обнаружила, что этот сервис начал формировать файлы с иконками размером файла больше 4х метров! Какая там уж иконка в 16 пикселей, когда это уже целый паровоз!
    Пришлось искать другие сервисы. Иконка из сайта http://www.favicon.ru не понравилась, совсем плохое качество. Пришлось воспользоваться сервисом http://tools.dynamicdrive.com/favicon/

  16. Спасибо все отлично получилось

  17. Благодарю за ваш сервис, все получилось. Радости нет предела. В поисковике Яндекс фавикон появился позже, чем в браузерах. Некоторые ждут месяцами. У меня появился через 5 дней. Яндекс говорит, что если за 2 недели не нашел обновлений на сайте, то зайдет туда для индексации уже не ранее чем через 2 месяца, а потом и того реже. Попробуйте более частое и оригинальное обновление сайта, и может будет вам счастье.

  18. VPk:

    А можно ли фавиконку разместить не в корневой папке, а в какой либо другой и в самом коде прописать адрес к файлу иконки?

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

Написать комментарий

Copyright © 2010-2011 Как создать сайт и заработать.. Все права защищены.
интернет