Как сделать favicon для сайта



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

Перед тем как приступить к работе по созданию иконки-фавиконки необходимо иметь у себя на компьютере готовое изображение. И не важно какого размера, в процессе сжатия оно будет стандартным (размер фавикона — 16*16 пикселей ).

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

Несколько вариантов по созданию фавиконов.

Как сделать фавикон? Можно поколдовать посредством Фотошопа, взять любую картинку и преобразовать её в фавикон, через онлайн-генератор, или использовать коллекция готовых фавиконов онлайн-сервиса. Я решил попробовать создать своё изображение через фотошоп. Сделал, сохранил у себя на ноутбуке и пошел искать хороший онлайн сервис по изготовлению фавикончиков. Но только с третьей попытки все удалось! И вот по какой причине…

Итак, первым мне попался сайт favicon.ru – простой и понятный сервис, только вот миниатюрка при сжатии получилась не очень… Пробовал дважды – однофигственно тот же результат. Изображение некачественное, будто изжеванное. Мне не понравилось и я ушел.

Следующий сайт – favicon.by – зайдя сюда я понял, что здесь все запущенно и грустно. Ожидал большего – а картинка нечеткая. Единственный плюс это то, что тут можно создать анимированный фавикон. Но для меня он был таким же – унылым, короче  я ушел.

Сделать фавикон онлайн на favicon.htmlkit.com – очень просто, данный сервис меня порадовал, загруженную картинку сделал четкую, именно такую мне и хотелось получить на выходе. Анимированный фавикон получается такой же шикарный, только вот мне он без надобности – я предпочёл статическое изображение.

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

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

Коллекция фавиконовwww.iconj.com – сайт, на котором располагается внушительная база готовых фавиконов – привожу Вам в качестве примера. Походил, посмотрел — есть много интересных экземплярчиков…

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

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

1. Сохраненный файл favicon.ico переносим с компьютера на хостинг в корневую папку public_html или httpdocs (в моем случае), все зависит от хостинга.

2. Идем по такому пути: wp-content/themes/тема вашего блога/header.php Здесь между тегами <head> и </head> нужно вставить следующий код.

Код будет таким — смотрите скрин ниже:

код вывода фавикона

Быстро скачать код можно здесь.

Я его вставил прямо перед закрывающим тегом </head>. В двух местах в коде встречается «мой_сайт» поменяйте на адрес своего сайта. Обязательно сохраните изменения файла header.php – нажав кнопку «сохранить».

В общем то и все, но у меня в теме моего блога так же присутствует файл favicon, видите его на скрине? Я заменил ту иконку на свою. Всё!

Обновите текущую страницу – все стало как надо! Теперь Вы знаете, как сделать фавикон для сайта.

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

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

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

На этом всё, до скорого!

Удачи Вам!!!



Обратите внимание на следующие статьи...

9 Комментарии к статье “Как сделать favicon для сайта
  1. Вас можно похвалить за наглядное представление по установке фавикона. Вот у меня немного по другому написано. Наверное не настолько детально. Буду у вас учиться как лучше статьи выводить...

  2. Спасибо Elenka. Вспоминая «те» времена, когда самому многое было не понятно — не хватало подробностей, приходилось «скакать» с одного сайта на другой и собирать интересующий меня материал буквально по крупицам. 😎

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

  3. Спасибо. Все очень понятно и работает. И не надо плагином утяжелять сайт. :smile: Еще раз спасибо и удачи!

  4. Да, Вы правы Виктория здесь плагином пользоваться попросту говоря незачем — всё очень просто реализовать. 😉

  5. Здравствуйте!!! как перенести сохраненный файл в корневую папку public_html или httpdocs? Скажите где находится эта папка? не могу разобраться!!!

  6. Здравствуйте Наташа! Корневая папка — это основная папка находящаяся на Вашем хостинге. Войдя в эту папку увидите такие файлы и папки, как на скриншоте выше... Перенести можно при помощи FTP клиента (программа), или в ручном режиме перейдя на свой хостинг в раздел «мои сайты» — по крайней мере так у меня. :)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *