Как добавить фавикон на сайт html
Перейти к содержимому

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

  • автор:

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

Формат ICO и другие графические форматы иконок. Установка фавикон на сайт с поддержкой для iOS, Android и др. устройств, а также новинок HTML5. Пошаговая инструкция, от простого к сложному, доступно и наглядно, для начинающих веб-мастеров.

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

Так вы узнаете о некоторых секретах формата ICO, проблемах с Internet Explorer и их устранении, о новых графических форматах favicon (прозрачных и анимированных) , стандартах HTML5 и иконках для мобильных устройств под iOS и Android, а также многое другое.

  • Формат ICO
  • Файл favicon.ico
  • image/vnd.microsoft.icon vs image/x-icon?
  • BugFix для Internet Explorer
  • Другие графические форматы фавикон
  • Фавикон в HTML5
  • Favicon.ico для мобильных браузеров
    • Фавикон для Apple
    • Фавикон для Android

    Формат ICO

    А начну я с того, что формат ICO (Windows icon) был разработан компанией Microsoft для значков файлов. Он аналогичен формату CUR (Windows cursors) и наиболее близок к BMP. Отличие лишь в заголовках, а также наличии маски, что и позволяет создавать прозрачность в рисунках. Однако альфа-канал (полупрозрачность) для 32-битных значков появился лишь в Windows XP.

    Файл favicon.ico

    Идея с файлом favicon.ico (картинкой 16х16 пикселей) тоже принадлежит Microsoft, которую они реализовали для закладок в Internet Explorer 5. Отсюда и название fav – сокращённо от favorite – избранное, а icon – значок. На данный момент этот формат поддерживается всеми популярными браузерами, но главное в деталях. Условно обобщённый вариант установки фавикон на сайт имеет следующий вид:

    Обратите внимание на то, что в приведённом примере используется два отношения: shortcut (с англ. ярлык) и icon (с англ. иконка). Фишка в том, что shortcat здесь является излишним, и был оставлен лишь для старых версий Internet Explorer, но он должен идти перед icon .

    image/vnd.microsoft.icon vs image/x-icon?

    Интересно и то, что в 2003 году формат ICO был зарегистрирован Саймоном Батчером (Simon Butcher) в IANA и его MIME-типом стал image/vnd.microsoft.icon. Проблема в том, что старые версии Internet Explorer не могут корректно интерпретировать его, так что лучше использовать старый image/x-icon .

    BugFix для Internet Explorer

    Не забываем и о том, что для Internet Explorer можно использовать HTML-костыли основанные на комментариях, например:

    Другие графические форматы фавикон

    Впрочем, сейчас активно стала набирать обороты интеграция и других графических форматов: PNG, GIF, JPEG, APNG и SVG. Лучше всего дело обстоит со статическими форматами PNG и GIF, их поддерживают все новые версии популярных браузеров. Анимированный APNG работает только в Firefox (начиная с версии 3.0) и Opera (начиная с версии 9.5) , а вот анимированный GIF не понимают лишь IE и Safari. JPEG не поддерживает только Internet Explorer.

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

    Обращаю внимание на то, что для APNG использует MIME-тип video/png , а для GIF (даже анимированного) – image/gif . Также интересен здесь и MIME-тип для SVG формата, это image/svg+xml .

    Фавикон в HTML5

    Теперь, что касается формата favicon в HTML5, подробней читайте тут. Интересным здесь является атрибут sizes , который задаёт размер иконок для визуально отображения в формате:

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

    Favicon.ico для мобильных браузеров

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

    Фавикон для Apple

    Например, для Safari на iOS рекомендуется следующий набор отношений:

    Если атрибут sizes не указан, используется значение по умолчанию 57×57.

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

    • apple-touch-icon-57×57.png
    • apple-touch-icon-72×72.png
    • apple-touch-icon-114×114.png
    • apple-touch-icon-144×144.png

    Если же Вы хотите, чтобы iOS не добавляла к иконке каких-то эффектов, используйте ключевое слово precomposed , например:

    Здесь тоже имеется набор автоматически распознаваемых имён:

    • apple-touch-icon-57×57-precomposed.png
    • apple-touch-icon-72×72-precomposed.png
    • apple-touch-icon-114×114-precomposed.png
    • apple-touch-icon-144×144-precomposed.png

    Фавикон для Android

    Браузеры на базе Android унаследовали формат Apple. По сути, будет достаточно указать, что-то вроде следующего:

    Адрес файла favicon.ico

    Наверное, Вы обратили внимание на то, что в некоторых примерах используется относительный, а не абсолютный путь к фавикон? Это не случайно, т.к. помимо HTTP сейчас набирает обороты HTTPS. Для избежания проблем, в абсолютном адресе, проще не указывать протокол, например:

    или использовать относительный путь.

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

    Ну, а теперь попробуем сформировать обобщённый вариант вставки фавикон сайт, у меня он получился таким:

    Попробую внести ясность в предложенную конструкцию. В начале идёт фавикон для Internet Explorer, который среагирует на shortcut . Далее оптимальным будет статичная PNG иконка с прозрачностью, а анимацию иконки я отдал GIF формату. Для мобильных устройств создадим иконки стандартного размера 57×57 пикселей, одну без эффектов, а другую со своими эффектами ( precomposed – отключит эффекты браузера) . Для того чтобы избежать проблем с HTTP и HTTPS я указал относительный путь, начиная от корня сайта ( / – в начале адреса) , но для IE, наверное, лучше будет использовать абсолютный путь.

    Еще по теме: Как создать всплывающее окно на HTML: подробная инструкция

    На этом у меня всё. Надеюсь, что статья была Вам полезна. Если сможете внести какие-то правки, дополнения, уточнения и т.д. – пишите. Спасибо за внимание. Удачи!

    Короткая ссылка: http://goo.gl/LVkHdk

    Мммдаа))) Как всё сложно то оказывается. А на блоггере такая же история должна быть? То есть со всякими там разновидными кодами? Я то просто вставлял картинку обычную в шаблоне там, в блоггере, и думал что этого предостаточно.

    17 ноября 2014 г., 5:00 Удалить комментарий

    2Ренат Рафаилевич естественно, что всё описанное несёт лишь рекомендательный характер для решения тех или иных задач. Обычно достаточно просто скопировать файл favicon.ico в корневую директорию сайта и всё. Даже что-то прописывать в HTML не нужно.

    17 ноября 2014 г., 11:47 Удалить комментарий

    Так и делаю, однако например некоторые браузеры так закэшируют иконки что хрен их оттуда выкэшируешь =).. Это Firefox, а кроме того Яндекс вебмастер и тот же pr.cy. Помогает только ручное прописывание иконки под другим именем

    17 ноября 2014 г., 12:18 Удалить комментарий

    2Игорь Тетерин Если ты о панели закладок в firefox то это даже хорошо. В Chrome постоянная их подгрузка идёт, что не очень удобно. Помню для лисы использовал расширение, но это лишняя нагрузка. так что проще удалить и снова добавить закладку.

    Что же до кэширования иконки на тех же вкладках браузера, то тут можно открыть её в отдельной вкладке и сделать Ctrl+F5. Плюс иногда есть возможность подтасовать дату в заголовках через директивы в том же .htaccess и т.п. Много вариантов.

    17 ноября 2014 г., 12:26 Удалить комментарий

    HTML: Создание и добавление фавикона

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

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

    Для создания фавикона можно использовать практически любой графический редактор, однако формат изображения, которое вы выбрали должен быть 16×16, 32×32 или 64×64 пикселя, с использованием 8-битного или 24-битного цвета. Изображение должно иметь расширение PNG (стандарт W3C), GIF или ICO.

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

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

    В качестве примера программы, позволяющей создавать иконки, можно привести Favicon Create (скачать) – это самая простая программка. Чтобы сделать иконку понадобится всего лишь обычная картинка в формате *.jpg, или *.bmp, которую можно сделать в любом графическом редакторе, даже в том же пейнте. Загружаем картинку в программу, затем выбираем размер, глубину цвета и нажимаем кнопку старт. Все готово.

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

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

    В таблице показаны различные варианты добавления фавикона и приведена поддержка браузеров:

    Google Chrome Internet Explorer Firefox Opera Safari
    href=»httр://mysite.ru/myicon.ico»> Да Да Да Да Да
    Да Да (с IE 11) Да Да Да
    Да Да (с IE 9) Да Да Да
    Да Да (с IE 11) Да Да Да
    Да Да (с IE 11) Да Да Да
    Да Да (с IE 9) Да Да Да

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

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

    Быстрая навигация по этой странице:

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

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

    Favicon — это иконка, которая по умолчанию имеет формат 16 на 16 пикселей и отображается в верхней части вкладки браузера рядом с названием сайта/страницы. Если иконка не задана или задана не правильно, то тогда в браузере рядом с названием сайта просто рисуется значок самого браузера (например, значок Firefox или Google Chrome).

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

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

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

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

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

    Исторически сложилось, что для сайтов используется формат .ico. Особенность этого формата состоит в том, что внутри одного .ico-файла может храниться несколько картинок размером от 16х16 до 64х64 (размер должен быть кратным восьми). Правда, для веб-сайтов в действительности используется только формат 16х16 — ни Яндекс, ни браузер не будут показывать другой размер иконки.

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

    Теоретически, сохранить файл можно в любой папке с файлами сайта, но крайне рекомендуется сохранять его именно в корневой директории вашего ресурса — чтобы он всегда был доступен по адресу vash-site.ru/favicon.ico, так как по умолчанию именно там его ищут поисковики и браузеры.

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

    Добавление иконки для вашего ресурса является очень простым: достаточно лишь прописать необходимый html-код между тегами

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

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

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

    Теперь второй шаг — установка 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. Но в любом случае, должно работать. Попробуйте посмотреть в другом браузере.

    Хочу поделиться плагином для Фотошопа для сохранения изображений в формате ico. http://narod.ru/disk/16359056001/ICOFormat.8bi.html Сохраняете плагин в папку Фотошопа . Plug-Ins/File Formats Теперь при выборе Сохранить как. в списке появится и формат ico. И ещё — Интернет Експлорер будет отображать иконку в адресной строке только после добавления странички в избранное. Такой вот он капризный. (Может, в новых версиях это уже устранено, я точно не знаю)

    Что то у меня не получается установить favicon.Прописала на всех страницах сайта:
    Сама картинка находится в корне public_html Кэш очистила. Что я опять не то натворила(?

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

    Эту строку (
    ) обязательно нужно ставить на каждую страницу сайта? Или достаточно разместить её на главной странице сайта?

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

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

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

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

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

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

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

    Почему-то в Firefox не заменяется favicon на странице. Меняю на сервере, меняю ссылку — ничего. Необходимо перезапускать браузер. И то, не всегда работает. Иногда открывается давно удаленный favicon. Не понимаю.

    В других браузерах появляется? Если да, то не обращайте внимание, трудно удалить 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, а вот мазила в этом плане норм. так что раньше времени не паникуем и держим мазилу под боком

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

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

    Что такое фавикон и как добавить фавикон на сайт

    Фавикон (сокр. от англ. FAVorite ICON — «значок для избранного») — значок веб-сайта или веб-страницы. Если сказать кратко, то это маленькая картинка, отображаемая в браузере или закладках. Ещё его можно увидеть в поиске Яндекса, слева от вашей статьи. Красной стрелочкой отмечен значок моего блога.

    На что влияет фавикон и зачем он нужен?

    1. Найти подходящую картинку.
    2. Сделать фавикон в онлайн генераторе.

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

    Можно заказать оригинальный фавикон и логотип на сервисе KWORK по вашим требованиям.

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

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

    Добавить фавикон на сайт два способа

    1. Используя возможности Вордпресс
    2. Добавляя файл в корень нашего сайта.

    Первый способ мега-прост, его я и рекомендую всем новичкам особенно, для того, чтобы не лезть в код. Для этого переходим в консоль сайта на Вордпресс⇒Внешний вид⇒Настроить⇒Заголовок сайта. Скролим вниз и видим место куда добавить значок.

    У меня уже добавлен, вы добавляете заранее заготовленную картинку и всё готово, вверху жмёте «Опубликовать» и проверяете, как значок выглядит в браузере. Если ничего не поменялось, очистите кэш браузера.

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

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

    внутри тега редактора шаблона или с помощью плагина. После этого, должно всё работать корректно.

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

    Заключение

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

    Проверка фавикона сайта

    Получите доступ к полному аудиту сайта, включающему более 300 технических аспектов.

    Бесплатный инструмент для SEO проверки и аудита сайта

    • Сканируйте сайт на наличие 300+ технических проблем
    • Мониторинг состояния сайта 24/7
    • Отслеживайте рейтинг сайта в любой географической зоне

    Что такое favicon

    Классический favicon (иконка для сайта) – это ICO-файл с размером 16 × 16 с поддержкой 16 или 24-битных цветов и прозрачности. Намного позже он появился в формате 32 × 32, но старые браузеры все еще уменьшают его до 16 × 16.

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

    Проверьте, есть ли на вашем сайте фавикон и как он отображается в разных браузерах

    Почему favicon имеет значение

    Основная цель использования фавикона – это улучшение удобства пользования сайтом. Этот файл присутствует практически во всех современных популярных браузерах и вкладках браузера. Изначально фавикон был создан для быстрого визуального поиска необходимого сайта среди тысяч закладок в Интернете. Сейчас же он является удобным символом идентификации сайта при большом количестве открытых вкладок. А в некоторых поисковых системах (например Яндекс, а с 2019 года и Google), фавикон появляется и в результатах поисковой выдачи напротив каждого сайта.

    Displaying favicons in the browser

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

    Примеры фавиконок

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

    favicon examples in browser

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

    sitechecker favicon example

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

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

    • Favicon Generator;
    • Favicon Generator ORG;
    • Gen Favicon;
    • Degraeve Favicon.

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

    Чтобы понять, какие вообще варианты фавиконок могут быть, изучите примеры на этих ресурсах:

    • Fresh Favicons;
    • The Favicon Gallery;

    Проверьте сайт на ошибки SEO

    Никакой favicon не влияет на удобство использования сайта, но отсутствие тегов Title и Description может привести к потере трафика.

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

    Основная проблема в том, что Photoshop не поддерживает файлы формата «.ico». Поэтому необходимо загрузить и установить его плагин из Telegraphics.

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

    После этого выберите папку IMAGE, перейдите к IMAGE SIZE и измените его на 16 × 16 пикселей. Не забудьте удостовериться, что вы не размываете его, нажав кнопку RESAMPLE IMAGE и BICUBIC SHARPER. Если вы удовлетворены результатами, откройте папку FILE и нажмите SAVE AS.

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

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

    1. Загрузите фавикон на ваш сервер. Затем пропишите его адрес для FTP-сервера. Нажмите Enter, войдите в систему и просто загрузите файл в корневую папку.
    2. Измените HTML-страницу сайта. Найдите и загрузите файл «header.php» или «index.html» с сервера. Если ваш сайт сделан на HTML, вы должны вставить код в область head файла index.html:

    Если вы работаете с WordPress, вставьте код в область head файла header.php:

    Что такое фавикон для сайта: зачем нужен и как создать фавикон самостоятельно или с помощью генератора фавиконов

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

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

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

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

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

    Так отображается фавикон в поисковой системе Google

    Для чего нужен фавикон, какую функцию он выполняет

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

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

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

    Сайты и фавиконы в истории браузера

    Требования к фавикону

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

    • Какой фавикон используют конкуренты? Иконки разных сайтов, особенно близких по тематике и сфере деятельности, не должны совпадать ни по цвету, ни по оформлению. Если повторы есть, то можно потерять клиентов, которые начнут переходить в другой интернет-магазин или блог.
    • Ассоциируется ли фавикон с бизнесом? Фавикон, как логотип или фирменные цвета, должен перекликаться с философией и общей концепцией упаковки бизнеса. Взглянув на картинку, пользователи должны легко понимать, какой компании или бренду она принадлежит, а также что они получат после выполнения перехода на сайт.
    • Есть ли удобочитаемость? Фавикон – маленькое изображение, которое нельзя увеличить или развернуть на весь экран. В связи с этим не стоит внедрять в дизайн длинные фразы и мелкие детали – пользователи просто не смогут их рассмотреть.
    • Сможет ли фавикон использоваться на протяжении длительного времени? Пользователи привыкают к дизайну иконок, которые являются элементом брендинга, поэтому изменять оформление часто не получится (исключение – проведение редизайна сайта ). Не найдя знакомую картинку в закладках или выдаче, человек просто уйдет на другой сайт. Некоторые компании иногда видоизменяют фавиконы, но основной визуальный образ и палитра остаются узнаваемыми.

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

    Требования к фавикону: Яндекс

    Формат

    Первые фавиконы появились в браузере Internet Explorer, они имели формат .ico и требовали загрузки в корневой каталог. Формат .ico используется и сегодня, он достаточно удобный: доступно указание иконок разной битности и размера. Выделим другие форматы:

    • .png, который поддерживают практически все операционные системы и платформы;
    • .svg, характерный для браузера Safari (macOS и iOS);
    • .jpeg и .gif, которые разрешено использовать, но могут возникнуть сложности с поддержкой разными браузерами. Например, Firefox и Opera допускают применение анимированных иконок, но не рекомендуют их: движущиеся элементы перетягивают внимание, раздражают пользователей, просматривающих сайт.

    Каждый браузер имеет ряд ограничений:

    • Google Chrome. Поддерживает ICO, а также PNG, JPEG, SVG и GIF, не поддерживает – APNG и GIF-анимацию;
    • Opera. Поддерживает ICO, PNG, JPEG, GIF, GIF-анимацию и APNG, не поддерживает – SVG;
    • Firefox. Поддерживает ICO, GIF и PNG, JPEG, SVG и GIF-анимацию, APNG (от 3.0);
    • Яндекс. Рекомендуемый формат – SVG, поддерживает ICO, GIF, JPEG, PNG, BMP, но не анимацию;
    • Safari. Поддерживает ICO и SVG, а также PNG, JPEG и GIF, не поддерживает – APNG и GIF-анимацию.

    Универсальный формат – ICO (предпочтителен) и PNG (поддерживает прозрачность). Можно тестировать JPG (весит меньше PNG, но прозрачности нет), а для Safari больше подходит SVG, остальные варианты стоит использовать с осторожностью ввиду возможных проблем с отображением.

    Размер фавикона для сайта

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

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

    Прозрачность оказывает влияние на вид иконки в разных контекстах.

    Дизайн favicon

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

    • фирменная атрибутика. Можно пойти по простому пути, используя для создания фавикона логотип компании. Альтернатива – фирменные цвета, дополненные интересно обыгранными 1-2 буквами из названия сайта, бизнеса, блога – ассоциирующиеся с компанией. Например, иконка на сайте М.Видео – красный круг на прозрачном фоне, в центр которого заключена белая буква «М», у «Вайлдберриз» – оттеночный фиолетовый круг с WB;
    • понятность. Фавикон – маркер, он помогает клиентам узнавать сайты, но ничего не продает. Не стоит использовать маркетинговые посылы «new», «ТОП», «sale» и подобные, если они не фигурируют в названии бренда. Рекомендуется в принципе отказаться от текста, который в маленьком квадрате выглядит неразборчиво, исключение – пара релевантных компании букв (как в примерах выше). Фотографии тоже работают плохо в маленьком разрешении, как и многоцветные иконки;
    • минимализм. Четкие формы, гармоничные оттенки, простота в деталях делают фавикон более запоминающимся, выделяют его на фоне остальных.

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

    Заметный фавикон в поисковой выдаче Google

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

    В вопросе о том, как сделать бесплатный фавикон для сайта, на помощь придет программа Photoshop (универсальный инструмент для графического дизайна ). Можно использовать как десктопную, так и онлайн-версию, для первой существуют плагин, упрощающий процесс формирования иконок в нужном формате и разрешении. Если навыков работы с «Фотошопом», а также времени на обучение нет, то проще автоматизировать процесс, используя специальные онлайн-сервисы. Они дают подсказки, предлагают базы готовых идей и способны преобразовать картинку в нужный формат.

    ТОП-3 генератора favicon

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

    Wizlogo

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

    • бизнес-категории, например, продажи, мода, образование или спорт;
    • выбранных оттенков (каждый дополнен описаниями согласно психологии цвета);
    • указанного названия компании.

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

    • файл 32×32 favicon (ICO);
    • иконки для сайта, iOS, Windows, Android (пакетно в разных форматах и размерах).

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

    Внешнее оформление генератора фавиконов

    Favicon.by

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

    В редакторе легко создавать простые иконки

    Favicon.io

    Сервис Favicon.io – англоязычный, если есть языковой барьер – достаточно использовать встроенный в браузер переводчик. Функционал сервиса доступен бесплатно, есть следующие возможности:

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

    Дополнительно – инструкция для пользователей, которые хотят самостоятельно добавить фавикон на сайт + HTML-код.

    Редактор для создания иконки с цветом и текстом

    Как добавить фавикон на сайт: пошаговая инструкция

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

    • создание фавикона. Нужно убедиться, что иконка соответствует всем требованиям, имеет правильное название (рекомендовано favicon.ico), является четкой и будет корректно отображаться;
    • размещение на сервере. Рекомендуется осуществлять сохранение файла в корневой папке сайта, альтернатива – папки с изображениями/стилями. Путь к иконке следует заполнить (он указывается между тегами ), чтобы облегчить процесс работы с кодом;
    • вставка кода в HTML. На финише необходимо добавить код в HTML-разметку (пример кода для вставки – на фото ниже).

    Пример кода вставки фавикона

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

    Легче всего добавить фавикон на сайт, созданный с помощью конструктора: в настройках выбирается раздел «фавикон» или «favicon» (зависит от платформы), выполняется загрузка изображения (данные о размере и формате есть в подсказках), разрешается применение и страницы переопубликовываются. После этого иконка начинает отображаться, но лучше провести дополнительную проверку в браузерах.

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

    Существует много причин, из-за которых фавикон не отображается после загрузки. Первая – кэширование, при котором страницы или элементы сайта хранятся во временной памяти браузера (настраивается для повышения скорости загрузки при повторных посещениях). Для устранения проблемы достаточно очистить кэш (в настройках браузера или нажатием CTRL + F5), после чего страницу нужно обновить. Выделим другие проблемы:

    • неправильный формат или размер иконки, нужно выполнить замену;
    • ошибки, допущенные при ручном размещении кода, например, пропущен тег ;
    • мало времени после загрузки, индексация иконок занимает до 2 недель, но все зависит от поисковой системы (в Яндексе процесс более долгий);
    • установлен запрет на индексацию в robots.txt. Если доступна строка «Disallow: favicon.ico», то «Disallow» нужно заменить на «Allow»;
    • изображение не соответствует правилам поисковиков, например, содержит запрещенные элементы 18+ и подобные;
    • качество иконки низкое или же она является неуникальной, в этом случае поисковики могут ее не отображать.

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

    100 — Надпись видна в том случае, если иконка сильно увеличена: не ошибка, но для пользователей неудобно

    В заключение

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

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

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

    Содержание статьи скрыть

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

    Слева от названия сайта вы видите зелёно-чёрный значок. Это и есть фавикон

    Слева от названия сайта вы видите зелёно-чёрный значок. Это и есть фавикон

    Фавикон — графический элемент на сайте или конкретной странице. Дословно в переводе с английского favicon это слово означает «значок для избранного».

    В марте 2021 года этому небольшому, но важному элементу исполнилось 22 года. Впервые мир узнал этот термин в 1999 году: он появился вместе с обновлённой версией браузера Internet Explorer 5. Сегодня фавикон — обязательный атрибут любого уважающего себя сайта

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

    В классическом варианте — это изображение размером 16*16 пикселей. В таком виде он хорошо читается в большинстве браузеров. Но есть отступления от нормы: максимально допустимый размер — до 512 пикселей в обоих измерениях.

    При создании ФИ важно тестировать то, как он будет смотреться в разных размерах и форматах, обращать внимание на его читаемость с телефона и с ПК.

    Пошаговый план
    «Как эксперту выйти на стабильные 100 000 ₽/мес»
    На продаже своих услуг без всякого «наставничества»
    Получить план

    Зачем нужен фавикон

    Вот несколько основных причин:

    • Повышает узнаваемость бренда . Иконка во вкладке — такой же элемент стиля, как логотип, фирменный цвет. Это полноценная деталь, без которой образ бренда в интернет-пространстве будет незавершённым. Визуальные элементы запоминаются быстрее, чем текст. Когда пользователь открывает вкладку, он ориентируется на изображение слева — так маленькая картинка как логотип работает на то, чтобы сделать бренд узнаваемым.
    • Увеличивает кликабельность. В поисковой выдаче сайты с фавиконкой привлекают внимание больше, чем страницы, на которых этого элемента нет. Если иконка отражает ваш стиль и привлекает внимание яркими красками или необычным дизайном — шансы, что пользователь кликнет по ссылке, возрастают.
    • Вызывает доверие. Сегодня фавиконки нет только у недоделанных, заброшенных сайтов, поэтому его отсутствие всегда вызывает сомнение в надёжности ресурса. Если же этот элемент есть и он привлекает внимание, доверие пользователей увеличивается.

    Впишите в поисковую строку любой запрос

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

    Какой формат использовать

    ICO. Раньше использовали фавикон только в формате ICO. Его главная особенность — в файле могло сохраняться несколько вариантов размера значка. В настоящее время он не так популярен, хоть и до сих пор используется.

    PNG. Сегодня предпочтительный формат файла для такой иконки — PNG. Он отображается корректно во всех браузерах: Chrome, Opera, Firefox, Safari и др. Качество иконки будет одинаково высоким, независимо от типа устройства: на десктопе, в том числе на маке и в мобильном устройстве — на андроиде и в айфоне.

    Допустимые варианты . Файлы в форматах JPEG, SVG и GIF тоже подойдут, но бывает, что в этих форматах могут быть проблемы с отображением.

    Файлы JPEG и GIF часто сжимаются с потерей качества, SVG хоть и не теряет в качестве, но может не отобразиться в браузере Internet Explorer версии 8 и ниже

    На что обратить внимание при создании фавикона

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

    Но есть несколько лайфхаков:

    • Возьмите из основной версии логотипа отдельный фрагмент . Выберете участок изображения, который привлекает внимание больше всего. Используйте этот элемент для создания — так вы и стилистику сохраните, и сделаете иконку визуально более совершенной.
    • Упростите графический знак логотипа . Уберите лишние детали, оставьте крупный элемент. Фон лучше кардинально не менять, чтобы иконка была похожа на остальные стилистические элементы. Если это важно — измените его на 2-3 тона, не более.
    • Измените пропорции элементов. Например, на логотипе есть тонкие линии, которые будут незаметны на небольшом изображении. Достаточно сделать их чуть шире, и картинка готова.
    • Сделайте новый значок. Если первые три варианта не помогли, остаётся придумать что-то новое, но в стиле сайта. Например, вы можете сохранить цветовую гамму, а поменять графические элементы. Если во всех остальных визуальных элементах используются прямые линии, сделайте значок таким же, не заменяйте их на плавные.

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

    Размер Форматы Особенности
    Яндекс 120*120, 32*32, 16*16 Рекомендуемый: SVG

    Альтернативные варианты: JPEG, PNG, GIF без анимации, ICO

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

    Не рекомендуется загружать изображения размером 16*16

    • Важно, чтобы картинка совпадала с графическим оформлением веб-ресурса
    • Не рекомендуется часто менять адрес, по которому доступен фавикон
    • Запрещены неприемлемые изображения, например свастику, площадка удалит

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

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

    Favicon.cc

    Favicon.cc

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

    Genfavicon.com

    Genfavicon.com

    Сайт Genfavicon.com позволяет конвертировать любое изображение, независимо от формата и размера. Когда всё будет готово, вам останется сохранить его в формате .ico. Сервис работает на нескольких языках и есть опция предварительного просмотра.

    Realfavicongenerator

    Realfavicongenerator

    Чтобы создать фавикон на сервисе Realfavicongenerator, загрузите изображение размером не менее 70*70 пикселей. Оптимальный размер для создания качественных читабельных иконок — 260*260 и больше. Дальше вы сможете поменять фон, настроить отступы и подобрать цветовую гамму.

    Когда всё будет готово, вы получите пакет файлов, которые нужно скачать и добавить на сайт код.

    Faviconit

    Faviconit

    Исходный файл, который вы должны загрузить на сайт Faviconit, должен быть размером 310*310 пикселей, вес — не более 1 мегабайта. Вы можете задать имя иконки и указать папку хранения. Готовый вариант вы получите в виде папки с файлами. Откройте его, внутри увидите текстовый файл с кодом, который нужен для встраивания значка на сайт.

    Если вы хотите создавать не только иконки, но и другие дизайны: макеты сайтов, баннеры, логотипы — идите на курсы. В агрегаторе Checkroi собраны актуальные полезные курсы по графическому дизайну

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

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

    Алгоритм действий будет такой:

    1. Сохраните элемент в корневом каталоге . Имя изображения — favicon.ico. У вас должен получится адрес подобный этому — https://sitename.ru/favicon.ico. Он нужен, если вы планируете ставить разные значки для разных страниц. Если будете использовать один ФИ для всех ситуаций — указывать адрес необязательно.
    2. В HTML-код главной страницы добавьте ссылку на изображение . Код будет выглядеть так: .

    Процесс установки ФИ на сайт зависит от CMS.

    Для CMS WordPress. Можно повторить алгоритм, о котором говорилось выше или использовать плагин Favicon by RealFaviconGenerator. Прежде чем устанавливать иконку на сайт, познакомьтесь с официальными документами WordPress о фавиконках.

    Для CMS Joomla. Сохраните изображение в директорию /joomla/templates/. Изучите информацию о ФИ на сайте CMS в разделе «Документация».

    Как создавать фавиконки для разных браузеров и устройств

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

    Файл favicon.ico — стандартный пакет, в котором могут хранится разные фавиконы. Разместите в нём изображения разных размеров: 16*16, 32*32, 48*48. Такой контейнер обеспечит корректное отображение иконки на любых платформах: Chrome, Opera, Firefox, Safari, «Яндекс.Браузер» и др.

    Чтобы иконка отображалась на мобильных устройствах, её нужно сжать.

    Загрузите изображение в формате .png. Оптимальный размер — 180*180 пикселей. Значок и его расположение можно указать через спецификацию Web App Manifest. В ней вы найдёте описание JSON-файла, в котором можно указать значки, их данные для веб-ресурсов и мобильных приложений.

    Рекомендованный размер фавикон для iOS — 180*180, но допустим 57*57. Формат — PNG. В Safari такие файлы именуются как Web Clips. Изображения прекрасно отображаются в других браузерах и смотрятся качественно: картинка чёткая, углы автоматически округляются при добавлении приложения на главный экран телефона. apple-touch-icon.png — так вы должны указать файл в rel.

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

    Подведём итог

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

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

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

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