Добавляем фавикон на сайт

Доброго времени суток, друзья!

Я долго думал, о чем бы написать следующую статью и на ум пришла очень простая тема в техническом плане, но не менее важная чем все остальные.

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

Расскажу все, что знаю о данной иконке. На что она влияет, как ее лучше создать и так далее.

Прежде, чем начать обсуждать данные вопросы я хотел бы разъяснить вопрос: «Что же вообще такое Favicon и где его можно увидеть?».

Все проще некуда. Favicon — иконка, которая отображается, когда вы находитесь на каком-то сайте. Также она отображается и в поисковой системе Яндекс, что очень даже хорошо. Почему это так, мы рассмотрим далее.

Вот, как выглядит моя иконка во вкладке браузера.

«>

А вот, как та же иконка отображается в выдаче поисковой системы Яндекс.

«>

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

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

Зачем нужен Favicon

Постараюсь объяснить все в виде чек-листа. Кстати, приготовил простенькую инфографику на этот счет.

«>

• Продвижение и узнаваемость бренда.

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

За продвижение бренда отвечает отображение фавикона в выдаче Яндекс. Чем больше видят ваш фавикон, тем больше на него будут кликать, так как это свидетельствует, что ваша информация ценная и, вероятнее всего, она пользуется спросом.

Узнаваемость же бренда — процесс аналогичный, который будет в то же время способствовать его продвижению, а также продвижению самого блога, так как чем известней ваш favicon, тем лучше будут заходить именно на ваш сайт из поисковой выдачи, чем на другие.

Данные 2 фактора из первого пункта взаимосвязаны. Без одного не будет второго.

• Увеличение количества кликов из выдачи, а соответственно и прирост трафика.

Каким боком связан Favicon с количеством переходов на ваш сайт? Дело в том, что очень важным моментом при предварительной оценке вашего сайта посетителем, является анализ внешнего вида вашего сниппета в выдаче поисковой системы. Только использованием фивикона вы уже увеличиваете один из важнейших поведенческих факторов — CTR (кликабельность) в выдаче.

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

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

• Увеличение конверсии сайта.

Каждый сайт должен иметь свою конверсию вне зависимости от его типа. Блог, интернет-магазин, одностраничный сайт, страница подписки, контентный сайт — не важно. У каждого ресурса есть своя задача, эффективность которой измеряется конверсией.

В конверсии важна каждая мелочь. Даже расположение слов и их длина. Фавикон — не исключение. Чем он качественней и более лучше описывает вид деятельности сайта или компании, тем больший процент он придает общей конверсии.

Для страниц подписки и продающих сайтов данный фактор очень важен. Как правило, такие сайты рекламируется напрямую и посетители, которые на них заходят, в большинстве случаев, не знают автора. Глаза таких посетителей нередко сразу идут смотреть на favicon.

Эти 3 причины я бы выделил в качестве основных. Может вы еще что-то добавите в комментариях. Будет интересно узнать больше.

Ну, а теперь пришло время приступить к самому процессу создания и установки данной иконки. Начнем с создания.

Как создать Favicon

Сейчас мы поговорим о создании фавикона с точки зрения 2х моментов:

1. Создание самого дизайна и оформления;
2. Создание самой иконки.

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

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

Поэтому, если вы не обладаете хорошей фантазией и хорошими навыками фотошопа, как минимум, то вариантов в данном случае 2:

1. Много париться и сделать самому;
2. Обратиться к профессионалам.

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

Человек, имеющий опыт в создании дизайнов запросто вам его сделает, но не бесплатно ясень пень. Зато качество будет радовать всех и вся. Поэтому, я и рекомендую 2й вариант.

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

• Не копируйте никого — будет хуже только вам, а конкуренту будет плюс, так как вы его в некой мере пропиарите;
• Иконка должна быть простая, чтобы во вкладке было четко понятно, что там нарисовано. Поэтому, чем меньше в ней элементов, тем лучше. Многие делают ее из своей фотографии, которую абсолютно не видно в таком размере. Не повторяйте данной ошибки;
• Favicon должен давать понятие области вашей деятельности или же брендировать ваше имя. Если область деятельности, то постарайтесь что-то придумать интересное. Например, если сайт о заработке, то логично сделать иконку в видео каких-то монет или купюр. Но таких умников уже пруд пруди, поэтому нужно обыгрывать все по-своему. Почему я выше и писал, что необходима фантазия и умение ее воссоздать в дизайне. Если же это личный блог, то очень распространенный вариант — обыграть первую букву своего имени или фамилии. Я так и сделал. Это самый простой путь.

Теперь можно перейти и к процессу создания самой иконки с технической точки зрения.

Создаем иконку

Так как Favicon — иконка, то и расширение у нее должно быть соответствующее — ico. Чтобы сделать такое расширение, мы будем пользоваться сервисом. Можно конечно сделать это и какими-то программами, но я сталкивался с проблемой, что такие иконки некорректно отображаются на выходе. С сервисом же все ок.

Также нам потребуется изображение маленького размера (32х32 или 16х16 пикселей) с нашей иконкой. Именно в таком размере и отображается фавикон. Во вкладке браузера он имеет размер 16х16 пикселей.

Будем считать, что изображение вы создали. Можно двигаться далее. Переходим на сервис (кликните сюда) и оказываемся на странице, где можем выбрать наш файл изображения любого из 2х размеров выше.

«>

Когда выбрали иконку, мы можем нажать на кнопку «Create icon», после чего сервис автоматически преобразует наше изображение в иконку нужного формата (ico) и придаст ей размер 16х16 пикселей.

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

«>

После скачивания иконки она будет в месте сохранения файла с нужным расширением и форматом. Можете в этом удостовериться.

«>

Можно идти дальше и сделать так, чтобы иконка отображалась на сайте.

Устанавливаем Favicon на сайт

Процесс установки состоит из 2х этапов:

1. Загрузка иконки на сайт;
2. Подключение вывода иконки на всех страницах.

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

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

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

Покажу так, как сделал я. Для загрузки файлов на сайт и использую ftp клиент FileZilla (тут подробная инструкция). Фавикон в моем случае лежит в папке с моей темой оформления, то есть в папке шаблона, где лежат все его файлы и папки (см. ниже).

«>

Как видим, имеются все файлы и папки шаблона и среди них находится иконка.

После загрузки иконки на хостинг, необходимо сделать ее загрузку на всех страницах сайта. Для этого нужно добавить определенную строчку кода в файл header.php вашей темы в область между открывающим и закрывающим тегами <head></head>.

Берем следующий код. В нем лишь подставьте имя своего домена и название темы.

Идем в файл header.php и копируем в вышесказанное место эту строчку с вашими данными. В моем случае получилась следующая ситуация.

«>

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

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

Как вы увидели, процесс установки Favicon настолько простой, что его сделает даже младенец. Тем более, что по традиции прилагаю видео-урок.

В завершение статьи я попрошу вас оставить свои вразумительные комментарии с новыми идеями для контента. Будем все разбирать, что непонятно.

На этом все. До связи

С уважением, Константин Хмелев.

kostyakhmelev.ru

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

Отображение иконки в строке браузера

Чтобы установить подобную «фичу», необходимо нарисовать изображение размером 16х16 пикселов и сохранить его в формате ICO в корне сайта под именем favicon.ico.

Adobe Photoshop не понимает формат ICO и не сохраняет в нем рисунки, так что для этой цели требуется дополнительный плагин.

Для работы плагина файл необходимо распаковать и сохранить в папке Plug-InsFile Formats. По умолчанию программа Photoshop CS под Windows устанавливается в папке c:Program FilesAdobePhotoshop CS. Тогда полный путь для файла плагина будет c:Program FilesAdobePhotoshop CSPlug-InsFile Formats.

Размещение плагина для сохранения файлов в формате ICO

После добавления плагина, при сохранении рисунка в списке доступных форматов появляется новый пункт «Windows Icon».

Тип файла для сохранения иконки

Остается сделать желаемую иконку 16х16 пикселов и сохранить ее под именем favicon.ico в корне сайта. Браузер автоматически ищет этот файл и добавляет его в адресную строку, а также закладки.

Файл не обязательно должен располагаться в корне сайта, но тогда следует указать браузеру, где он находится. Это делается через тег <link>, как показано ниже.

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

Атрибут href задает расположение и имя файла.

Формат рисунка не обязательно должен быть ICO, также допускается использование GIF и PNG. При этом необходимо сменить значение атрибута type на image/gif или image/png, в зависимости от типа изображения.

<head>  <link rel="shortcut icon" href="/images/favicon.png" type="image/png"> </head>

htmlbook.ru

Зачем нужен favicon?

Этот рисунок нужен не для «украшения» браузера. Наличие или отсутствие faviconа на веб-странице, учитывается Яндрексом поведенческим фактором ранжирования. Все фавиконы показываются поисковыми системами, и сайт выглядит более привлекательно в посиковой выдаче.

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

Каким должен быть фавикон и где должен находиться?

Для хорошего сайта фавикон обязательно должен быть установлен в обязательном порядке. Он делается в формате ICO — это расширение поддерживается всеми браузерами. Картинку можете сделать самостоятельно, взяв за основу любую фотографию или изображение. Можно пользоваться графическим редактором, можно выбрать подходящий вариант на любом из множества онлайн-сервисов. А проще всего, выбрать уже готовый, набрав в поисковой строке «коллекция фавикон».

Обратите внимание: изображение должно быть названо favicon.ico. В коллекциях очень часто предлагают варианты с расширением gif, поэтому скачивайте картинку и обработайте ее в специальной программе Snagit – наведите курсор на изображение, нажмите правой кнопкой на мышь, откройте с помощью приложения Snagit и сохранить картинку как — выбирайте расширение ico.

Фавикон можно хранить в любой папке, но поисковые машины и браузеры, ищут эмблемы по этому адресу searchtimes.ru/favicon.ico, поэтому, чтобы логотип был всегда доступным, сохранять рекомендуется в корневой директории веб-страницы.

Как добавить фавикон на сайт?

Добавить favicon на сайт можно 2-мя способами:
1. Сохраненную картинку с ico расширением и размером 16х16 пикселей, переназовите на favicon.ico.
2. Загрузите иконку в основную папку domains/ваш сайт/public_html/ или в панель управления хостингом.

На некоторых сайтах, для завершения установки фавикона, нужно вписать код html в файл заголовка (header.php), между тегамии.

<link rel="shortcut icon" href="ваш сайт/favicon.ico" type="image/x-icon" />   <link rel="icon" href="ваш сайт/favicon.ico" type="image/x-icon" />

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

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

searchtimes.ru

Как установить favicon на WordPress

При установке иконок для сайта возможны три варианта развития событий:

1. из админки блога Вордпресс, используя настройки шаблона;
2. обычная установка без плагина;
3. с помощью плагина.

Вставляем фавикон на блог из админки

Это самый простой способ. Во многих премиум-шаблонах WordPress есть возможность устанавливать логотипы и иконки. Для этого идем в настройки темы, выбираем нужный файл на компьютере и жмем “Загрузить“. Сохраняем изменения и любуемся результатом. В моей теме можно загружать картинки в формате png или gif размером 16х16.

Установка favicon на сайт без плагина

Допустим, что у нас уже есть готовый фавикон. Это может быть картинка с любым названием в форматах GIF, JPEG, PNG или BMP. Однако напомню, что лучше всего, если это будет файл изображения в формате .ICO с размером 16×16 пикселей favicon.ico. Переименуйте, если у вас не так.

Добавить Favicon на сайт очень легко. Надо просто скопировать его в корневую директорию сайта по FTP. На Вордпресс это папка public_html (там, куда устанавливали robots.txt). Как заливать файлы на хостинг с помощью FTP-клиента FileZilla, читаем здесь.

В принципе, можно больше ничего не делать. Современные браузеры сами найдут пиктограмму, если она расположена в корневой папке блога. Но мы ведь хотим, чтобы наша иконка отображалась и в поисковой выдаче. Поэтому, будет лучше, если указать специальному роботу Яндекса путь к файлу favicon.ico. Для этого в html-коде страниц блога между тегами <head> </head> надо прописать такой код:

или

В данном примере файл находится в корне сайта, а его адрес прописан в виде относительной ссылки. Если вы загрузили картинку в другую папку, то укажите полный путь к ней в атрибуте href. Если картинка не в формате .ico, то укажите это в атрибуте type, заменив x-icon на нужный формат.

Многие советуют вставлять обе строки, но я считаю это лишним и советую прописывать только верхнюю строчку. Поясню, для Internet Explorer пишем значение “shortcut icon“, остальные браузеры понимают “icon“, которое уже входит в это значение.

Как прописать код favicon для WordPress:

• Идем в админку “Внешний вид” – “Редактор“.
• Открываем файл header.php.
• Вставляем код до закрывающего тега </head>.
• Жмем “Обновить файл“.

Как поменять иконку сайта

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

Если картинка расположена в другом месте, то делаем следующее:

• Открываем в браузере код страницы сайта (Ctrl+U).
• Ищем строку, где прописан адрес фавикона.
• Заменяем файл по указанному адресу.

Почему не отображается favicon

Если favicon не отображается в браузере после установки или замены, надо:

• перезапустить браузер;
• обновить кеш;
• проверить правильность пути к пиктограмме сайта.

В поисковой выдаче Яндекса favicon появится только после того, как сайт посетит специальный робот. После этого фавиконка преобразуется в формат PNG и добавляется на сервер Яндекса по адресу http://favicon.yandex.net/favicon/blogibiznes.ru. Чтобы увидеть иконку своего сайта, замените имя моего домена своим. Бывает, что Яндекс долго не отображает пиктограмму в выдаче. Надо подождать и, если через месяц иконка не появится, можно задать вопрос в тех.поддержку.

Easy Favicons – WordPress плагин для установки фавикона

Считаю, что использовать плагин для установки favicon на WordPress, это лишнее. Тем не менее, такая возможность для особо ленивых есть. Существует много подобных плагинов, но я покажу один, которым сам когда-то пользовался. Он называется Easy Favicons. Скачать его можно по этой ссылке.

Устанавливаем и активируем плагин (как установить плагин Вордпресс). Открываем в админке страницу с настройками.

Как видно выше, есть возможность установить фавикон тремя способами:

1. использовать свой Gravatar;
2. указать путь к картинке;
3. выбрать иконку для сайта из установленного набора.

После не хитрых настроек нажмите “Сохранить изменения” и Favicon будет установлен.

Вот и все дела. Теперь, надеюсь, понятно, как установить фавикон на сайт. Какой бы способ вы не выбрали, помните, что любой популярный сайт должен иметь свою узнаваемую иконку. Кроме того, ее можно периодически обновлять. Например, во время каких-то интересных событий или праздников. Представьте, если под Новый год человеку в поиске попадется ваш блог с картинкой Деда Мороза. Это может лишний раз привлечь внимание пользователя и заставить его выбрать именно ваш ресурс.

Ну вот, хотел покороче, получилось, как всегда. А как вы установили favicon на свой сайт?

Понравилась статья? Нажимай на кнопки:

blogibiznes.ru

Что вам понадобится

Перед тем, как вы начнете это руководство, вам понадобится следующее:

• Квадратное изображение, которое вы хотите добавить, как favicon для вашего сайта
• Доступ к файлам вашего сайта

Вариант 1 — Позволить браузеру автоматически добавить favicon (нет необходимости в изменении кода сайта)

Большинство браузеров автоматически находят файл favicon.ico в каталоге вашего сайта и устанавливают его в качестве favicon. Это самый легкий путь для добавления favicon.

1. Во-первых, чтобы изображение нормально отображалось в браузере, оно должно быть квадратной формы в любом из представленных форматов (jpg, bmp, gif, png). Конечно, возможно использование не квадратного изображения, но выглядеть оно будет не так аккуратно.
2. Этот вариант добавления favicon требует конвертации вашего изображения в формат .ico. В Интернете можно найти множество онлайн инструментов для этого, мы воспользуемся одним из самых популярных – convertico.com.
3. После открытия сайта convertico.com, вы увидите кнопку для выбора и загрузки вашего изображения:

4. Нажмите кнопку и выберите нужный вам файл. Сразу после выбора, ваше изображение будет автоматически конвертировано и станет доступно для загрузки в правой части сайта:

5. Скачайте ваше изображение нажав на белую стрелку и сохраните ваш файл .ico на компьютере.
6. Теперь переименуйте файл в favicon.ico, чтобы браузер мог распознать данный файл.
7. Последним этапом станет загрузка изображения в каталог вашего сайта. Для загрузки вы можете использовать Файловый менеджер или FTP клиент. В хостингах на базе Linux, это обычно каталог public_html. Однако он может отличаться у различных хостингов, или в связи с вашими собственными настройками. В таком случае лучше проконсультироваться у поставщик услуг хостинга.

Как только полученный файл favicon.ico будет загружен в каталог вашего сайта, браузеры автоматически добавят и покажут изображение.

ВАЖНО! Если вы не видите новый favicon, очистите кэш вашего браузера и перезапустите его.

Вариант 2 — Использовать обычную картинку и указать ее в коде сайта

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

1. Во-первых, чтобы изображение нормально отображалось в браузере, оно должно быть квадратной формы в любом из представленных форматов (jpg, bmp, gif, png). Конечно, возможно использование не квадратного изображения, но выглядеть оно будет не так аккуратно.
2. Загрузите изображение в каталог вашего сайта. Для загрузки вы можете использовать Файловый менеджер или FTP-клиент. В хостингах на базе Linux, это обычно каталог public_html. Однако он может отличаться у различных хостингов или в связи с вашими собственными настройками. В таком случае лучше проконсультироваться у поставщик услуг хостинга.
3. Теперь вам необходимо определить изображение, которое будет использоваться в качестве favicon в коде вашего сайта. Добавьте эту строку между тегами <head></head> в код вашего сайта:

<link rel="shortcut icon" type="image/png" href="/favicon.png"/>

ВАЖНО! Измените png на формат вашего изображения в type=”image/png” и favicon.png на имя вашего изображения.

HTML код будет выглядеть примерно так:

Теперь ваше изображение должно отображаться в качестве favicon для вашего сайта.

ВАЖНО! Если вы не видите новый favicon, очистите кэш вашего браузера и перезапустите его.

Заключение

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

www.hostinger.ru

Favicon — это небольшая картинка размером 16×16 (или 32×32) пикселя, которая находится в браузере слева от адресной строки. Почему-то не так много людей добавляют favicon на свои сайты. На мой взгляд, они многое теряют. Например, в Yandex отображаются иконки сайтов, и люди переходят по таким сайтам гораздо чаще, чем по тем, на которых нет favicon. Также, на мой взгляд, это немного повышает авторитетность сайта. В общем, в этой статье мы установим favicon на сайт.

Для начала как найти favicon. Во-первых, Вы можете создать самостоятельно. Очень хороший сервис favicon.cc. На нём Вы прямо в онлайне создадите себе favicon. Также Вы можете воспользоваться уже готовыми коллекциями и выбрать себе подходящий. Самый простой способ — это воспользоваться поиском и запросом: «коллекция favicon«. Думаю, что уже первый сайт покажет Вам тысячи различных favicon, и Вам останется его только выбрать.

Теперь второй шаг — установка favicon на сайт. Для этого добавьте внутри тега <head> следующую строку:

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

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

После обновления страницы, Вы увидите Ваш favicon рядом с адресом Вашего сайта.

Иногда favicon появляется не сразу. Как правило, виновато кэширование браузера. Поэтому если картинка отсутствует, то попробуйте очистить кэш браузера (в настройках это должно быть). Также может помочь перезапуск браузера. Но ещё раз говорю: если Вы всё сделали правильно, то favicon на Вашем сайте появится.

Вот и всё, что хотелось рассказать об установке favicon на сайт.

Если Вы хотите узнать больше по HTML, то посмотрите мой бесплатный курс с примером создания сайта на HTML: http://srs.myrusakov.ru/html

myrusakov.ru

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

Что такое favicon

Favicon (или фавиконка) — это специальный значок, который используется для отображения в некоторых элементах браузера. Каждый отдельный веб-ресурс имеет (или должен иметь) свою отдельную фавиконку, которую, к примеру, можно увидеть рядом с адресом сайта в названии вкладки браузера, в поисковой выдаче и в списке избранных сайтов. Именно из-за подобного использования в качестве символа для закладки и родилось название этого значка — FAVourite ICON, то есть иконка для избранного, так как изначально фавиконка использовалась только для этого.
В настоящее время фавиконка — это, во-первых, мини-символ сайта, который повышает узнаваемость ресурса; во-вторых, ее наличие положительно влияет на положение сайта в поисковой выдаче.

Как создать favicon

Если говорить о технических характеристиках, то стандартный размер для фавиконки — 16 х 16 пикселей; также возможно использование изображения размером 32 x 32 пикселя и совсем редко 48 х 48. Изначальный формат этого знака — ico, однако сейчас последние версии браузеров поддерживают также вывод фавиконок в форматах png, gif и jpeg. Набирает популярность и еще один вид фавиконки — анимированная (или динамическая). В этом случае это будет не статическая картинка, а меняющийся файл в формате gif. При выборе подобного формата имейте в виду, что на данный момент его вывод поддерживается только двумя браузерами: Firefox и Opera, а остальные браузеры будут показывать лишь первый кадр.

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

Для создания favicon подойдет любая графическая программа, в том числе и Paint: все, что вам нужно сделать, это изменить размеры изображения на 16 х 16 (или 32 х 32) пикселей и сохранить в одном из перечисленных выше форматов.

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

Ресурсы для создания фавиконок:

• http://www.xiconeditor.com/ — вы можете загрузить изображение и затем отредактировать его или нарисовать favicon с нуля, множество настроек позволят вам воплотить в жизнь любые творческие желания;
• http://www.favicon.cc/ — более простой редактор для создания фавиконок, на этом ресурсе вы также найдете коллекцию различных значков, которые можно отсортировать по тегам или названию;
• http://antifavicon.com/ — редактор для тех, кто хочет вместо картинки использовать favicon в виде отдельных букв или слов.

Итак, общие рекомендации к favicon следующие: размер 16 х 16 пикселей либо 32 х 32 пикселя, минимальный размер (желательно, чтобы иконка весила менее 1 Кбайт), формат ico (как наиболее предпочтительный) либо png.

Для того, чтобы получить изображение в формате ico, вам нужно просто сохранить файл с названием favicon.ico — можно сразу присвоить это расширение файлу при сохранении либо переименовать файл после.

Как загрузить favicon на сайт

После того, как у вас появился файл favicon.ico с нужным вам изображением, следует перейти к загрузке этой иконки на ваш сайт. Сделать это совсем несложно — просто загрузите файл в корневую папку вашего сайта, используя FTP-клиент, и веб-браузеры, которые поддерживают показ фавиконки, автоматически сами найдут его.

Если вы хотите разместить favicon.ico в какой-либо другой папке, вам следует прописать путь к этому файлу внутри контейнера <head>:

Тип (type) прописывать необязательно, но в дальнейшем эта информация понадобится для настройки кэширования.

Если вы используете CMS WordPress:
вы можете сделать так, как написано выше, либо использовать специальный плагин Favicon by RealFaviconGenerator. Еще обратите внимание на официальную документацию WordPress, касающуюся favicon: https://codex.wordpress.org/Creating_a_Favicon

Если вы используете CMS Joomla:
вам нужно загрузить файл в директорию /joomla/templates/<ваш шаблон>. Официальную документацию вы можете найти в этом разделе: https://docs.joomla.org/Changing_the_site_favicon

Как оптимизировать favicon

Используйте кэширование – пропишите в файле .htaccess соответствующую строку:

Не забудьте про Nginx: проверьте, что тип файла ico включен в перечисление в файле конфигурации веб-сервера:

Как добавить favicon для портативных устройств

С развитием технологий иконки стали использоваться не только в десктопных браузерах, но и при выводе информации на iOS и Android-устройствах. Как правило, эти значки также используются в качестве ярлыков на рабочем столе. Каждое из них имеет свои требования к подходящему изображению.

Android

Выбор фавиконки для Android-устройства зависит от показателя PPI (pixels per inch – пикселей на дюйм); это важно учитывать, так как из-за этого одно и то же изображение может выглядеть по-разному на экранах с различным параметром PPI. Общая таблица с указанием коэффициента плотности и соответствующего ему размера фавиконки выглядит следующим образом:

Что касается формата, то изображения должны быть в формате png.

iOS

В отличие от Android, размер иконок для iOS-устройств зависит от наличия Retina и версии операционной системы. В таблице это выглядит так:

Для того, чтобы создать фавиконку для всех возможных форматов и устройств, вы можете воспользоваться специальным сервисом: https://realfavicongenerator.net/.

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

Сначала вам нужно выбрать изображение, которое составит основу вашей фавиконки. Оно необязательно должно быть квадратным, но такой формат предпочтителен. В противном случае вы сможете заполнить пустые края изображения каким-либо цветом (для iOS) либо оставить их прозрачными (для Android). Также RealFaviconGenerator создает иконки и для других платформ (Windows 8 и 10).

После того, как вы создали нужные вам изображения, вам нужно лишь скачать архив с получившимися изображениями, загрузить их в корневую папку своего сайта и добавить сгенерированный HTML-код в контейнер <head>.

После этого проверьте наличие всех необходимых иконок, введя адрес своего сайта в соответствующую строку на главной странице RealFaviconGenerator.

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

timeweb.com

Favicon называют специальную иконку, которую видно вверху страницы интернет-обозревателя при открытии того или иного сайта. Это очень удобно, когда по такой иконке пользователь сразу узнает сайт. Ее видно и в списке закладок, и при выдаче поисковой системой сайтов по запросу. Использование Favicon давно стало стандартом, а сайт без этой иконки сразу показывает, что его разработчики — не особо опытные специалисты. В общем и целом наличие этого элемента повышает доверие и узнаваемость проекта. Здесь мы разберем самый простой способ создания Favicon.

1. Для начала необходимо сделать изображение, которое, собственно, и будет иконкой вашего сайта. Для этого нужно запустить приложение для работы с графикой (Paint.net, Photoshop, Gimp или любое другое). В нем вам нужно создать картинку размером 16×16. Правильнее всего использовать формат ico. Многие современные браузеры распознают фавикон и в других графических форматах, но во избежание конфликта версий лучше все же использовать родной для такого рода изображений формат.
2. Некоторые простейшие графические редакторы не поддерживают работу с ico файлами. В таком случае вы можете создать изображение в любом другом формате, а затем использовать соответствующий веб-сервис для преобразования файла. Таких сервисов достаточно много и все они имеют простой интерфейс и не требуют особых навыков для конвертации. Также, при желании, некоторые из этих сервисов можно использовать для всех этапов разработки нужной вам иконки.
3. Тут важно сказать пару слов о выборе изображения для Фавикон. Рекомендуем провести исследование среди сайтов, похожих на ваш по тематике или направлению деятельности. Это важно для того, чтоб, во-первых, не повторяться, а, во-вторых – нащупать идею для своей иконки. Изображение должно, в целом, отображать тематику, но при этом не дублировать по цвету и схеме подобные проекты. Также не стоит выбирать слишком мелкое изображение, которое не может быть понятно с первого взгляда.

   

4. После того, как ваша иконка готова, остается залить ее на сервер с сайтом. Имя файла должно быть favicon.ico. Это поможет избежать путаницы при обработке браузерами. Лучше сразу поместить файл в корневую папку. Другой вариант – явно указать в коде сайта ссылку на место размещения файла. Теперь остается разместить следующую строчку (<link rel=»shortcut icon» type=»image/x-icon» href=»favicon.ico»>) в код сайта (в заголовок html документа).
5. Для большинства популярных систем управления сайтами существуют специальные плагины по управлению иконками Favicon. Если вы используете одну из таких CMS, то попробуйте этот способ. Он сравнительно легче и позволяет быстро менять иконку без необходимости открывать исходные файлы сайта.

besthard.ru