Как называется иконка сайта в браузере – Favicon — что это такое, как создать фавикон и установить на свой сайт, онлайн-генераторы иконок | Дропшиппинг

Содержание

Как добавить иконку сайта в адресную строку браузера?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

favicon.ico и другие форматы, поддержка браузерами

От автора: раньше иконки для сайта были такими легкими. Простой растровый favicon.ico 16х16 пикселей. Это как знак препинания в конце проекта. Для разработчика это эквивалент завершения предложения с восклицательным знаком или точкой. Так было раньше. Но за прошедшие 20 лет все изменилось.

Что такое favicon?

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

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

В списке закладок

Как иконка запуска на домашнем экране устройства и десктопа

Добавление иконок для сайта в мультибраузерном и мультипплатформенном мире

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

В самой адресной строке (я не уверен, но современные браузеры так не делают. Они отображают иконку во вкладке браузера)

Firefox показывает большие favicon на стартовом экране и маленькие во вкладке

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

Как правило, браузеры кэшируют favicon. Поэтому если вы планируете делать что-то забавное с несколькими favicon на сайте, кэширование нужно отключить. Один из способов – добавить временную метку в URL favicon.

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

Что такое формат favicon .ico (ICO)?

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

ICO – формат изображений для отображения иконок. Он берет свои корни из первой версии Windows — Microsoft Windows 1.0 – выпущенной в 1985. По факту, это формат-контейнер для хранения одного и более файлов растровых изображений. Изначально файлы должны были быть в формате BMP. Позже появилась поддержка PNG.

В 1999 Microsoft добавила формат ICO в IE5, как способ создавать закладки и определять сайт – так родился favicon.

Изначально favicon в вебе был размером 16х16 пикселей, но со временем появилась поддержка разных размеров в ICO файле (32×32, 24×24, 48×48, 64×64, 128×128 и 256×256).

Возникает вопрос: если favicon.ico может хранить несколько размеров, то какие из них нужно использовать? Вернемся к этому скоро.

Как подключить favicon?

Зачастую термины favicon и иконка взаимозаменяемы. Однако favicon не обязательно должен быть формата ICO. Часто встречаются форматы GIF, PNG, JPG.

Начнем с самого старого и базового способа добавления favicon на сайт.

Размещение favicon.ico в корне сайта

Изначально Microsoft для Internet Explorer 5 разработала способ добавления favicon на сайт. Для этого нужно было сохранить файл иконки в корневой папке сайта с именем favicon.ico. Это все что требовалось, никакого HTML. Большинство браузеров до сих пор проверяют корневую папку на наличие файла favicon.ico.

Позже когда favicon стал частью стандартов HTML 4.01 и XHTML 1.0, рекомендовали использовать тег link для размещения favicon. Рассмотрим этот способ.

Подключение favicon через тег link

После добавления favicon в стандарты HTML, появился новый способ подключения через тег <link rel=»…»> в head документа. Favicon перестал ограничиваться корневой папкой сайта, теперь можно было указать любой путь.

Даже у такого простого предложения есть сложности. Атрибуты rel и type принимают разные значения. Например, все строки ниже будут работать:

Принимаются и другие форматы изображений, так как favicon больше не ограничен форматом ICO:

Подключение иконок через Web App Manifest: manifest.json

Вместе с Progressive Web Apps (PWAs) вы часто будете слышать про файл manifest.json. Файл manifest.json – это JSON файл, позволяющий настраивать внешний вид и запускать действия веб-приложения, которое добавлено в закладки или на домашний экран устройства.

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

Более подробно о manifest.json и его возможностях читайте в нашей статье manifest.json.

Favicon на домашнем экране устройства Android

Манифест содержит свойство массива icons, с помощью которого можно задавать список объектов изображений, каждое из которых может обладать свойствами src, sizes и type, описывающими иконку.

Файл manifest.json с двумя иконками может выглядеть следующим образом:

{ «name»: «mobiForge», «short_name»: «mobiForge», «icons»: [ { «src»: «/icon-144×144.png», «sizes»: «144×144», «type»: «image/png» }, { «src»: «/icon-192×192.png», «sizes»: «192×192», «type»: «image/png» } ], «theme_color»: «#ffffff», «background_color»: «#ffffff», «display»: «standalone» }

{

«name»: «mobiForge»,

«short_name»: «mobiForge»,

«icons»: [

{

«src»: «/icon-144×144.png»,

«sizes»: «144×144»,

«type»: «image/png»

{

«src»: «/icon-192×192.png»,

«sizes»: «192×192»,

«type»: «image/png»

}

«theme_color»: «#ffffff»,

«background_color»: «#ffffff»,

«display»: «standalone»

}

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

Подключение иконок через файл browserconfig.xml

browserconfig.xml – это XML файл, с помощью которого можно задавать иконки для Microsoft Windows. Он также размещается в корне сайта. Его код:

<?xml version=»1.0″ encoding=»utf-8″?> <browserconfig> <msapplication> <tile> <square150x150logo src=»/mstile-150×150.png»/> <square310x310logo src=»/mstile-310×310.png»/> <TileColor>#da532c</TileColor> </tile> </msapplication> </browserconfig>

<?xml version=»1.0″ encoding=»utf-8″?>

<tile>

</tile>

</msapplication>

</browserconfig>

Нас интересуют здесь тег tile и его дочерние элементы. Код сверху определяет иконку с двумя размерами 150×150 и 310×310. Подробнее об этих размерах позже.

Так много способов подключения иконки – какой использовать?

Столько способов подключения favicon. Вы спросите: «какой же использовать?». Теперь самое забавное – все! ОК, весело? Не совсем.

Почему столько много способов подключения favicon?

Ранее мы говорили, что почти все браузеры поддерживают favicon.ico 16×16 и 32×32 в корневой папке. Так почему бы не пойти этим путем? Нам нужно поддерживать разные платформы и плотность пикселей на экране, чтобы иконка всегда хорошо смотрелась на разных размерах и в разных контекстах.

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

На мобильных ОС, например, нужно также подготовить иконку для отображения на домашнем экране. У каждой ОС свои особенности и набор предпочтительных размеров иконок для разных размеров экрана. Файлы Web App Manifest и browserconfig.xml дают разработчику больше контроля над представлением и запуском сайта на разных платформах.

Какие размеры favicon использовать?

У нас есть разные способы подключения иконок. Давайте узнаем, какие размеры использовать. С появления атрибута sizes в HTML5 теперь можно указывать favicon в формате PNG:

Закрепленные вкладки в Safari

Safari использует SVG иконки на закрепленных вкладках. Для этого используется SVG изображение (поэтому размер пикселей неважен):

Плитки Microsoft Windows

Даже если вы не хотите заботиться об ОС Windows Phone mobile (на это есть хорошая причина, она была заморожена), вам все еще нужно думать об иконках на плитках Windows. Они используются в Windows 8 и выше, на планшетах, ноутбуках и ПК.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

Плитки Microsoft Windows

Windows 8 и выше использует формат плитки для отображения иконок. Руководство по их проектированию довольно сложное. Мы лишь рассмотрим необходимые размеры.

Базовые размеры плитки, определенные Microsoft:

70×70 (маленькая плитка)

150×150 (средняя плитка)

310×150 (широкая плитка)

310×310 (большая плитка)

В Windows 8.0 и IE 10 плитку 144×144 можно задать в разметке так:

С версии 8.1 можно использовать файл browserconfig.xml и не писать это в head.

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

Наш browserconfig.xml теперь ссылается на изображения плиток, увеличенные на 1.8, и выглядит следующим образом:

<?xml version=»1.0″ encoding=»utf-8″?> <browserconfig> <msapplication> <tile> <square70x70logo src=»/ms-tile-126.png»/> <square150x150logo src=»/ms-tile-270.png»/> <wide310x150logo src=»/ms-tile-558×270.png»/> <square310x310logo src=»/ms-tile-558.png»/> <TileColor>#009900</TileColor> </tile> </msapplication> </browserconfig>

<?xml version=»1.0″ encoding=»utf-8″?>

<tile>

</tile>

</msapplication>

</browserconfig>

Edge и IE11 автоматически запрашивает файл browserconfig.xml. Однако конфиг файл можно явно предоставить следующим образом, что позволяет изменить его имя и путь:

Собираем все вместе

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

favicon.ico

favicon-16.png

favicon-32.png

icon-48.png

icon-96.png

icon-144.png

icon-192.png

icon-256.png

icon-384.png

icon-512.png

apple-touch-icon-57.png

apple-touch-icon-60.png

apple-touch-icon-72.png

apple-touch-icon-76.png

apple-touch-icon-114.png

apple-touch-icon-120.png

apple-touch-icon-152.png

apple-touch-icon-167.png

apple-touch-icon-180.png

ms-tile-144.png

ms-tile-126.png

ms-tile-270.png

ms-tile-558×270.png

ms-tile-558.png

И 2 конфиг файла:

manifest.json

browserconfig.xml

Разметка favicon

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

Прозрачность и кадрирование: не все иконки одинаково обрабатываются

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

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

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

Другое различие заключается в кадрировании. iOS добавляет скругленные углы иконкам, Android этого не делает. Windows помещает изображения иконок на плитки и в зависимости от размера плитки и внутреннего отступа иконки последняя может быть либо слишком маленькой, либо слишком большой.

Вывод – нужно проверять рендер favicon на всех платформах.

Нам действительно нужны все эти favicon?

Для такой маленькой иконки очень много работы.

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

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

Пусть браузер сам занимается уменьшением

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

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

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

Минимальный набор иконок

1. Следующие файлы в корневой папке

favicon.ico (с размерами 16×16, 32×32)

favicon-16×16.png: современный эквивалент формата ICO

favicon-32×32.png: Safari

apple-touch-icon-180.png: Apple touch icon

icon-192.png: Chrome/Android

safari-pinned-tab.svg: SVG на закрепленной вкладке в Safari

mstile-150×150.png: MS плитка

2. Файл manifest.json, использующий изображение chrome:

{ «name»: «», «short_name»: «», «icons»: [ { «src»: «/icon-192.png», «sizes»: «192×192», «type»: «image/png» } ], «theme_color»: «#ffffff», «background_color»: «#ffffff», «display»: «standalone» }

{

«name»: «»,

«short_name»: «»,

«icons»: [

{

«src»: «/icon-192.png»,

«sizes»: «192×192»,

«type»: «image/png»

}

«theme_color»: «#ffffff»,

«background_color»: «#ffffff»,

«display»: «standalone»

}

3. Файл browserconfig.xml, использующий изображение mstile

<?xml version=»1.0″ encoding=»utf-8″?> <browserconfig> <msapplication> <tile> <square150x150logo src=»/mstile-150×150.png»/> <TileColor>#da532c</TileColor> </tile> </msapplication> </browserconfig>

<?xml version=»1.0″ encoding=»utf-8″?>

<tile>

</tile>

</msapplication>

</browserconfig>

4. Следующая разметка

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

Мы используем manifest.json для Android, Chrome также будет использовать его, если он объявлен.

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

Будущее favicon

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

SVG favicon

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

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

Чтобы использовать favicon SVG, атрибут sizes необходимо установить в значение any:

Автор: Ruadhán O’Donoghue

Источник: https://mobiforge.com/

Редакция: Команда webformyself.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами с нуля

Смотреть

Как сделать Favicon для сайта

Что такое Favicon?

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

Думаю, каждый из вас замечал favicon, посещая любимые сайты. Выглядит это следующим образом (в браузере Google Chrome):

И для сравнения, отображение иконки в браузере Internet Explorer:

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

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

Рисуем Favicon с помощью веб-сервиса

Самый простой способ сделать фавикон – воспользоваться сервисом www.favicon.cc. Выглядит он так:

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

Создаем Favicon из готового изображения

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

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

Когда иконка будет готова, вы сможете ее скачать в формате .ico. Чтобы добавить favicon на сайт, поместите файл favicon.ico в корневой каталог сайта и добавьте между тегами <head></head> строчку:

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

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

Также рекомендуется добавлять строку:

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

(для Internet Explorer).

Размер фавикона может быть 16×16, 32×32.

Полезное замечание

Файл иконки может иметь не только расширение .ico, но и .png, причем рекомендуется использовать последний вариант. Это связано с тем, что устройства с высоким разрешением дисплея (например, iPhone, iPad, iPod) по умолчанию имеют размер иконки 57×57. Для этого лучше делать второй вариант иконки (в более высоком разрешении) и прописывать дополнительно строку:

<link rel="apple-touch-icon" href="apple-favicon.png" />

Но стоит отметить, что в таком случае иконка будет скруглена по углам и на нее будет наложен блик (это делается автоматически самим устройством). Для того, чтобы этого избежать, вместо apple-touch-icon нужно написать apple-touch-icon-precomposed.

Иконка сайта.

Что такое иконка сайта?

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

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

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

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

Как подключить иконку к своему сайту?

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

Напомню, тег <link> имеет атрибуты:

href — Путь к файлу.
rel — Определяет отношения между текущим документом и файлом, на который делается ссылка.

shortcut icon — Определяет, что подключаемый файл является иконкой.
stylesheet — Определяет, что подключаемый файл содержит таблицу стилей.
application/rss+xml — Файл в формате XML для описания ленты новостей.

type — MIME тип данных подключаемого файла.

И пишется в голове документа между тегами <head> </head> следовательно вся запись вместе приобретает следующий вид:

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

Где favicon.ico название иконки лежащей в корневой папке сайта.

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

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

Однако всё же лучше связывайте иконку со страницей сайта тегом <link>

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Иконка сайта</title>
<link rel=»shortcut icon» href=»../graphics/favicon.ico» type=»image/x-icon»>
</head>
<body>
<h2>Моя любимая страничка!</h2>
<p>Эта страничка использует индивидуальную иконку в виде сердечка.</p>
</body>
</html>

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

Как самостоятельно изготовить файл favicon.ico?

Способ первый:

Найти в Интернете готовую подходящую иконку в коллекциях иконок..

Способ второй:

Изготовить иконку с помощью какого либо онлайн сервиса. Наиболее популярным сервисом, создающим иконки для сайта, в русскоязычном Интернете, является ресурс www.favicon.ru

Всё просто заходите на данный ресурс, загружаете большое размером изображение (желательно квадратное) только весом не более 300кб.. ну например логотип сайта, жмете кнопку «Создать favicon.ico» на выходе скачиваете уменьшенную копию этого изображения 16х16 (а так же по желанию 32х32 и 48х48) пикселей в формате ico. Достаточно удобный ресурс позволяющий быстро создавать иконки приемлемого качества.

Ну и третий способ:

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

Лично я пользуюсь не сильно хитрой программкой — редактором иконок, но пользуюсь ей не так, как задумывали авторы.. Я сначала рисую иконку в привычном мне фотошопе, сохраняю её в формате jpg, потом открываю это изображение с помощью этой нехитрой программки и сохраняю его же уже в формате ico. Короче использую программку в качестве «конвертора», а не графического редактора.. программка называется IcoFX впрочем, как уже сказано выше существует куча других программ, так что не стоит останавливаться именно на этой!! Это я к ней приловчился, а Вы, может быть, найдете, что ни будь более удобное для себя.

Как сделать favicon для сайта онлайн (иконка в адресной строке браузера)

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

Favicon — это изображение 16×16 пикселей, которое можно создать в любом графическом редакторе. Сохранить созданный файл очень желательно в формате .ico и с названием favicon, так как этот формат поддерживают все браузеры, в отличие от .png и др.

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

1. Создайте файл favicon.ico

Если вы создаете файл в графическом редакторе сами, то не забудьте — его разрешение должно быть 16×16 пикселей. Мы рекомендуем воспользоваться специальным онлайн сервисом, например, Favicon.cc.Слева площадь для рисования вашей будущей иконки, справа вся палитра цветов, ластик, настройки прозрачности, подбор цвета и возможность подвигать полученный результат. Снизу вы сразу же видите получающийся результат на фоне вкладки браузера и кнопку скачать.

2. Скачайте иконку на компьютер

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

3. Загрузите файл на сайт

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

<head></head>

прописан код

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

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

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

Иконка сайта (фавикон) — очень важный элемент дизайна сайта. Она делает ваш ресурс заметней в выдаче, повышает его узнаваемость. Часто разработчики оставляют создание фавикона на последний момент, и вовсе о нем забывают. В лучшем случае, вставят одну строчку link тега только с одним вариантом favicon.

Отображение фавкиона в поисковой системе Яндекс

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

Внимание мелочам!

Сам фавикон не так прост, как нам хотелось бы думать. Да, для десктопа всё просто и тривиально. А что делать со смартфонами, для которых иконка должна быть представлена в разных размерах. А с ГуглТВ что делать?

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

Десктопный фавикон

Это всем нам привычная иконка (см. картинку выше). Все версии браузеров отображают иконки следующих размеров:

А поддерживаемый формат — как .png, так и .ico (.ico только для старых версий Internet Explorer).

Фавикон для Андроида

Тут уже мы должны учитывать разрешение экрана мобильного устройства. Именно от него и зависит итоговый размер фавикона. Разрешение смартфона — это плотность пикселей на дюйм (PPI). Именно из-за разных разрешений устройств необходимо делать иконки в разных физических размерах:

36×36 — PPI = 0.75
48×48 — PPI = 1
72×72 — PPI = 1.5
96×96 — PPI = 2
144×144 — PPI = 3
192×192 — PPI = 4

Android отлично понимает .png иконки, а также использует файл manifest.json, в котором можно прописать дополнительные параметры вывода. А если вы забыли сделать фавикон под андроид, то система будет использовать apple-touch-icon.

Favicon для Apple устройств

«Яблочные» устройства также имеют разный PPI в зависимости от модели и года выпуска, также в них используются Retina-экраны. Поэтому мы вынуждены также делать разные иконки для них:

57×57 — для iPhone с не ретина дисплеем и iOS версии 6.0 и ниже
60×60 — для iPhone с не ретина дисплеем и iOS версии 7.0
72×72 — для iPad с не ретина дисплеем и iOS версии 6.0 и ниже
76×76 — для iPad с не ретина дисплеем и iOS версии 7.0
114×144 — для iPhone с ретина дисплеем и iOS версии 6.0 и ниже
120×120 — для iPhone с ретина дисплеем и iOS версии 7.0
144×144 — для iPad с ретина дисплеем и iOS версии 6.0 и ниже
152×152 — для iPad с ретина дисплеем и iOS версии 7.0
180×180 — для iPhone 6 Plus c iOS версии 8.0

Другие фавиконки

Есть ещё некоторые нестандартные параметры иконок, к примеру:

Для IE10 под Windows 8 обязательно требуется указать цвет фона
Браузер IE11 под Windows 8 и 10 понимает несколько видов иконок, опирается на XML файл параметров browserconfig.xml
Safari под Mac OS X El Capitan обязательно требует наличие SVG иконки для закрепленных табов
96×96 — используется в Google TV
228×228 — используется в Opera Coast

Теперь вы понимаете, что на вопрос «какой размер фавикона использовать» ответом будет — ВСЕ размеры для ВСЕХ устройств!

А как всё это будем подключать?

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

Онлайн генератор фавикона

Данный онлайн генератор фавикона из одной вашей иконки (идеально, если размер будет 260х260 пикс.) создает все необходимые размеры под все устройства буквально в один клик!

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

Процесс генерации favicon для iOs онлайн сервисом

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

Встраиваем фавикон в страницу

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

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

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

Всё, у нас сгенерирован и встроен отличный фавикон!

Полезность напоследок

Подставьте вместо site.ru свой домен и увидите, как поисковые системы воспринимают ваш фавикон

Яндекс: http://favicon.yandex.net/favicon/site.ru
Google: http://www.google.com/s2/favicons?domain=site.ru

Хотите задать вопрос или заказать услугу? Пишите!

Гарантирован ответ в течение 1 часа в рабочее время!

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

Важность фавиконки для поискового продвижения сайта

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

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

Favicon изобрели и впервые применили для браузера Internet Explorer пятой версии. Это была небольшая квадратная картинка в формате «.ico». Сейчас этот формат считается устаревшим – для современных браузеров используют фавиконы преимущественно в форматах «.png» и «.gif». Это, во-первых, позволяет отображать иконку в современных популярных браузерах, а во-вторых, – делает изображение более качественным (а в случае с «гифом» еще и анимированным).

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

Размещая фавикон на сайте, важно знать, что срок индексации «свежего» фавикона составляет примерно до 3-х недель, а индексация начинается с обнаружения ссылки на картинку роботами поисковиков. Далее роботы скачивают фавиконку, после чего она добавляется в специальную базу иконок. База по данным Яндекса обновляется примерно раз в 1,5-2 недели. Это необходимо учитывать при установке или смене фавикона и стараться способствовать быстрому обнаружению ссылки поисковыми роботами, а именно важно прописывать адрес фавикона в коде главной страницы, располагать ее в корне сайта, использовать статический url картинки, при написании кириллического адреса рекомендуется использовать Punycode, а также не следует забывать проверять код ответа сервера (файл должен отдавать 200 ОК) и отсутствие запрета индексации файла с фавиконом в robots.txt.

Стандартный размер фавикона – 16х16 пикселей. Это классика, внедренная в первоначальных вариантах картинки. Сейчас активно используют и другие форматы: 24х24, 48х48, а также 64х64. Но сотрудники Яндекса рекомендуют не отступать от традиционных размеров иконки — 16х16, а также советуют делать картинку однослойной. Фавиконы больших размеров обычно служат ярлыками при сохранении пользователем страницы сайта на компьютере.

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

Помните, что при установке фавикона важен его правильный формат, который, как показывает практика, часто отличается от указанного в названии файла. При загрузке фавиконки убедитесь в свойствах файла, что формат картинки совпадает с тем, что указан в названии. Кроме того, при передаче файла иконки с сервера сайта не забудьте указать корректный тип передаваемых данных — type=»image/x-icon – в случае, если картинка имеет расширение ico.

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

Предупреждаем – качество такого фавикона и его эффективность при использовании подобных сервисов никто не гарантирует.

pr-cy.ru/favicon/
— для разработки иконки на основе уже имеющегося изображения. Задача сервиса – превратить вашу картинку в иконку подходящего размера и формата.
favicon.ru
— здесь можно нарисовать фавикон онлайн и преобразовать его в подходящий формат. Если не получилось – здесь же можно заказать профессиональные услуги.
favicon.cc
– сервис с большим набором инструментария для создания фавикона. При наличии должного художественного вкуса можно разработать идеальную иконку онлайн.

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

Как добавить иконку сайта в адресную строку браузера?

favicon.ico и другие форматы, поддержка браузерами

Что такое favicon?

Что такое формат favicon .ico (ICO)?

Как подключить favicon?

Размещение favicon.ico в корне сайта

Подключение favicon через тег link

Подключение иконок через Web App Manifest: manifest.json

Подключение иконок через файл browserconfig.xml

Так много способов подключения иконки – какой использовать?

Почему столько много способов подключения favicon?

Какие размеры favicon использовать?

Рекомендации Chrome

Рекомендации Safari

Закрепленные вкладки в Safari

Плитки Microsoft Windows

Собираем все вместе

Разметка favicon

Прозрачность и кадрирование: не все иконки одинаково обрабатываются

Нам действительно нужны все эти favicon?

Пусть браузер сам занимается уменьшением

Минимальный набор иконок

Будущее favicon

SVG favicon

Препроцессоры. Быстрый старт

Как сделать Favicon для сайта

Что такое Favicon?

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

Рисуем Favicon с помощью веб-сервиса

Создаем Favicon из готового изображения

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

Полезное замечание

Иконка сайта.

Что такое иконка сайта?

Как подключить иконку к своему сайту?

Как самостоятельно изготовить файл favicon.ico?

Как сделать favicon для сайта онлайн (иконка в адресной строке браузера)

1. Создайте файл favicon.ico

2. Скачайте иконку на компьютер

3. Загрузите файл на сайт

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

Внимание мелочам!

Десктопный фавикон

Фавикон для Андроида

Favicon для Apple устройств

Другие фавиконки

Встраиваем фавикон в страницу

Полезность напоследок

Хотите задать вопрос или заказать услугу? Пишите!

Важность фавиконки для поискового продвижения сайта

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