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

Установка Favicon на сайт

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

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

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

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

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Комментарии ( 25 ):

Здравствуйте еще раз. У меня не получается установить favicon. объясните пожалуйста синтаксис вот этого тега: (тег)link href=»favicon.ico» rel=»shortcut icon» type=»image/x-icon» (тег закрыт) а именно почему тег закрывается вот так»/>»? Что это означает? почему его нельзя закрыть просто «>»? кэш браузера очищал.

/> означает, что код написан в стандарте XHTML, а если у Вас стандарт HTML, то можно просто писать >. Стандарт задаётся в DOCTYPE. Но в любом случае, должно работать. Попробуйте посмотреть в другом браузере.

Её необходимо ставить на каждую страницу, где Вы хотите, чтобы отображался favicon.

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

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

Не поняла, если честно. В Explorer не отображает. Вот смотрите, создаю я на сайте favicon.сс эту картинку. Сохраняю на комп. Она автоматически сохраняет в формате ico? Или надо конвертировать? И куда, в какую папку в компе надо ее(картинку) размещать? Там где и находится наш html?

Картинку надо класть рядом с index-файлом.

Ну да, так они и лежат в одной папке. Открывает только в Firefox, в других браузерах нет. С чем еще может быть связана эта проблема?

Если открывает в Firefox, то откроет и в других. Просто там остался хэш, очистите его и всё появится, хотя это необязательно. Все пользователи увидят эту иконку.

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

Здравствуйте.А верно ли то что, type=»image/x-icon» устарело и им не пользуются? Ибо у меня favicon вставляется только тогда, когда использую type=»image/vnd.microsoft.icon»

У меня вставляется и через image/x-icon, и впервые слышу, чтобы это устарело.

да вот столкнулась на этом сайте http://www.xiper.net/collect/html-and-css-tricks/different/howto-favicon.html с записью «В 2003 году ICO формат был зарегистрирован в IANA как MIME тип image/vnd.microsoft.icon. С тех пор тип image/x-icon является не корректным.» Поэтому хотела уточнить)

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

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

У меня не работает это.Как сделать этот favicon. посмотрите http://faviconka.ru/favicon.php?n=faviconka_ru_566.png

У меня иконка находится не слева от адресной строки,а во вкладке. Как сделать в адресной строке?

может повлеять на то что фавиконка не ставиться от того что стоит windows10

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2022 Русаков Михаил Юрьевич. Все права защищены.

Как сделать и установить фавикон на сайт

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

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

Что такое фавикон и почему он важен для СЕО

Фавикон (favicon) – значок веб-сайта размером 16 x 16 (или 32 x 32, но не более). Он отображается во вкладке браузера. Выглядит это так:

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

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

Подведем небольшие итоги:

Иными словами, если у вас вообще возникает вопрос: добавить favicon или же нет, то ответ очевиден – обязательно добавлять.

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

Где скачать готовый вариант

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

Просто вводим в поисковик нужный запрос, что-то типа “Скачать готовый favicon”, после этого вам будет представлено огромное количество самых разных вариаций.

Скачиваем картинку себе на ПК, а после устанавливаем на сайт. Все просто. Они доступны абсолютно бесплатно, никто вас ругать не будет. Хотя если речь идет о компании, пусть даже мелкой, то при обнаружении чужого логотипа могут возникнуть неприятные казусы.

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

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

Создание фавикона

Онлайн-сервисы

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

Например, Favicon.by. Он позволяет вам нарисовать логотип при помощи простых инструментов. Сервис создает иконку в формате ICO.

Как видите, здесь все интуитивно понятно. Выбираем карандаш, настраиваем цвет и рисуем. Если вашему логотипу нужна какая-то основа, то вы можете воспользоваться “Импортом из файла” и “Импортом с сайта”.

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

Обратите внимание на левую часть окна “Ваш результат”. Там вы посмотрите, как будет выглядеть ваша иконка во вкладке браузера.

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

Adobe Photoshop

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

Итак, у нас есть два варианта:

Второй вариант используется наиболее часто. Наверное, больше половины сайтов просто создают квадрат размером 16 на 16 или 32 на 32, выбирают шрифт (как правило, Roboto или Open Sans), цвет, соответствующий гамме проекта. И все – favicon готов.

Открываем Фотошоп, после чего сразу идем в “Меню” – “Создать”.

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

Размер должен быть 16 x 16 или 32 x 32 (в пикселях). Все остальное – по вашему усмотрению, но я бы советовал выставить так, как показано на скриншоте.

Нажимаем кнопку “Создать”, после чего у нас перед глазами появляется область с заданным размером. Сейчас мы будем творить.

Разберу самый популярный вариант. Как я уже и говорил, это фавикон в виде буквы. Обычно первой из названия проекта. Кликаем на “Т” в панели инструментов, после чего в любой участок внутри квадрата.

Фон как на скриншоте показывает, что я выбрал вариант “прозрачный” на первом этапе создания картинки.

Теперь вводим любую букву с клавиатуры. Мы можем уменьшить или увеличить ее, поменять цвет, добавить тени или расположить в любой части созданного нами квадрата. Давайте сделаем лого в виде буквы “А”.

Цвет я регулировал при помощи специального инструмента в правом верхнем углу. Здесь вы можете выбрать абсолютно любой вариант при помощи мыши. В верхней панели также есть инструменты для выбора шрифта и размера. На картинке 32 x 32 оптимальным размером буквы будет 8 – 10 Пт.

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

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

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

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

Далее нам нужно сохранить наше творение. Идем в “Файл” – “Сохранить как”. Выбираем нужный формат (PNG, GIF или JPEG) и название – favicon, нажимаем “Сохранить”.

При установке через плагины или тему можно использовать любое название и формат. Однако в случае с корневым каталогом файл должен иметь название favicon и формат – ICO.

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

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

Самый простой и доступный – через корневой каталог. Его мы рассмотрим в первую очередь.

С помощью корневого каталога

Для начала нам нужно конвертировать файл в ICO. Это можно сделать при помощи любого онлайн-сервиса, достаточно ввести в поисковую строку: “Конвертация в ICO” или “PNG в ICO”. Загружаем туда фотографию, получаем favicon.ico.

Важно: размер должен быть 16 x 16 или 32 x 32. Название favicon, а расширение *.ico.

Теперь мы должны загрузить этот файлик в корень нашего сайта. Можно сделать это при помощи FTP-клиента или файлового менеджера.

Корень сайта, как правило – public_html. Независимо от платформы. Но в некоторых темах могут наблюдаться проблемы с отображением фавиконки. Чтобы пофиксить их, мы должны вручную добавить в header.php следующий код:

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

Также вы можете проверить наличие иконки в выдаче Яндекса, но там она появится не сразу, а только после того, как проиндексируется.

Через тему WordPress

Заходим в настройки темы, используя верхнюю панель на сайте (“Внешний вид” – “Темы”). Далее идем в “Свойства сайта”.

Вот тут-то мы и настраиваем фавиконку. Просто нажимаем на “Выбрать/изменить изображение”, далее откроется менеджер, через который мы и загружаем нашу картинку.

Плагины

Также есть возможность сделать это с помощью плагинов, но это не рекомендуется из-за нагрузки на CMS.

Идем в “Плагины”, выбираем “Добавить новый”. Откроется страница каталога, где в окно поиска мы должны ввести ключевое слово – Favicon. Нашему взору будет представлено большое количество всевозможных плагинов. Все они работают примерно одинаково, но я все же позволю себе объяснить, как все это делается, на примере одного из самых популярных – All in One Favicon.

Нажимаем на кнопку “Установить”, а после активируем нужное расширение.

После того как плагин будет установлен и активирован, мы должны перейти в настройки. Они представлены в таком виде.

Для каждого формата здесь есть соответствующая вкладка. Допустим, вы создали иконку в формате GIF и хотите, чтобы именно она отображалась во вкладке. Соответственно идем во вторую по счету строку, нажимаем “Загрузить” и в файловом менеджере выбираем наш файл. То же касается и других форматов.

Отдельного внимания заслуживает вкладка “Apple Touch Icon Frontend”. В ней вы сможете задать иконку для устройств от Apple. В отличие от обычного фавикона, логотип для Айфонов или Макбуков имеет большее разрешение и качество. То есть вам, чтобы загрузить картинку, придется создать еще один вариант. Уже в разрешении 512 x 512 или 1 024 x 1 024. Однако для мелких сайтов, в принципе, нет нужды проделывать подобное.

Заключение

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

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

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

Как быстро и качественно установить favicon на WordPress: 3 подробных метода и пошаговые инструкции

Стандартная функция WordPress в админке

В вордпресс существует стандартная функция. Чтобы добавить в панели WordPress заходим в Внешний вид > Настроить.

Откроется окно (на сленге разработчиков) кастомайзера. Заходим в раздел Свойства сайта.

Откроется новая вкладка, находим “Выберите значок сайта”.

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

Рекомендуется использовать размер не менее 512 на 512 пикселей (px).

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

В предварительном просмотре WordPress установит фавикон, и покажет, как он отображается в закладках браузера. Если все хорошо, то выбираем Опубликовать.

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

Установить favicon на WP с помощью плагина

Устанавливаем стандартно и переходим к работе, в панели заходим Внешний вид > Favicon. В открывшемся окошке находим “Выберите из библиотеки мультимедиа”.

Откроется форма с выбором картинки, можете загрузить собственное или воспользоваться ранее сохраненными в WordPress. Не забудьте заранее оптимизировать фото под WP.

Далее нажимаем кнопку Генерировать.

Перекинет на официальный ресурс realfavicongenerator, если изображение выбрано правильно то нажимаем синюю кнопку “Continue with this picture”.

Смотрим, как будет отображение на разных устройствах и браузерах, если все нормально, то перелистываем страницу вниз и нажимаем Generate your favicon and HTML code.

Ждем пока сервис обработает запрос и автоматически перебросит обратно в админку WordPress. Для надежности обновляем Ctrl+F5 и любуемся на установленный значок, который корректно отображается на всех устройствах.

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

Ввиду разнообразия тем, бывает что способы описанные выше не срабатывают. Тогда прибегнем к методу, прописываем favicon напрямую в тему.

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

Даю код, который нужно добавить в раздел head в активной теме.

Идем в админпанели Внешний вид > Редактор и выбираем файл header.php то есть заголовок, и перед закрывающим тегом /head вставляем данный код.

В примере разобран файл в формате png, но если в другом, например, jpg, то в код меняем таким образом.

Видим что изменился атрибут type он стал со значением jpg, а так же расширение картинки изменилось на другое. Обновляем и смотрим на работу кода.

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

Где хранится иконка

В папках по годам, будут каталоги по месяцам, в них размещены все медиафайлы блога. Вспомните, когда производили установку и найдите объект на сервере.

Яндекс не видит значок

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

Чтобы ускорить индексирование заносите главную страницу на переобход, это сократит время обновления базы. Так выглядит настройка в яндекс вебмастере. Время изменений в выдаче от 5 до 90 дней.

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

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

Здравствуйте, дорогие друзья! Хотите научиться впечатлять ваших посетителей еще до того, как они посетят ваш сайт? Смелое заявление, не так ли? Только представьте, ваши потенциальные подписчики еще не зашли на ваш блог, никогда о нем не слышали, но они уже заинтересованы и стремятся как можно быстрее на него попасть!

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

Что такое фавикон

Разберемся для начала с терминологией.

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

Видите эти небольшие квадратики, которые расположены слева перед названием? Вот это и есть фавиконы.

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

Нам, блоггерам и владельцам информационных сайтов, тоже глупо обходить стороной возможность таким чудесным способом привлечь внимание к своим онлайн-ресурсам!

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

Делаем фавикон

Чтобы что-то куда-то устанавливать, сначала надо его сделать. Существует два разных способа:

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

Если работаете с лого, то пытайтесь, чтобы оно занимало всю площадь, ведь если сделаете рамку, то она съест 64 пикселя из 256!

● С помощью онлайн-сервисов — это еще проще: загружаете имеющееся изображение, и оно превращается в фавикон. Честно говоря, я не являюсь сторонником такого подхода, так как мне и самому несложно сделать процедуру resize. Я предпочитаю самостоятельно контролировать этот процесс, потому как при автоматическом походе может упасть качество.

Единая инструкция для всех веб-сайтов

● Разместите фавикон в корень сайта. Корень — это то место, где содержатся все файлы. Например, для WordPress — это папка, в которой расположены папки wp-admin, wp-content, wp-themes и много файлов по типу wp.config.php. В данном случае веб-сайт поймет, что это favicon, и будет подсовывать его браузеру, чтобы тот использовал перед заголовками в результатах выдачи.

● Разместите фавикон в корень сайта.

● А теперь придется сайту дать понять, что именно это изображение является фавиконом. Поэтому зайдите в файлы своей темы и найдите тег head.

В зависимости от движка, который вы используете, это может быть index.php, index.html, footer, php и другой. Между тегами head вам придется вставить следующую строку:

А если вы, например, сохранили этот файл не в корень сайта, а папку img, то адрес будет другим:

Favicon для сайтов на Ucoz

А что с Ucoz? Вот это правильный вопрос, ведь не все используют собственные веб-сайты на Вордпресс. Многим по душе, например, юкоз или wix.

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

● Зайдите в панель управления сайтом и выберите вкладку «Файловый менеджер».

Favicon для Wix

Есть такая набирающая обороты система управления контентом как Wix. С ней не все так просто. По умолчанию доступа в корень сайта вам никто не дает. Есть два варианта.

● Купите premium плагин. Их есть несколько, называются по-разному.

● Подключите свой собственный домен к вашему веб-сайту.

Все это — услуги платные. А что же вы хотели? Wix — это удобно, понятно, но за это требуется платить, в противном случае на вашем сайте будут демонстрироваться рекламные блоки, а также не будет многих функций. Чтобы не попадать в подобные ситуации, я и использую блог на личном домене и моем личном веб-хостинг аккаунте. Могу любые файлы добавлять в любые папки абсолютно бесплатно. За хостинг, правда, все же плачу!

Автоматические решения

WordPress — самая популярная система управления контентом в мире, и было бы странно, если бы не существовало какого-то плагина, который бы позволил упростить эту процедуру. Он действительно существует, и не один.

Из списка самых популярных могу выделить Favicon by RealFaviconGenerator, All In One Favicon и многие другие.

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

Бывают действительно полезные решения, такие как Yoast или All-In-One-Seo, а уж потратить одну минуту на то, чтобы внести такие несложные изменения, думаю, может любой человек вне зависимости от степени его квалификации.

Советы по внешнему виду фавикона

А теперь поделюсь с вами своим мнением по поводу того, как должен выглядеть favicon, и чего на нем быть не должно:

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

● Лучший цвет — это красный. Если он присутствует в вашей цветовой гамме — хорошо, если нет — думаю, специально добавлять не стоит. Хотя помню, когда-то читал, что один вебмастер значительно повысил кликабельность ссылок в результатах выдачи после того, как добавил очень простой фавикон — красный квадратик. Потом пошел дальше: сделал красную стрелочку, которая указывала на title.

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

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

Инструменты для создания фавикона

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

● Фотошоп — наверное, самый лучший инструмент. Его мощностей вполне хватит, есть лишь проблема: это — платное решение.

● Pixlr — это бесплатный online-аналог Фотошопа. Все то же самое, только ничего не надо покупать и устанавливать на свой компьютер. Правда, придется наблюдать в правой колонке рекламные баннеры. Но процесс создания действительно ничем не уступает Фотошопу.

● GIMP — бесплатное, свободно распространяемое программное обеспечение, альтернатива Фотошопу, которая, как говорят одни, во многом ему уступает, а как говорят другие, во многом его превосходит. Нам же важно то, что мы без проблем добьемся цели.

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

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

Вы готовы зарабатывать в Интернете серьезные деньги? Тогда обратите внимание на курс « Как создать свой сайт » от Василия Блинова. Василий — известный онлайн-предприниматель, рассказывает о том, как создать свой блог и зарабатывать на нем очень хорошие деньги.

Прошу поделиться ссылкой на данный пост с вашими друзьями и написать комментарий.

Буду очень рад видеть вас в следующий раз. А на этом прощаюсь!

Пока!

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

Что такое favicon, почему плохо, если он отсутствует?

Фавикон – небольшая тематическая картинка – придаст вашему сайту индивидуальность и выделит его в браузере среди других веб-страниц. Установить фавикон для сайта на WordPress можно несколькими способами.

Фавикон (от английского словосочетания favorite icon) – это маленькая квадратная картинка, которая визуально представляет ваш сайт и отображается в ярлыках страниц в браузере, в закладках на страницу, и в адресной строке рядом с именем сайта. Правильно подобранный фавикон соответствует логотипу сайта или тематике информации, которая на нем содержится. При взгляде на фавикон пользователь должен безошибочно определять ваш сайт среди остальных, даже не видя его названия. Наш фавикон в закладке браузера выглядит так:

В качестве формата файла для фавикона в современных браузерах используются ico, png или gif. Некоторые браузеры поддерживают загрузку иконки в формате jpg, а Opera и Firefox могут отображать анимированный gif. Картинка фавикона бывает разных габаритов, обычно применяются размеры 16×16, 32×32, 48×48, 64×64, 128×128 или 512×512 пикселей. Для сайтов, предназначенных для просмотра на мобильных устройствах, размер иконки может отличаться.

Как сделать фавикон для сайта онлайн?

Если на вашем сайте отсутствует фавиконка, картинку для фавикона можно подобрать в интернете или нарисовать самостоятельно в специальном онлайн-сервисе для генерации иконок.

Например, favicon.ru предлагает выбрать цвет, создать картинку на квадратном поле и сохранить ее на свой компьютер.

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

Поставить favicon средствами ВордПресс

Обычно фавикон можно установить, регулируя настройки сайта в админ-панели WordPress.

Вставить фавикон используя возможности WordPress шаблона

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

Добавить в файл header.php

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

Установка favicon используя плагин Favicon by RealFaviconGenerator

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

В меню «Плагины» выберите пункт «Добавить новый». Найдите, установите и активируйте плагин Favicon by RealFaviconGenerator. Затем зайдите в меню «Внешний вид» (1), после установки плагина в нем появится пункт Favicon (2) для загрузки иконки. Нажмите кнопку «Выберите из библиотеки мультимедиа» (3) и укажите расположение файла с иконкой на вашем компьютере. Нажмите кнопку «Генерировать favicon» (4).

Из админки WordPress вас перебросит на официальный сайт плагина, где вы сможете настроить способ отображения иконки (5) для нового или работающего сайта, указать алгоритм сжатия и масштабирования картинки.

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

Почему лучше установить без использования плагина?

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

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

iPipe – надёжный хостинг-провайдер с опытом работы более 15 лет.

Фавикон: что это такое, как его сделать и установить на сайт

Всем привет! Сегодня расскажу, что такое фавикон для сайта, каких форматов и размеров он бывает. Какой размер иконки лучше выбрать и почему. Научу создавать фавиконы с помощью онлайн сервисов. Покажу где можно бесплатно скачать уже готовые фавиконки различных размеров и форматов. И конечно разберем варианты установки фавикона на сайт. А в конце вы узнаете, как проверить правильно ли установлен favicon на сайте.

Для начала я перечислю несколько веских причин почему следует обязательно установить эту иконку на ваш сайт:

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

Сайт начинает вызывать доверие не только среди пользователей, но и среди поисковых роботов.

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

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

И думаю вы со мной согласитесь, прочитав эту статью до конца.

Что такое фавикон для сайта

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

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

Favicon (фавикон) – это картинка размер которой начинается от 16×16 пикселей, и которая в большинстве случаев создается в формате «ico.» и отображается в выдаче поисковых систем в снипете и на вкладке браузеров.

Но с развитием интернет-технологий стало возможным использование других форматов этих иконок:

Но эти форматы пока поддерживают не все браузеры поэтому я рекомендую именно формат «ico» и размер фавиконки не менее 48×48 пикселей.

Почему именно такой размер? Все очень просто.

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

А в рекомендациях Яндекса указано что иконка может иметь размер от 16×16 пикселей до 120 х120.

Поэтому вариант фавиконки от 48×48 пикселей устроит обе поисковые системы.

Как сделать фавикон

Для начала подберем квадратную тематическую картинку желательно без мелких деталей. Формат этой картинки может быть любого из следующих форматов jpg, jpeg, png.

Картинку вы можете найти в интернете или заказать на бирже фриланса чтобы ее нарисовали.

На этом сайте где вы читаете статью я использовал в качестве фавикона логотип который мне рисовал веб-дизайнер.

А для сайта, на котором я все показываю я подобрал вот такую тематическую картинку размером 512×512 пикселей в формате png.

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

А дальше с помощью сервиса онлайн-генератора фавиконов такие сервисы еще называют – favicon generator, преобразуем картинку в нужный формат и размер.

Создание фавикона онлайн

Переходим на сервис PR-CY по ссылке https://pr-cy.ru/favicon/ и нажимаем «Выбрать»

Находим на компьютере нашу картинку выбираем ее и нажимаем «Открыть»

После загрузки картинки жмем «Создать favicon»

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

Распаковываем архив и видим, что в папке у нас две картинки. Нам нужна будет размером 48×48 в формате «ico»

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

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

Вот ссылки на пару таких сервисов:

Где скачать фавикон для сайта бесплатно

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

Вот один такой сервис icon-icons.com у него есть такая библиотека.

Переходим на главную страницу по ссылке https://icon-icons.com/ru/ и в поле поиска вводим слово, ассоциирующее с нужным для вас изображением.

Я для примера введу слово «мозг» и нажимаю «поиск».

Откроется страница с множеством готовых фавиконов. Остается только выбрать подходящую и нажать на нее.

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

Дальше пора приступать к установке ее на сайт.

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

После того как картинка готова ее нужно установить на сайт. Сделать это можно несколькими способами:

Загрузка в корневой каталог сайта

Переходим на хостинге Mchost в раздел сайты и открываем «Файл менеджер»

Нам откроется корневая директория нашего сайта. Внизу находим кнопку «закачать файл» и нажимаем на нее.

Нам откроется функционал загрузки файлов. Выбираем загрузка с компьютера и жмем «Выберите файл». Откроется проводник Windows, в котором переходим в компьютерную папку куда вы сохраняли готовую фавиконку. Выделяем картинку и жмем открыть.

И после этого жмем закачать.

Проверяем директорию видим, что файл закачен.

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

Если вдруг фавиконка не отображается. Это бывает в очень редких случаях:

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

В ВордПресс переходим в административную панель управления в раздел «Внешний вид» «Редактор тем»

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

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

Или через один из файловых менеджеров, например, FileZilla соединившись с хостингом использовав протокол FTP.

Как вставить через настройки темы WordPress

Есть еще один способ установки фавикона. Для этого нам понадобится квадратная картинка размером не менее 512×512 пикселей.

Поэтому я изначально подбирал картинку именно такого размера.

Для установки переходим в консоль управления и открываем настройки темы. Находятся они «Внешний вид» «Настроить»

Далее в меню с лева открываем «Свойства сайта»

Здесь нажимаем «Выберите иконку сайта»

Нам откроется библиотека файлов где нужно перейти в раздел «Загрузить файлы» и нажать «Выберите файлы»

Откроется процесс загрузки картинок с компьютера. Выбираем нужную картинку и жмем «Открыть»

И далее в библтотеке файлов жмем «Выбрать»

Затем сохраняем изменения нажав «Опубликовать»

А теперь давайте я покажу как проверять правильность установки фавиконки.

Как проверить фавикон сайта

Прежде чем проверять нужно знать несколько вещей:

И так это запомнили теперь давайте приступим непосредственно к проверкам.

Я выделяю среди них четыре основных:

Визуальная проверка

Открываем сайт в различных браузерах и смотрим отображается ли иконка в верхней части браузера.

По прямой ссылке

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

У меня ссылка будет такая https://igrymozga.ru/favicon.ico. Если вы делали все по моей инструкции, то замените домен на свой.

В базах Яндекса и Google

Этот способ подходит для проверки добавлен ли ваш фавикон поисковыми роботами в базу или нет.

Для Яндекса это будет вот такая ссылка:

Для Google будет такая:

Незабываем в ссылки вставлять ваш домен.

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

В Яндекс.Вебмастере

Как я уже писал в начале статьи яндекс считает ошибкой отсутствие фавикона. Посмотреть есть ли эта ошибка для вашего сайта можно после того как вы добавите его в Яндекс.Вебмастер перейдя в раздел «Диагностика сайта».

Заключение

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

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

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

Поэтому установив фавикон, вы дадите понять поисковым системам что придерживаетесь их рекомендациям тем самым повысив их доверие к вашему ресурсу.

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

На этом сегодня все. Делитесь статьей в социальных сетях. Задавайте вопросы в комментариях. Подписывайтесь на обновления блога. Всем пока.

Favicon сегодня: форматы, поддержка, автоматизация

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

В каком формате должен быть фавикон?

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

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

Фавикон может быть создан ещё в нескольких форматах, например, в формате GIF или JPEG, но проблемы с поддержкой делают их использование нецелесообразным.

HTML5 и атрибут sizes

Атрибут sizes пришел в нашу жизнь с HTML5. Благодаря ему браузер или устройство может выбрать необходимый размер фавикона. Атрибут sizes указывается в формате [ширина х высота] без указания единиц. Если в файле хранится сразу несколько иконок, можно задавать их размеры через пробел. Ключевое слово any указывает, что иконка может масштабироваться до любого размера, например, если она хранится в векторном формате SVG.

Пора ли отправлять ICO на свалку?

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

Windows

Начнём, пожалуй, с Windows.

До 11 версии формат PNG в IE не поддерживался, поэтому для IE10 и более младших версий по-прежнему необходимо использовать формат ICO. А вот с IE11 смело можно переходить на PNG. Для устаревших браузеров Microsoft рекомендует размеры 16х16, 32х32 и 48х48 для фавиконов формата ICO.

Начиная с IE9, сайты получили возможность быть закрепленными в меню и панели задач, а с приходом IE11 и Windows 8.1 появилась возможность создавать закрепленные сайты в виде живых плиток. По умолчанию изображением на плитке будет фавикон, но только не для больших и широких плиток, для которых нужно задавать изображение специального размера. Сделать это можно следующими способами: добавив теги метаданных в разметку веб-страницы или файл конфигурации браузера.

Сначала давайте рассмотрим первый способ.

Определение фавикона в устройствах Windows с помощью метаданных в :

Если мы хотим указать иконки для больших плиток, это можно сделать с помощью следующих метаданных:

Можно указать цвет фона плитки:

Можно указать имя закрепленного сайта:

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

square70x70logo, square150x150logo, wide310x150logo, square310x310logo — элементы, внутри которых объявляются изображения для различных размеров плитки.

Microsoft рекомендует брать больший размер изображений в целях поддержки экранов с высокой плотностью пикселей. Желательно, чтобы размер исходного изображения примерно в 1.8 раза превышал размер целевой плитки, чтобы его можно было увеличивать и уменьшать. Например, для 70х70 рекомендуемый размер 128х128, а для широкой плитки 310×150 исходное изображение имеет размер 558×270.

Новый интерфейс Metro предлагает несколько новых принципов дизайна, например, «белые силуэты», используемые большинством предустановленных программ.

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

То, что написано в кавычках в атрибуте template — название шаблона. Этот шаблон содержит изображение и небольшой текст. Используется для больших изображений и средних названий. На самом деле, подобных шаблонов очень много: и просто c текстом, и просто с изображением, и с несколькими изображениями, и с несколькими строками текста, и так далее. Большинство шаблонов изображения или текста размещают текст на той же плитке, что и изображение. Но шаблоны с Peek в названии выполняют переключение между изображением и текстом на плитке.

Подробнее о шаблонах можно узнать на официальном сайте.

Mac OS

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

Safari — вот где нам пригодится формат SVG. Чтобы использовать SVG, необходимо указать атрибут rel со значением mask-icon, все элементы SVG должны быть черного цвета. Но не стоит пугаться, цвет можно поменять атрибутом color. Эта SVG-иконка нужна для закрепления вкладки в Safari. А цвет при наведении будет таким, какой мы указали в атрибуте color.

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

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

Safari в iOS вообще не отображает favicon во вкладках, но использует их для закладок, так же как и в Mac OS. В iOS пользователи могут добавить сайт на рабочий стол, и оно будет выглядеть как нативное приложение. Эти ссылки отображаются в виде значков и называются Web Clips.

Для этого нужно добавить rel=«apple-touch-icon» и указать размер с помощью атрибута sizes. Каждое устройство нуждается в своем размере иконки. Так как iOS устройств довольно много, и каждое устройство имеет свое разрешение экрана, спецификация, разработанная Apple, поддерживает возможность указать несколько тегов с иконками разных размеров.

Если значок не соответствует рекомендуемому размеру устройства, используется самая близкая по размеру иконка большего размера, нежели рекомендуемый. Когда пользователь заходит на ваш сайт с iOS устройства, запрашиваются файл apple-touch-icon-precomposed.png, который должен быть оформлен в стиле iOS: закругленные углы, блики, и тень. Если файла с таким названием в корне проекта или rel=«apple-touch-icon-precomposed» нет, будет запрошен apple-touch-icon.png, которому разрешено быть таким, какой он есть, а все эффекты будут наложены самим iOS. Соответственно, нужна иконка под каждый размер. А вот если нет и этих файлов, то на рабочем столе iPhone или iPad будет отображаться не красивая иконка, а миниатюра страницы — ее скриншот.

Ходят слухи что Blackberry будет тоже использовать rel=«apple-touch-icon-precomposed», но возможности проверить, к сожалению, не было.

Подробнее прочитать про актуальные размеры для устройств iOS можно на официальном сайте.

Некоторые могут возразить, что все 9 изображений не очень и нужны. Однако, по крайней мере, основная Apple Touch Icon должна быть 180х180. Остальные устройства могут уменьшить изображение. Но некоторые другие платформы тоже используют Apple Touch Icon, поэтому лучше их объявить.

Как бы странно это не звучало, устройства под iOS не единственные, которые ищут Apple Touch Icon. Поскольку они популярнее и встречаются чаще других PNG иконок высоких разрешений, некоторые браузеры, вроде Android Chrome, используют их. Таким образом, лучше их объявлять, это позволит посетителю с совместимым устройством или браузером использовать одну из этих иконок.

Кстати, можно даже установить стиль строки состояния для веб-приложения:

Можно поменять её цвет, можно сделать полупрозрачной. Это тоже повлияет на вид нашего сайта.

Android

Устройства на Android отлично понимают формат PNG, а ещё поддерживают манифест веб-приложения manifest.json, в котором можно прописать все параметры того, как будет вести себя сайт, если его установить на домашний экран. Этот манифест пока, к сожалению, не читают устройства под IOS. А если Android не найдет этот файл, то он будет использовать apple-icon-touch.

Файл манифеста может содержать в себе ряд космических параметров, но тут находятся лишь те, которые нам необходимы для отображения сайта на домашнем экране:

Ключ name определяет подпись в приложению на домашнем столе. Если этот параметр не указан, подпись будет взята из в ;

Ключ short_name определяет укороченную подпись для приложения, если не хватает места для полного имени;

Ключ icons — определяет массив объектов иконок, может принимать три значения: sizes, src, type;

Ключ theme_color определяет цвет строки состояния. Начиная с 39 версии хрома для Android Lollipop появилась возможность менять цвет интерфейса браузера и цвет вкладки браузера.

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

Ключ display определяет режим отображения веб-приложения. Например, значение standalone, которое мы указали, позволило открывать нам сайт как приложение.

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

Автоматизация

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

Есть пакеты для сборки и для Gulp, и для Grunt.

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

Фавикон для сайта

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

Где отображаются фавиконы? Очень просто:

Фавикон выполняет следующие функции:

Теперь давайте остановимся на том, что именно даёт использование фавиконок.

По предыдущему скриншоту Вы уже и сами догадались, что пользователь с гораздо большей вероятностью выберет сайт с уже знакомой фавиконкой, даже если он находится внизу ТОП-10. Примерно та же история и с историей браузера. Например, пользователь запомнил фавиконку Вашего сайта, но забыл по какому запросу к Вам попал. Что делать? Правильно – идти смотреть историю браузера и листать ее до тех пор, пока на глаза не попадется та самая фавиконка. На данный момент самые узнаваемые в мире фавиконы у Яндекса, Google, Facebook, ВКонтакте, Одноклассники и Telegram. Если же у сайта нет фавикона, то его не будет и в поисковой выдаче, а в истории браузера вместо него будет «пустой лист».

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

Как Вы уже знаете, людям гораздо «теплее» относятся к картинкам, нежели к тексту. А теперь представьте, что посетитель куда-то торопится. Что он делает? Правильно – добавляет сайт в закладки, чтобы не потерять. Затем, когда у пользователя появляется свободное время, он принимает решение вернуться на сайт и… В закладках Ваш сайт будет найден не столько по заголовку статьи, сколько по новой/запомнившейся фавиконке. Если фавиконки нет, то пользователь может подумать, что ссылка битая и удалит ее из закладок.

Именно поэтому фавикон должен быть заметным и узнаваемым. Самые яркие примеры:

Экономя время пользователя

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

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

Обратите внимание, что мир смартфонов не стоит на месте – когда-то смартфон с экраном 640х360 пикселей считался роскошью, а сегодня и экраном в 1920х1080 пикселей (при той же диагонали) уже никого не удивишь. Из этого можно сделать только один вывод – под разное разрешение экрана необходимо делать разные фавиконы (а если точнее – разного размера.

Причем данная рекомендация актуальна как для Android-, так и для Apple-устройств.

Не торопитесь расстраиваться, т.к. позже будет рассказано про то, как эта проблема решается.

Преимущества для SEO

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

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

Более того, у Яндекса есть даже свой собственный робот, который не занимается ничем, кроме индексирования фавиконок (к слову – сроки индексирования – от 1 недели до 1 месяца).

Как проверить, проиндексировалась ли Ваша фавиконка, или нет:

Оба способа являются элементарными и не отнимают более 15 секунд.

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

Ну и еще пару слов про плагин Google Favicon. Даже не пытайтесь его искать и устанавливать в Ваш FireFox, т.к. он слишком давно не обновлялся, а потому не совместим с последними версиями браузера FireFox. Однако, можно найти аналогичные ему плагины.

Кстати, во многих других поисковых системах фавиконы тоже не добавлены в поисковую выдачу.

Фавиконы в браузерах ПК и на смартфонах

Секундой ранее мы уже упоминали, что фавиконы не отображаются в поисковой выдаче поисковых систем (за исключением, разве что, Яндекса). Однако, про браузеры такого сказать нельзя, причем это касается как мобильных браузеров, так и браузеров для ПК.

Как сделать фавикон для сайта

Способ 1: воспользоваться одним из специальных онлайн-сервисов, благо их, мягко говоря, много:

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

Очевидно, что на создание такой фавиконки ушло секунд 5-10, не больше.

Пример 2 – блог Comp Security. Здесь всё еще проще, т.к. на фавиконке нарисована просто красная стрелочка.

Пример 3 – блог СтоКрат. Как видите у нас с MegaIndex’ом только одно принципиальное отличие – у них фавиконка квадратная, а у нас – овальная.

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

Способ 2 – нарисовать самостоятельно по принципу «инициалов сайта».

Шаг 1. Открываем Paint, нажимаем на «Изменить размер». В открывшемся окне снимаем галочку «Сохранять пропорции» и выставляем размер. Неважно какой, главное – чтобы в итоге получился квадрат.

Шаг 2. Выбираете инструмент «Заливка», выбираете нужный цвет из палитры, а затем заливаете получившийся квадрат.

Шаг 3. Выбираете инструмент «Надпись» и пишете на фавиконке «инициалы» сайта. При необходимости можно изменить как сам шрифт, так и его размеры, а также сделать «инициалы» подчеркнутыми, наклонными и/или жирными.

В нашем случае в качестве «инициалов» будет выступать два знака доллара.

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

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

Способ 3 – воспользоваться сервисами, имеющие встроенные инструменты рисования, с возможностью загружать изображения с ПК, редактирования и уменьшения до нужных размеров.

Трёх примеров будет более, чем достаточно (ибо их тоже овер как много):

Способ 4 – фавикон-гаререи.

То же самое – всех перечислять не будем, т.к. их очень и очень много.

Thefavicongallery- более 300 фавиконок, которые можно сразу же скачивать;

Audit4web – огромное количество фавиконок на различные тематики;

Iconj- более 3000 фавиконок.

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

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

Для начала стоит отметить, что если Вы воспользовались способом 7, то данный вопрос Вас волновать не должен, ибо плагин на то и плагин, чтоб избавлять владельца сайта от подобных задач.

Если же речь идет о ручной загрузке фавиконки, то тут все несколько сложнее.

Во-первых, имя файла должно быть favicon.ico или favicon.png. Этот файл нужно загрузить в корневой каталог Вашего сайта (как правило, это папка htdocs или public_htm). Затем заходите на Ваш сайт и смотрите, загрузилась фавиконка или нет. Если нет – попробуйте очистить кэш браузера. Если даже после очистки нет результата – ничего страшного.

Во-вторых, на некоторых сайтах место для фавиконки по умолчанию задано в другом месте. В этом случае заходим на сайт, правый клик – выбор пункта «Просмотр html-кода», либо «Просмотр кода страницы» (ну или что-то подобное, в разных браузерах по-разному).

Не исключен и такой вариант задания служебной гиперссылки link:

Итак, путь, куда нужно загружать фавиконку, мы вычислили – туда и загружаем. Теперь это должно сработать на все 100%. Загружать можно по-разному:

В случае с CMS Joomla фавиконка, как правило, живёт в папке с активированным на данный момент шаблоном оформления. Исключение – Joomla 1.5 – там путь прописывался в файле index.php, находящийся в папке с тем же шаблоном. Т.е. в случае с Джумлой потребуется пройти по адресу /templates/папка_с_используемым_шаблоном_оформления/favicon.ico и заменить имеющуюся там фавиконку.

Аналогичная ситуация бывает и с WordPress-сайтами, но это редкость:

Однако, есть и другой вариант – загружаете фавиконку куда угодно, а затем между тегами прописываете код, в котором указывается путь к фавиконке:

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

Например, в WordPress это файл header.php, располагающийся в папке с активной темой оформления: wp-content/themes/Папка_с_вашей_темой_оформления. Файл header.php можно отредактировать как через FTP, так и через штатный редактор WordPress, так и через админку хостинг-провайдера.

Установка анимированной фавиконки

Принципиальных отличий между установкой статичной и анимированной фавиконки нет, за исключением двух моментов:

Однако, стоит отметить, что анимированная фавиконка – это не так козырно, как кажется на первый взгляд:

Именно по этим двум причинам с анимированными фавиконками пока что нет смысла заморачиваться. Если только «на будущее».

Выводы

Итак, что же мы выяснили?

Подробное руководство по фавикону (Favicon) для сайта

Что такое фавикон

Favicon (от англ. FAVorite ICON — «значок для избранного») — это иконка вашего сайта или web-страницы (обычно создается на основе логотипа).

Зачем нужен favicon

В первую очередь это часть брендинга — помогает придать вашему сайту уникальности.

Для SEO — делает поисковой сниппет более красивым — более кликабельным.

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

Рекомендации по формату и размеру фавиконки для поисковых систем

Yandex рекомендует использовать иконки размером: 120 × 120, 32 × 32 или 16 × 16 пикселей, в формат: SVG (рекомендуемый), ICO, GIF, JPEG, PNG, BMP. Анимация не поддерживается.

Google рекомендует использовать иконки по размерам кратные 48 пикселям, например 48 x 48, 96 x 96, 144 x 144 и т. д. Изображения в формате SVG не имеют конкретного размера. Поддерживаются значки всех допустимых форматов.

Сервисы для создания пиктограмм + готовые фавиконы для сайта

, а на открывшейся страничке, нажмите на кнопку «Download favicon» для её загрузки:

Альтернативы: onlinefavicon.com, xiconeditor.com.

Значки сайта для мобильных устройств

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

Пример ярлыка на смартфоне, если вы добавите сайт на главный экран.

Сервисы для создания фавиконки без программиста

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

Далее откроется страница с настройками — настраиваете цвета под свой вкус (все изменения сразу визуально отображаются) и нажимаем кнопку «Generate your Favicons and HTML code»

По умолчанию сервис сгенерит пути под корень — следовательно иконки нужно будет грузить в корень сайта. Не хотите грузить в корень переключите на пункт «I cannot or I do not want to place favicon files at the root of my web site. Instead I will place them here:» и укажите папку в которую вы собираетесь грузить иконки, см. скрин выше.

Далее realfavicongenerator сгенирирует все нужные иконки и код для их установки на сайт.

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

И копируем сгенерированный код на сайт в секцию head.

Примечание! Если вы выбрали не корень сайта, то лучше в сгенгеренные пути добавить адрес сайта, например: было href=»icons/apple-touch-icon.png» стало href=»https://web-revenue.ru/icons/apple-touch-icon.png»

Альтернативы: favicomatic.com, favicon-generator.org, faviconit.com/ru.

Где достать картинку для создания иконок и какая нужна

Для создания (генерации) иконок нам понадобиться готовое SVG изображение или хотя бы PNG изображение (с прозрачным фоном) не менее 260 на 260 пикселей (лучше всего 512×512 px или больше). В принципе можно сгенерить и из JPG картинки.

Картинки можно найти:

Как добавить фавикон на сайт (html или на cms)

Для того чтобы иконки начали работать их нужно закачать в корневую папку вашего сайта (обычно это public_html), далее прописываете в секции head (в wordpress это обычно это index.php или header.php) специальный код:

Это самый минимальный код, а вот так выглядит оптимальный код:

Дополнительно: У Microsoft (браузеров Edge и IE12) есть «Browser configuration schema reference» — XML-документ, в котором перечислены различные значки, соответствующие интерфейсу. Файл browserconfig.xml с таким содержимым.

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

В конечном итоге мы получаем примерно такой комплект иконок и конфиг файлов.

Внимание! Эти все иконки и код можно создать выше описанным генератором за 1 минуту.

Важно: установленные иконки сразу не появятся в результатах поиска в Yandex и Google — нужно подождать до 2х недель.

Заключение

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

Favicon — что это такое, как создать и установить фавикон в 2022 году, онлайн-генераторы иконок

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Разговор в сегодняшней статье пойдет о так называемых иконках Favicon.ico. Мы разберемся, что такое фавикон, почему в обязательном порядке его нужно устанавливать на своем сайте и как самому создать иконку нужного размера.

Чуть ранее я уже писал про то, где можно взять иконки для сайта и упомянутые там сервисы (в той статье) можно использовать для поиска подходящих вариантов Favicon.ico, но есть и специальные онлайн-генераторы (favicon generator), как отечественные, так и зарубежные, а также специализированные коллекции и галереи с подходящими по размеру фавиконами. Ну, и естественно мы поговорим о том, как настроить и подключить их к своему сайту.

Фавикон — это.

Фавикон — это значок веб-сайта или веб-страницы. Отображается браузером во вкладке перед названием страницы, и в качестве картинки рядом с закладкой, а также в адресной строке в некоторых браузерах.

По сути Favicon — это обычный значок (изображение небольшого размера 16 на 16 пикселей, иконка). Но для владельца сайта он может очень много значить. Однако, обо всем по порядку.

Само по себе название «фавикон» произошло от английского словосочетания FAVorites ICON, означающего — иконка для «Избранного» (так называются закладки в браузере Internet Explorer). Зачем она нужна? Очевидно, что так гораздо проще отыскивать взглядом нужную вам закладку, ибо легче искать знакомый значок, чем читать названия сайтов.

Раньше картинку Favicon вы могли видеть в адресной строке браузеров, перед URL-адресом открытой страницы (в моем IE9 так до сих пор и осталось), но после того, как все браузеры стали поддерживать вкладки, то данный значок мигрировал как раз на эти самые вкладки. Зато, когда их открыто очень много, именно фавиконы позволяют понять какая вкладка какому сайту соответствует:

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

А также, что немаловажно, поисковая система Яндекс отображает Favicon в своей выдаче (результатах поиска) для каждого ресурса, если у него этот значок будет иметься (был добавлен и правильно настроен владельцем сайта, а робот Яндекса успел уже его проиндексировать).

У Яндекса имеется специальный бот для индексации фавиконов под названием YandexFavicons (у них даже апдейты бывают, после которых и имеет смысл проверять наличие нового и обновленного Favicon.ico рядом с вашим сайтом в выдаче), в задачу которого входит сбор и обновление иконок для всех сайтов. Робот Яндекса, специализирующийся на их индексации, посещает сайты с периодичностью от нескольких дней до одного месяца (апы, соответственно, очень редкие получаются).

Поэтому не стоит ждать того, что недавно созданный в online generator или сделанный самостоятельно фавикон сразу же появится в поисковой выдаче Яндекса рядом с описанием вашего ресурса. Должно будет пройти какое-то время. Яндекс, после того как найдет Favicon.ico у вас на сервере, преобразует ее в формат PNG (из графического формата ICO) и с этого момента фавикон вашего сайта будет доступен по адресу:

Естественно, что для проверки своего сайта вам нужно будет в конце приведенной ссылки вместо URL-адреса моего блога написать свой.

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

В принципе, Favicon.ico нужного размера вы можете сделать и сами, так же у вас будет возможность создать его с помощью онлайн генераторов (из загруженных вами картинок) или же просто скачать целиком их online коллекцию или галерею.

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

В общем, выгода создания яркого и запоминающегося значка (мини-логотипа) для своего сайта очевидна (прежде всего это узнаваемость «бренда» и все хорошее, что из этого следует). Осталось только понять, как его создать и поставить на свой сайт, а также, что из себя должен представлять этот графический файл? На второй вопрос ответить проще — по определению Favicon должен быть сохранен в формате ICO, размещен в корне сайта (хотя, можно и другом месте), а его размер при этом должен составлять 16 на 16 пикселей.

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

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

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

Как создать Favicon онлайн и где можно скачать их коллекцию

Давайте я сначала приведу примеры сервисов (так называемых favicon generator), где можно не имея особых навыков сконструлить вполне себе достойный мини-логотип для своего сайта, ну, или хотя бы автоматом переделать подходящую картинку в формат, необходимый для загрузки фавикона на сайт.

В центре страницы генератора расположена область, где каждый квадратик является пикселем вашей будущей фавиконки. Ваша задача состоит в закрашивании разными цветами этих квадратиков. Для закрашивания одного квадратика цветом нужно поставить галочку в правой части окна сервиса в поле «Color Picker», выбрать на расположенной там же палитре нужный цвет и щелкнуть по нужному квадратику. Для удаления неправильной закраски поставьте галочку в поле «transparent» и щелкните по квадратику, в результате чего он станет бесцветным (прозрачным).

Для перемещения пикселя по холсту генератора вам нужно будет поставить галочку в поле «move». Результат своих трудов в реальном масштабе вы сможете наблюдать в области «Preview» под холстом. Если созданный вами Фавикон вам подходит, то нажмите на кнопку «Download» для его сохранения к себе на компьютер. В результате вы получите графический файл, который сможете затем скачать и загрузить на сервер хостинга.

Теперь вы знаете как сделать мини-логотип для своего сайта с нуля. Но если вы графическими талантами не обладаете, то можете на сервис онлайн генератора загрузить любую картинку для будущего фавикона, которая будет служить болванкой. Картинка может быть абсолютно любого размера и формата. Для загрузки файла значка на онлайн сервис вам нужно будет нажать в левой части окна сервиса на кнопку «Import Image».

В открывшемся окне, нажав на кнопку «Обзор», найдите на своем компьютере подходящее изображение. Затем выберите, что делать с соотношением сторон вашей картинки при преобразовании его в формат 16 на 16 (квадрат). Это актуально, если загружаемое вами изображение не квадратное. В этом случае возможны два варианта: оставить соотношение сторон неизменным (Keep dimensions), либо преобразовать картинку к квадратному виду (Shrink to square icon). Во втором случае изображение будущей фавиконки будет искажено по одной из осей.

Для загрузки в online generator и преобразования вашей картинки нужно будет нажать на кнопку «Upload». Созданная из него Favicon.ico будет доступна к редактированию точно так же, как и нарисованная вами. Когда закончите колдовать над шедевром, то нажмите на кнопку «Download» для того, чтобы скачать его к себе на компьютер.

На этом онлайн сервисе также имеется возможность использовать коллекции фавиконов, созданные другими его пользователями и выложенные в общий доступ. Для того, чтобы посмотреть имеющиеся в галереи экспонаты, вам нужно будет нажать в левой части окна либо на кнопку «Latest Favicons» для просмотра коллекций отсортированных по дате создания, либо на кнопку «Top Rated Favicons» для просмотра галерей отсортированных по рейтингу.

Для того, чтобы создать фавикон, сначала необходимо ввести название сайта или компании и выбрать вид деятельности. Сервис предложит готовые к использованию несколько десятков шаблонов фавикона. Более подробно, как создать фавикон, можно прочитать здесь. После создания Favicon.ico, вы можете скачать файл к себе на компьютер в формате ICO или PNG.

После этого вам только остается нажать на кнопку «Создать». На открывшейся странице вы увидите ссылку для скачивания получившегося фавикона.

Подборка онлайн генераторов, коллекции и галереи фавиконов

Если вам по каким-либо причинам не понравились описанные выше favicon generator, то могу предложить попытать счастье на одном из следующих бесплатных онлайн-сервисов:

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

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

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

Если вы знаете еще какие-то подобные ресурсы, то я добавлю ваши ссылки в этот список.

Как установить Favicon на сайт и прописать путь до него

Ваш браузер и поисковый робот Яндекса будут искать фавикон прежде всего в корневой папке вашего сайта. Поэтому можно просто подключиться к сайту по FTP и загрузить в его корневую директорию (обычно это папки public_htm или htdocs ) ваш файлик Favicon.ico (лучше его название писать с маленькой буквы). Откройте теперь ваш ресурс в каком-нибудь браузере и посмотрите, не поменялась ли пиктограмма на вкладке. Поменялась? Нет? Ну, ничего страшного.

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

Откройте исходный код любой страницы вашего сайта. Чтобы посмотреть ее исходный код, достаточно будет щелкнуть по странице правой кнопкой мыши и выбрать соответствующий пункт контекстного меню (например, «Исходный код» в старой Opera, либо «Исходный код страницы» в Мазила Фаерфокс, либо «Просмотр кода страницы» в Google Chrome, либо «Просмотр HTML-кода» в IE) или нажать сочетание клавиш Ctrl+U. Теперь поищите в верхней части кода страницы строку, задающую путь до favicon.ico.

Она может выглядеть примерно так:

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

В Joomla Favicon обычно живет в папке с используемым вами шаблоном (путь до нее в Joomla 1.5 прописывался в файле index.php из каталога этого же шаблона,а вот в Joomla 3 все стало несколько сложнее). Т.е. для смены фавикона в Джумле достаточно будет пройти по этому пути и залить туда свой файлик favicon.ico, а на вопрос о замене ответить утвердительно:

Файлик favicon в WordPress по умолчанию тоже может лежать в папке с используемой вами темой (там же и задается путь до него):

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

Как установить анимированный фавикон? В принципе, точно так же, как и обычный. Будет отличаться только код, вставляемый в шаблон вашего сайта, с помощью которого вы указываете браузерам и поисковому роботу Яндекса путь до нужного графического файла. Дело в том, что анимированный Favicon будет иметь расширение GIF, и, следовательно, в строках кода нужно будет прописать примерно так:

Вот и вся разница между анимированными favicon и обычными. Но следует учесть, что будет работать анимированная иконка только в FireFox, в остальных же браузерах она будет статичной. Яндекс же, при загрузке вашего анимированного фавикона, преобразует его в статичный формат PNG. Но, по-моему, овчинка выделки не стоит — устанавливать вместо обычного мини-логотипа для сайта анимированный не имеет особого смысла. Но это только мое ИМХО.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Комментарии и отзывы (66)

Фавикон — сила! Особенно, если интересный! Сам хотел написать на данную тему пост

Спасибо за статью. Можете подсказать почему иконка может отображаться в Firefox (у любых пользователей) и не отображаться в IE, и в Яндексе.

Иконку поставил давно, так что Яндекс уже давно должен был бы ее проиндексировать.

Vendigo: а в каком графическом формате у вас фавикон? Firefox единственный из браузеров, понимающий анимированный GIF.

Расширение ico. Давно уж делал с помощью какого то плагина в Фотошопе. Но точно не анимированный GIF.

Vendigo: попробуйте кинуть копию иконки Favicon в корень сайта, возможно, что проблема в прописанном пути к иконке.

Она лежит вот здесь /wordpress/favicon.ico

А вот код страницы:

Vendigo: попробуйте все же в корень сайта кинуть, там браузеры и Яндекс, возможно, найдут ее автоматически.

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

Спс за статью,очень помогла, сделал фавикон для сайта из подписи!

Я как то недооценивал эти фавиконки, но сейчас на всех сайтах обязательно сделаю. Слышал, что если сайт далеко от топа в выдаче Яндекса, то иконка не проиндексируется. Так ли это?

если смотреть главную страницу сайта как — http://сайт.ру/index.php то отображается предыдущий вариант фавикона — синий смайл, а на главной как http://сайт.ру/ и другие разделы мультфильмов показывают новый вариант — розовый пончик.

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

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

А у меня другая проблема возникла.

Через несколько дней отказалась показываться лента RSS трансляции (она пуста).

при анализе выдало, что проблема именно в фав-иконке. когда удалил её и коды, RSS снова заработала

Дмитрий спасибо за статью

Долго думал над этим вопросом

наткнулся на эту статью и понял что надо уделить время

на всё про всё ушло не более 10-ти минут и фавикон на базе_)

не знаю о чём думал раньше.

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

Спасибо.Как раз что искала.

Очень интересная и нужная статья. Спасибо.

А то если нажать по скаченному файлу — у меня открывается программа Фотошоп. но сохранять — не сохраняет.

Спасибо за полезный блог! Вопрос по фавикону. На сайт, сделанный на Joomla, установить иконку получилось очень легко, просто удалила джумловскую и загрузила свою. С форумом SMF, который сидит в отдельной папке сайта, так не получается. Веб мастер из меня никакой, более того, трогать HTML коды просто боюсь, как бы чего не вышло. ИЗ Вашего объяснения как прописать в коде к форуму и что именно, непонятно. Нельзя ли поподробнее, что именно нужно прописать и где именно в том кусочке кода, который Вы привели? Спасибо заранее.

Подскажите пожалуйста как это исправить.

Сайты у меня на joomla.

ну что, Приступим! Автор МАЛОДЕЦ! спасибки за статью!

Подскажите пожалуйста. Сайт на Джумла. Шаблон Beez. поменяла фавикон на свой в шаблоне,обрадовалась,когда все получилось. В программном коде ничего не делала. Но вчера попала в Яндексе в ТОП10,а фавикона рядом с выдачей нет. Почему,все же надо в программный код вставлять? очень жду ответа

Лиза: возможно, что Яндекс еще не проиндексировал ваш фавикон. Вы его видите по такой ссылке:

много интересной информации.спс.У меня такой вопрос:как прикрепить иконку сайта,к письмам моей рассылки?Ну например у mail.ru,vkontakte,yandex?

Спасибо большое! Не знал, как прописать favicon на WP, теперь все получилось.

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

В чем может быть засада?

Для Павла. Убрать засаду можно порывшись в файлах джумла. Найдите текст с кодом логотипа Джумлы и поменяйте на свой. Да не обязательно размер фава ставить 16×16, у мну например 64×64, а то 16 стрёмноватый получался.

Странно я вродибы все правильно делаю, а фавикон не появляется. Может надо немного подождать?

Спасибо! Давно хотела сделать фавикон, с помощью этой статьи кажется созрела : ))

В знак благодарности за полезный сайт и просто для людей еще одна неплохая ссылка для создания анимированных фавиконов: http://favicon.htmlkit.com/favicon/

Дмитрий спасибо! Все очень интересно и информативно!Сразу забил блог в закладки! Особенно за ссылку на онлайн генератор Favicon.ru

Быстро получил желаемый фавикон. Но хочу поэкспериментировать с картинкой. С уважением Сергей.

Замечательная статья. Мне очень помогла. Я установила значок, который очень хотела. Спасибо большое!

Все поняла, сделала фавикон, скопировала его в корневой каталог. Но он не отображается. 🙁 Может, я не правильно настроила плагин AP Favicon? Или, может, он совсем не нужен? Или нужен другой? Подскажите, пожалуйста!

Отличная статья! Спасибо.

Большое спасибо, решил вопрос с вашей помощью.

отличная и доступная статья. спасибо!

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

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

Спасибо! Теперь и у моего блога есть иконка!

прописала код, захожу с почищенным кэшем — нет иконки 🙁

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

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

Иконку сгенерировал и поставил без проблем!

О проекте «Кто на новенького» я читал на сторонних ресурсах — серч и т.д.,

но только по вопросу создания «favicon.ico» я непосредственно заглянул сюда.

Мой вопрос освещен добротно, т.е. у меня закрепилась положительная оценка проекта.

Автору так держать!

Спасибо всё просто и понятно я вас в закладки добавлю спасибо вам буду приходить ещо к вам

Спасибо! Хороший сайт. Читаю Вас регулярно.

Я конечно новичок и если что вы меня поправите, но когда я изменил в кодах

x-icon на формат ico то иконка стала грузиться быстрее. Или можно иконку поставить через плагин Easy Favicons

Спасибо за блог. Полезно и понятно.

Вчера сделал наконец-то фавикон. В Гугл Хром и Опере — нормально. В Мозилле и в Эксплорере — нету. В чём может быть причина? И насколько это актуально?

Здравствуйте, Дмитрий! Большое спасибо за статью. У меня вот какая проблема — фавиконка создана месяц назад, браузер (у меня яндекс.браузер, но и эксплорер также) отображает фавикон, а вот поисковики — нет. Вроде бы времени то много уже прошло. Захожу в панель управления спринхоста, далее в файловый менеджер, потом в public.html, потом название моего сайта и там лежит моя иконка в расширении ico.

Подскажите, куда еще ее положить, чтобы яндекс все-таки ее нашел?

Извините, если невнятно изъясняюсь, я в этом деле новичок 🙂

Валерия: Здравствуйте! Скорее всего, он ее уже благополучно нашел, но вот в выдаче иконка появится только после очередного апдейт фавиконов в Яндексе. Происходит он не так часто, как обычный апдейт выдачи, а где его можно отслеживать смотрите в конце приведенной публикации.

Дмитрий, спасибо большое! Получается, favicon обновились уже после того, как я установила свой. Значит, не видит? или в следующий апдейт уже?

Валерия: ну, возможно, что еще на тот момент Яндекс вашу новую иконку не проиндексировал. Попробуйте почитать в той ветке на Серче или поспрошать их старожилов.

ага, попробуем! Еще раз благодарю!

Очень полезная статья! Особенно для тех, кто новичок в деле оформления сайтов.

Пробую установить favicon на сайте (WordPress) после обновления файла ничего не получилось. помогите, пж

Очень хорошая статья, полезная для тех, кто только собирается ставить фавикон.Я начинающий человек, поэтому у меня возник вопрос.Только сразу прошу меня извинить, если он окажется для вас глупым.Вот «путь к вашей картинке» — это её адрес?Если картинка находится у меня на компьтере, то там есть ссылка на неё, это и есть её путь? Я правильно поняла?Спасибо. Извините за настойчивость и беграмотность в html.

Безумно благодарна за Ваши статьи. Много нового узнаю.

Здравствуйте, у меня была такая же проблема до недавнего времени, но я нашел этот сайт http://onlinefavicon.com/, который мне помог конвертировать PNG файл 16×16 или 32×32 в ICO файл. Там есть еще и галерея с значками, созданными другими пользователями и можно скачать то, что понравится. С инструментом рисования вы можете создать свой собственную иконку. В конце есть описание, как добавить значок на свой сайт.

Протестировал, время загрузки сайта xmeg без добавления кода favicon в HEAD составило 14 секунд, а когда прописал в заголовок HRAD время составило 7.5 секунд, фактически на то чтоб найти favicon в корневой папки браузер тратил лишние 7 секунд времени.

Подскажите, пожалуйста, почему у меня фавикон отображается только в админке сайта, а на самом сайте на страницах перестал отображаться?

Спасибо за ссылки. Правда, Вы забыли предупредить, что, например, на Faviсon.cc, видимо, следует сперва зарегиться. Я сходу полез рисовать, а через 20 минут НЕ СМОГ скачать свой «шедевр», т.к их «download» меня просто игнорил! Так и ушёл не солоно хлебавши )

А как в вордпресс для отдельной страницы задать свою фавиконку, не такую, как на всем сайте.

Источники информации:

• http://iklife.ru/sozdanie-sajta/kak-sdelat-i-ustanovit-favikon-na-sajt.html
• http://wpcourses.ru/install-favicon-wp/
• http://conicheva84.ru/sozdaj-sajt-sam/kak-ustanovit-favikon-na-sajt/
• http://ipipe.ru/info/wordpress-favicon-ico
• http://webnub.ru/realiti-po-zarabotku/sozdanie-bloga-na-wordpress/tekhnicheskaya-chast/favikon-dlya-sajta/
• http://habr.com/en/post/330584/
• http://stokrat.org/blog/dolbim-didzhital/favikon-dlya-sayta/
• http://web-revenue.ru/sajtostroenie/favicon
• http://ktonanovenkogo.ru/seo/favicon-favikon-sozdanie-ikonki-favicon-ico-i-razmeshhenie-ee-na-svoem-sajte.html