Katcerina.ru

Деньги в сети
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Выбрать фавикон для сайта

Создание favicon.ico

С помощью этого сервиса Вы сможете легко преобразовать любое изображение формата jpg, gif, png в favicon.ico. Стандартный размер изображения для favicon 16×16 пикселей. В режиме Эксперт Вы можете сделать иконки размером: 16×16, 24×24, 32×32, 48×48, 96×96, 128×128 и объединить их в один файл. Данный генератор фавикон поможет Вам сгенерировать иконку Favicon для Вашего сайта из изображения любого размера.

На этой странице собраны примеры иконок сайтов:

А это иконки сайтов которые анализировались и строились за последнее время:

Что такое favicon?

Favicon (англ. Favorite Icon) — это небольшая иконка (изображение, картинка) в специальном формате, которая отображается в адресной строке браузера при просмотре сайта, вкладке браузера или в его закладках (“Избранном”).

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

Зачем нужен favicon для сайта?

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

Что лучше изобразить на фавикон?

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

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

Как сделать анимированный favicon?

Формат ICO не поддерживает анимацию. Но современные браузеры позволяют использовать формат GIF для миниатюр. Возможно указать для современных браузеров один анимированный файл(favicon.gif), а для древних, типа Intertet Explorer, другой(favicon.ico). Для этого в секцию head внесите следующие две строчки:

Естественно предварительно нужно поместить оба файла в корневую папку сайта.

Как быть, если запрещен показ изображений в браузере?

Если сделать favicon c внедренным изображением в код старницы:

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

Как получить favicon с сайта

Не все вебмастера располагают favicon.ico в корне сайта. Для получения адреса favicon используйте следующий скрипт:

Поисковые системы Google, Яндекс и favicon

Робот поисковых систем кешируют иконки сайтов. Закешированные иконки доступны по следующим запросам:

Кроме этого, Яндекс может сделать Вам «спрайт» из иконок разных сайтов:

Иконки для iPhone и iPad

Даже если Вы не указываете link-ссылку на картинку iphone все равно будет искать в корневой папке сайта файл с именем apple-touch-icon.png и если найдет, то Возьмет из него картинку, закруглит по углам и на нее будет наложен блик автоматически самоим устройством. Для избежания этого вместо apple-touch-icon.png следует написать apple-touch-icon-precomposed.png владельцы айфонов и точей, т.к. для них мы делаем красивую иконюшку размером 57×57 (можно кстати и больше, но это стандартный размер иконки на ланч-скрине), подключая ее так:

Правильно опубликовать и объявить иконки для старых и новых Retina iPad:

Как динамически менять favicon?

HTML5 и favicon

В HTML5 был добавлен атрибут sizes, позволяющий объявить несколько различных версии одной и той же иконки, и это могут быть PNG файлы:

Как объявить плитку для планшетов на Windows 8?

Объявление для Windows 8.0 выглядит как-то так:

Windows 8.1 и IE 11 ожидают несколько версий изображения, объявленных в browserconfig.xml. Например:

Можно не объявлять, если имя файла не менять:

CMS Рейтинг

Рейтинги и обзоры CMS

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

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

Что такое фавикон и где он отображается

Фавикон – небольшое изображение или пиктограмма, которую можно заметить рядом с названием сайта или открытой вкладкой. Термин происходит от английского «favicon» (favorite icon) и изначально использовался для метки сайтов в меню «Избранное» браузера Internet Explorer.

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

Где отображается favicon:

  • панель закладок;
  • избранные страницы;
  • адресная строка;
  • поисковая выдача Яндекса;
  • контекстная реклама;
  • в качестве ярлыка приложения на мобильных платформах.

Яндекс – не единственная поисковая система, где отображается иконка сайта. О желании ввести иконки уже заявили в Google, но пока это реализовано на уровне закладок пользователя.

Для чего нужен фавикон

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

Какое влияние оказывает фавикон на развитие и продвижение сайта:

  1. Повышение кликабельности ссылки в поисковой выдаче.
  2. Информативное содержание: через значок можно передать тематику площадки или продемонстрировать фирменный логотип.
  3. Упрощенная навигация для пользователя. Информативное изображение снижает вероятность ошибочного захода, что положительно отражается на показателе отказов и средней продолжительности нахождения на сайте.
  4. Брендинг: видя знакомый значок, посетитель может кликнуть по нему, даже если он не находится в верхней части списка выдачи. Имидж проекта или отдельной компании действует в обе стороны, поэтому негативный опыт пользователя может стать причиной его отказа переходить по ссылке.
  5. Помощь в поиске сайта в закладках и избранных ссылках. Визуально лучше воспринимаются значки, чем текст. Это экономит время на поиски нужной страницы.
  6. Выделение площадки. Можно считать фавикон персональным идентификатором. В случае его отсутствие, ресурс имеет вместо иконки стандартный значок браузера. Это средство уникализации проекта.
  7. При наличии нескольких сайтов у вебмастера, иконка упрощает их поиски в выдаче поисковой системы, меню закладок и так далее.
Читать еще:  Одностраничный сайт для продажи

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

Каким должен быть favicon

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

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

  • freshfavicon.com;
  • thefavicongallery.com;
  • faviconka.ru.

Идеальный фавикон обладает такими свойствами:

  • ассоциативность;
  • простота;
  • понятность для аудитории;
  • оригинальность.

Эти критерии относятся к внешнему виду графического идентификатора. Фавикон отличается от обычных изображений, имея свои стандарты оформления. Если отклониться от требуемых форматов, favicon может не отображаться или отображаться некорректно. Заменить иконку ресурса возможно оперативно, но в поисковой системе Яндекса смена (и появление) фавикона происходит в течение 3-4 недель. Все это время изменить значок в поисковой выдаче невозможно – обращение в службу поддержки не поможет, процесс осуществляется автоматически.

Стандарты оформления для favicon:

  1. Разрешение изображения – квадрат с размером сторон, кратных 8. Рекомендуемое разрешение для десктопной версии 16х16, но присутствует возможность использования и других размеров: 24х24, 32х32 и так далее. Для удобства использования иконки в качестве приложения на мобильных платформах рекомендуемое разрешение значка 120х120 и 180х180.
  2. Стандартное расширение для файла favicon – ICO. Кроме этого варианта допускается использование других графических форматов: PNG, GIF, JPEG, SVG. В некоторых ситуациях целесообразно создавать иконку в формате PNG вместо классического ICO, что объясняется возможными проблемами с масштабированием.
  3. Картинка должна быть четкой и без размытых участков.
  4. Иконка должна быть уникальной – это одно из условий добавления значка в поисковую систему Яндекса.

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

Как получить favicon для сайта

Существует несколько вариантов сделать это:

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

Рассмотрим возможности каждого из методов.

Самостоятельная отрисовка

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

Популярные сервисы для отрисовки фавиконов:

Функциональность предложенных редакторов схожа, а процесс рисования выглядит просто и понятно.

Онлайн-конвертеры для преобразования графики в favicon

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

Помимо предложенных ранее сервисов, для конвертации в форматы фавикона подходят:

  • image.online-convert.com;
  • icoconverter.com;
  • fconvert.ru;
  • инструмент от PR-CY.

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

Adobe PhotoShop

Конвертацию и/или отрисовку можно выполнить самостоятельно в графических редакторах, среди которых наиболее популярным является Фотошоп. Недостаток метода в том, что базовое приложение не имеет возможности сохранить картинку в формате ICO, но с другими расширениями проблем нет. Если возникла необходимость получения иконки именно в ICO, то необходимо установить отдельный плагин. Для установки выбранного плагина нужно перенести его файлы в директорию Фотошопа, в папку …Plug-insFile Formats. После этого появится возможность сохранять изображения в формате ICO.

Заказ услуги

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

Где можно заказать создание фавикона для сайта:

  1. Специализированные веб-студии. Самый дорогой и надежный вариант.
  2. Подключение дизайнер-фрилансера. Бюджетное решение, где качество результата зависит от навыков исполнителя.
  3. Биржи фрилансеров. Для составления заказа требуется ТЗ, иначе процесс разработки может затянуться надолго. Альтернативный вариант предложен на площадке FL.RU, где заказчик может организовать конкурс, получив сотни вариантов на выбор.

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

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

Инструкция по установке достаточно проста, и для этого требуется выполнить несколько шагов:

  1. Зайти в файловый менеджер на хостинге или использовать FTP-клиент Filezilla.
  2. Открыть корневую директорию сайта.
  3. Перенести файл favicon с заменой существующего.

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

Как подключить графический идентификатор

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

Инструкция по установке отображения значка сайта:

  1. Открыть редактирование файла header.php.
  2. Найти область head.
  3. Прописать код: .
  4. Сохранить изменения.

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

  1. Для IE:.
  2. Для iOS:.
  3. Для Android:.

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

Возможные проблемы с отображением и способы их устранения

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

  1. Использование неподходящего разрешения. Если размер картинки кратен 8, но не отображается, то стоит попробовать стандартное значение – 16х16.
  2. Несовместимость формата. Как и в предыдущем случае лучше проверить работу стандартного расширения – ICO.
  3. Яндекс не отображает значок. Есть две причины: или поисковый робот еще не занес иконку в каталог системы, или изображение не соответствует стандартам – не уникально, плохого качества или размыто.

В некоторых случаях поисковая система Яндекса не загружает favicon сайтов, которые занимают низкий рейтинг – далее сотой позиции.

Самостоятельно проверить загруженный роботом идентификатор можно, прописав в адресной строке браузера: http://favicon.yandex.net/favicon/www.(доменное имя сайта).

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

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

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

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

Создаем и устанавливаем красивый фавикон (favicon) для сайта

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

Favorite Icon (“значок для избранного”) – именно так расшифровывается favicon.ico. Он был придуман еще в прошлом веке. В марте 1999 года, браузер “Internet Explorer 5” стал первым поддерживать эти значки. По сравнению с 99 годом, интернет-технологии ушли далеко вперед, а иконка осталась и используется по сей день. Конечно, за 16 лет она претерпевала ряд усовершенствований, о некоторых из них мы сегодня поговорим. Также расскажу о том, как можно нарисовать собственную иконку или сгенерировать ее из графического файла. Не обойду вниманием и сайты, где можно выбрать и скачать красивый favicon для своего сайта.

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

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

В самом начале, иконка имела расширение ICO, но сегодня этим дело не ограничивается, и можно встретить ее в таких форматах, как GIF, JPEG и PNG. Эти форматы поддерживаются и всеми современными интернет-браузерами, за исключением только поддержки JPEG в Internet Explorer.

Есть два основных способа создания иконки. Первый – ручная прорисовка favicon на специализированных онлайн-сервисах или при помощи графических редакторов типа Photoshop. Второй – работа уже с готовыми иконками или изображениями. Рассмотрим оба варианта, и пойдем по порядку…

Онлайн-сервисы для создания фавикон

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

Как правило, эти сервисы позволяют не только рисовать, но и конвертировать графический файл в стандарт ICO. Таких сервисов существует несколько, вот только некоторые из них:

  1. Favicon.ru – русскоязычный сервис, скриншот из которого вы видите чуть выше. Позволяет как рисовать, так и конвертировать из других форматов в формат ICO.
  2. Favicon.cc – англоязычный сервис, с аналогичными возможностями, но поддерживающий создание анимированных иконок.
  3. Favicon.by – русскоязычный сервис (судя по домену белорусский). Функционал, также аналогичен предыдущим. Анимация не поддерживается, но есть возможность указав адрес сайта, «утащить» с него иконку для последующей переделки в редакторе.

Подобные действия можно произвести и в более вам привычном графическом редакторе. Там не обязательно рисовать в разрешении 16х16 пикселей, т.к. при конвертации изображения favicon.ico уменьшится до нужных размеров. Если я рисую иконку самостоятельно, то предпочитаю пользоваться этим методом. Сохраняю в фотошопе картинку в формате PNG, а потом перевожу с помощью данных онлайн-сервисов в ICO.

Использование готовых иконок для сайта

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

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

  1. IconSearch.ru – русскоязычный сервис, с приличным набором иконок. Размеры иконок от 16х16 до 128х128 пикселей. Есть возможность сохранения иконки в форматы ICO и PNG.
  2. IconSeeker.com – аналогичный сервис, только англоязычный. Больших отличий нет, за исключением того, что попадаются иконки размера 256х256.
  3. IconFinder.com – это один из моих любимых поисковиков иконок. Там правда много платных иконок, но и среди бесплатных есть что выбрать. Помимо упомянутых уже ICO и PNG форматов, можно скачать в SVG, или даже в AI (векторная графика Adobe Illustration). Иконки размерностью до 512х512 пикселей.

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

Прозрачность и размер иконки

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

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

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

Так в мобильном Google Chrome, вместо иконки 16х16, можно увидеть цветной квадрат с первой буквой из названия сайта по середине. Другие браузеры могут растягивать маленькую иконку, что выглядит визуально не очень красиво. Доля мобильного трафика сегодня высока, и может достигать 20-25%. И с каждым годом только растет, поэтому, подумать о нем на будущее будет не лишним.

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

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

Если стандартной иконку и вас нет, и в админке она тоже не меняется, то необходимо прописать небольшие строчки в HTML код вашего сайта. Их нужно размещать между тегов и . У разных CMS структура шаблонов разная, поэтому, иногда приходится поискать в каком файле шаблона есть эти теги. У WordPress, например, этот файл называется «header.php», а у OpenCart – «header.tpl».

Если у вас иконка в формате ICO, то нужно вставить следующий код:

Создание favicon.ico

С помощью этого сервиса Вы сможете легко преобразовать любое изображение формата jpg, gif, png в favicon.ico. Стандартный размер изображения для favicon 16×16 пикселей. В режиме Эксперт Вы можете сделать иконки размером: 16×16, 24×24, 32×32, 48×48, 96×96, 128×128 и объединить их в один файл. Данный генератор фавикон поможет Вам сгенерировать иконку Favicon для Вашего сайта из изображения любого размера.

На этой странице собраны примеры иконок сайтов:

А это иконки сайтов которые анализировались и строились за последнее время:

Что такое favicon?

Favicon (англ. Favorite Icon) — это небольшая иконка (изображение, картинка) в специальном формате, которая отображается в адресной строке браузера при просмотре сайта, вкладке браузера или в его закладках (“Избранном”).

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

Зачем нужен favicon для сайта?

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

Что лучше изобразить на фавикон?

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

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

Как сделать анимированный favicon?

Формат ICO не поддерживает анимацию. Но современные браузеры позволяют использовать формат GIF для миниатюр. Возможно указать для современных браузеров один анимированный файл(favicon.gif), а для древних, типа Intertet Explorer, другой(favicon.ico). Для этого в секцию head внесите следующие две строчки:

Естественно предварительно нужно поместить оба файла в корневую папку сайта.

Как быть, если запрещен показ изображений в браузере?

Если сделать favicon c внедренным изображением в код старницы:

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

Как получить favicon с сайта

Не все вебмастера располагают favicon.ico в корне сайта. Для получения адреса favicon используйте следующий скрипт:

Поисковые системы Google, Яндекс и favicon

Робот поисковых систем кешируют иконки сайтов. Закешированные иконки доступны по следующим запросам:

Кроме этого, Яндекс может сделать Вам «спрайт» из иконок разных сайтов:

Иконки для iPhone и iPad

Даже если Вы не указываете link-ссылку на картинку iphone все равно будет искать в корневой папке сайта файл с именем apple-touch-icon.png и если найдет, то Возьмет из него картинку, закруглит по углам и на нее будет наложен блик автоматически самоим устройством. Для избежания этого вместо apple-touch-icon.png следует написать apple-touch-icon-precomposed.png владельцы айфонов и точей, т.к. для них мы делаем красивую иконюшку размером 57×57 (можно кстати и больше, но это стандартный размер иконки на ланч-скрине), подключая ее так:

Правильно опубликовать и объявить иконки для старых и новых Retina iPad:

Как динамически менять favicon?

HTML5 и favicon

В HTML5 был добавлен атрибут sizes, позволяющий объявить несколько различных версии одной и той же иконки, и это могут быть PNG файлы:

Как объявить плитку для планшетов на Windows 8?

Объявление для Windows 8.0 выглядит как-то так:

Windows 8.1 и IE 11 ожидают несколько версий изображения, объявленных в browserconfig.xml. Например:

Можно не объявлять, если имя файла не менять:

Ссылка на основную публикацию
Adblock
detector