Иконка Favicon для сайта — как создать и установить фавикон | Заработок в Интернете
Заработок в Интернете

Иконка Favicon для сайта — как создать и установить фавикон

Иконка Favicon для сайта — как создать и установить фавикон

Иконка сайта – это специальный значок сайта, который отображается в браузерах пользователей интернета. Данный инструмент получил название favicon. Иконку веб сайта в браузере можно увидеть во вкладках рядом с закладками.

Если же владелец ресурса никогда не задавался вопросом, как добавить иконку на сайт, то по умолчанию в качестве картинки будет отображаться значок браузера (как и было у меня ранее):

А нужна ли в принципе иконка Favicon?

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

  • Простота распознавания. Создать иконки для сайта – настоящая необходимость, если вы действительно заботитесь о своих пользователях. В случае, если по какой-либо причине стандартные пункты меню, оснащенные надписями, станут плохо видны, иконка ICO останется.
  • Узнаваемость. Каждый значок в отличие от надписи обладает своими собственными характеристиками – формой и цветом. Чтобы отличить одну надпись от другой, вам нужно ее прочитать. В случае с иконками ICO ничего читать не надо – достаточно секундного взгляда.
  • Запоминаемость. Экспериментально доказано, что картинки запоминаются лучше, чем надписи. Cо временем иконка вызывает даже определенные ассоциации в голове у пользователя. А ведь именно это вам и надо! Имея уникальный значок, он может настолько запомнится вашему пользователю, что в дальнейшем будет ассоциироваться у него только с вашим сайтом.
  • Привлечение пользователей. Иконки ICO 16х16 – отличный способ привлекать на сайт пользователей чуть чаще. Не так давно веб-мастера придумали такую «фишку» — размещать иконку ICO в адресной строке рядом с именем сайта.

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

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

Существует несколько способов, как сделать иконку для сайта:

1. Рисование иконки самостоятельно в графических редакторах, например Fotoshop, с сохранение изображения после этого в нужном формате .ico.,

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

Лично я воспользовался сервисом favicon.ru

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

3. Скачать коллекцию фавикон иконок из какой-либо онлайн галереи или каталога фавиконов:

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

Файл «favicon» браузер и поисковый робот Яндекса будут искать прежде всего в корневой папке вашего сайта. Поэтому загрузите в корневую папку (обычно это public_html или htdocs) созданную иконку favicon.ico. Откройте теперь ваш ресурс в каком-нибудь браузере и посмотрите, не поменялась ли иконка фавикон в адресной строке.

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

Если дело не в кэше браузера, то это значит, что для вашего сайта задано другое место для favicon, отличное от корневой папки. Как это проверить? Откройте исходный код любой страницы вашего проекта в том браузере, который вы используете. Это можно сделать двумя способами: щелкнув правой кнопкой мыши по этой странице в вашем браузере и выбрав пункт контекстного меню «Исходный код» в Opera, либо «Исходный код страницы» в Mozilla Firefox, либо «Просмотр кода страницы» в Google Chrome, либо открыв страницу сайта нажать набор клавиш ctrl + U.

Теперь поищите в верхней части исходного кода страницы вашего сайта строку, задающую путь до favicon.ico. Строка исходного кода будет выглядеть примерно так:

<link rel=«shortcut icon» type=«image/ico» href=«http:путь_до_вашей_иконки/favicon.ico»/>

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

Путь до файла favicon для сайта на WordPress, обычно задается в используемой вами теме WordPress. Согласно этому пути фавиконка для WordPress должна лежать в папке с используемой вами темой оформления. Т.е. здесь:

/wp-content/themes/Папка_с_используемой_вами_темой_оформления/favicon

Как прописать в шаблоне сайта на WordPress путь до фавиконки

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

<link rel=«shortcut icon» href=«http:путь_до_вашей_иконки/favicon.ico» type=«image/x-icon»/>
<link rel=«icon» href=«http:путь_до_вашей_иконки/favicon.ico» type=«image/x-icon»/>

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

 wp-content/themes/Папка_с_вашей_темой_оформления.

Открываете файл header.php в редакторе и в самом его начале находите открывающий Html тег <head>. Между тегами <head> . . . </head> прописываете те две строчки кода с указание пути до вашего файла для блога на WordPress.

После всех проделанных манипуляций ваш фавикон подчинится и встанет на свое место . Успехов Вам!

Понравилась статья? Поделитесь с друзьями:

6 комментариве к “Иконка Favicon для сайта — как создать и установить фавикон

  1. Диана

    Спасибо за статью! Пригодилась!

    [Ответить]

    admin Reply:

    Спасибо за отзыв. Я надеюсь, что и в дальнейшем Вы найдете для себя полезную информацию на моем сайте!

    [Ответить]

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>