Доброго времени суток, уважаемый читатель блога inetsovety.ru! В этой статье я расскажу как создать и установить фавикон на сайт. Мы рассмотрим сайт генератор favicon.ico и подборки готовых иконок для скачивания.
Что такое фавикон для сайта и зачем он нужен?
Favicon (фавиконка) - это картинка, изображение которой показывается перед адресом сайта в адресной строке, а также слева от названия сайта на вкладке браузера. Размеры favicon 16 на 16 пикселей. Наглядно смотрите на картинке:
Фавикон обычно служит логотипом проекта. По-этому необходимо подбирать картинку для фавикона по теме Вашего сайта.
Как сделать фавикон из картинки онлайн
Чтобы создать иконку ico онлайн, переходим на сервис генератор favicon из подобранной картинки - .
Загружайте на сайт свою картинку. Кликаете "создать Favicon" и потом нажимайте на кнопку "Скачать favicon.ico". Выбирайте картинку по крупнее и квадратного размера, так как размер фавиконки очень маленький, и если на большой картинке хорошо просматривались мелкие детали, то на иконке они будут незаметны. Как будет отображаться ваша картинка в строке браузера показано на примере.
Как видите, создать иконку для сайта дело одной минуты. Дольше будете думать над идеей и подбирать подходящее изображение.
Где скачать готовый favicon.ico для сайта
Если Вы не хотите самостоятельно создавать иконку favicon, то Вы можете скачать готовые фавиконы из следующих сайтов:
- - для скачивания favicon нажмите ICO напротив выбранной картинки.
- - введите в поле поиска ключевое слово по тематике, на понравившуюся картинку нажмите правой кнопкой мыши, скачанную картинку переименуйте, как favicon.ico
- - еще один сервис, содержащий множество иконок favicon для скачивания. Аналогично предыдущему сайту, сохраните картинку на компьютер и переименуйте ее.
Как установить favicon на сайт
Того, чтобы поставить иконку favicon, необходимо полученный файл favicon.ico загрузить на хостинг. Для этого через FTP клиент загрузите файл иконки в корневую папку Вашего сайта(это папка в которой находятся файлы index.php, sitemap.xml, а также основные папки wp-admin, wp-content). Подробно, где найти корневую папку сайта на хостинге читайте в статье по ссылке https://inetsovety.ru/kornevoy-katalog-sayta/
После этого в админке выберите из меню Внешний вид - Редактор. Откройте файл header.php, так как именно он отвечает за верхнюю часть сайта. В этот файл необходимо вставить следующий код:
<link rel="shortcut icon" href="http://inetsovety.ru/favicon.ico" type="image/x-icon" />
<link rel="icon" href="http://inetsovety.ru/favicon.ico" type="image/x-icon" />
Замените адрес моего блога inetsovety.ru, адресом своего блога. Данный код вставляйте то место, где увидите такие строчки <link rel=......./>
Сохраните изменения в файле шаблона header.php. Обновите страницу и фавикон должен поставиться. Если в текущем браузере фавикон не отобразился, то попробуйте открыть свой сайт через другой браузер. У меня, например, в браузере Мозилла иконка отобразилаь только после перезапуска браузера, хотя у других браузерах все работало сразу же после установки. Если же favicon не отображается ни в одном из браузеров, значит Вы сделали что-то не так.
Мы рассмотрели, как сделать иконку фавикон для сайта и добавить ее отображение в браузере. Если у вас остались вопросы, задавайте их в комментариях.
Без проблем положил фавиконку в корневую папку и без прописки кодов он появился на вкладке.
Я рисую их только в фотошопе,опять же повторюсь, люблю всё своё родное)) Ведь создавая логотип сайта,блога, Вы не будете скачивать чьи-то картинки, особенно если делать для души, если для конвеера,то, можно конечно и не заморачиваться… И создав логотип, по идее и иконка должна соответствовать ему…
Для тех, кто не владеет фотошопом favicon.ru будет очень хорошим вариантом — в нем можно не только делать фавикон из картинки, но легко и просто рисовать самому
Надо попробовать, у меня блогу второй год и я как-то не заморачивалась по поводу наличия-отсутствия фавикона, я их абсолютно не замечаю, не зависимо от того, нравится мне сайт или нет.
А вы обращаете внимание на фавиконы сайтов-блогов, которые читаете?
Лично я обращаю внимание и запомнившиеся фавиконки в поисковике в доль статьи быстрее выбираю
Сервисом проще создать собственный фавикон, не надо усложнять простые действия.
Sergey, не один фотошоп предоставляет такую возможность. кто к какой программе привык, тот и делает фавикон в ней.
Очень приятно, когда видишь реальные лица своих комментаторов. Не понимаю тех, кто пытается скрываться на картинками.
На фавиконе не обязательно изображать лицо. Фавикон имеет ограниченный размер по пикселям, лицо не разглядеть. Вы путаете его с аватаром.
А у меня фавикон в виде желудя. все получилось. Спасибо!
В корень сайта я загрузил favicon.ico в папку public/html и у меня сразу начал отображаться favicon в браузере.
А при чем здесь header.php и отображение фавикона в браузере на компьютере?
Может я что-то не понимаю, но у меня отображается фавикон безо всяких вставок кода. Поэтому и задал вопрос, но вопрос так и остался без ответа. Извините за беспокойство.
Да у Вас в коде действительно нет этих строк для вывода фавикона. Непонятно как-то. У Вас в корне сайта есть файл фавикона?
Поясните пожалуйста для чего нужны манипуляции с кодом? Он что не вставляется без вставки кода? Или у кого как? Если это так, то чем это вызвано?
С помощью кода происходит подключение и вызов функции отображения фавикона. Без кода никак не обойтись.
Для тех, кто не хочет лезть в код есть плагин Favicons. Там можно выбрать в качестве иконки граватар, изображение из сети или предложенные в плагине готовые иконки.
Опять плагин.
Но это же дополнительная нагрузка на сервер.
Надо вообще избавляться от плагинов,по максимуму.
Фавикон легко и без плагина поставить. В некоторых темах для сайтов предусмотрена возможность загрузить эту иконку прямо из панели администратора. Очень удобно для начинающих.
Да знаю я это Юлия.У меня фавиконка прямо в админке установлена, хотя раньше плагин использовал
Если удобнее плагином, тому плагин подойдёт. Кому самостоятельно хочется, значит так им удобнее.