Как поменять иконку сайта? Инструкция как сделать и установить иконку для сайта самостоятельно
Иконка веб сайта в браузере и в поисковике
Иконка сайта – это специальный значок сайта, который отображается в браузерах пользователей интернета. Данный инструмент получил название favicon.
Название «Favicon» — это английское сокращение от слов FAVorites ICON, что в переводе обозначает «значок для избранного». Иконка веб сайта в браузере отображается в адресной строке, непосредственно перед url-адресом страницы. Так же иконку веб сайта в браузере можно увидеть во вкладках и рядом с закладками.
Если же владелец ресурса никогда не задавался вопросом, как добавить иконку на сайт, то по умолчанию в качестве картинки будет отображаться значок браузера.
Помимо отображения в браузерах, Favicon отображается и в поисковиках: иконка сайта в Яндексе ставиться слева от названия ресурса, аккурат напротив цифры, показывающей место ресурса в выдаче по введенному пользователем поисковому запросу.
Итак, после того, как стало понятно, зачем нужна иконка для сайта и где она отображается, можно перейти к описанию того, как сделать иконку для сайта самостоятельно и как добавить ее на сайт.
Создание иконки для сайта
Существует несколько способов, как сделать иконку для сайта. Самым простым вариантом является создание иконки для сайта с помощью онлайн сервисов, в которые загружается квадратное изображение, из которого система автоматически формирует картинку выбранного размера в нужном формате. Один из таких сервисов по созданию Favicon’ок онлайн находится здесь.
Как еще сделать иконку для сайта? Весьма популярно создание иконки для web сайта с помощью специальных программ, позволяющих редактировать изображения по своему усмотрению. Обычно программы отличаются между собой инструментами, встроенным функционалом и, конечно, пользовательским интерфейсом. Одни программы для создания иконок на сайт позволяют одновременно редактировать несколько картинок, другие дают возможность использовать градиентную заливку или 3D эффекты, а третьи имеют простой и понятный интерфейс. Скачать программу для создания иконок можно как здесь, выбрав любую из предложенных, так и поискав в поисковиках:
- Icon Craft;
- Студия иконок.
Так же можно самостоятельно нарисовать иконку для сайта в фотошопе. Данная универсальная программа для редактирования изображений позволяет рисовать все что угодно. Можно рисовать лого фирмы, писать буквы особыми шрифтами и т.д., главное помнить, что нарисованная иконка сайта так или иначе должна быть связана с общим оформлением ресурса или с его контентом, ведь именно тогда она будет лучше запоминаться вашим посетителям.
Для того, чтобы сохранить нарисованную иконку для сайта в фотошопе, нужно нажать «сохранить как» и выбрать специальный формат .ico.
Если вы не обнаружили у себя этот формат, не отчаивайтесь — просто стандартный набор форматов изображений Photoshop’а не включает его в себя. Но его очень легко добавить, достаточно лишь скачать плагин ico-формата и распаковать его в папку C:ProgramFilesAdobeAdobePhotoshopCS2Plug-InsFileFormats, после чего при сохранении изображений командой «Сохранить как» в списке доступных форматов появится строчка ICO (Windowsicon)(*.ICO).
Иконки для сайта: размер 16х16 или 32х32?
Размер иконки сайта обычно составляет 16х16 пикселей, допускается так же использование размера 32х32. Но стоит учесть, что в браузере в любом случае рисунок будет уменьшен и приведен к формату 16х16 пикселей, так что не стоит даже пытаться втиснуть туда высокохудожественное изображение, его все равно не будет видно на маленьком значке, намного лучше будут смотреться читаемые буквы и логотипы.
Формат иконки для сайта
На сегодняшний день универсальным форматом иконки для сайта считается формат .ico, так как именно его поддерживают все самые популярные браузеры: Google Chrome, Internet Explorer, Firefox, Opera и Safari. Следующие по универсальности форматы иконки для webсайта – PNG, JPEG, и GIF их поддерживают все браузеры, кроме Internet Explorer’а. А вот анимированные иконки для сайта GIF-формата поддерживают только Firefox и Opera.
Все возможности поддержки браузерами форматов иконок для сайтов представлены ниже:
Когда картинка создана и сохранена в нужном формате, можно переходить к тому, как установить иконку на сайт.
Как добавить иконку на сайт? Установка иконки на сайт
Первым нужно сделать не что иное, как добавить иконку на сайт в прямом смысле слова. Нужно загрузить изображение иконки, сохраненное в выбранном формате, на сервер: в корневую папку сайта (обычно она называется public_html). Как загрузить иконку на сайт? Это можно сделать с помощью специальных программ, помогающих соединиться по FTP или же в менеджере файлов, через панель управления сайтом.
После того, как вставка иконки на сайт произведена, необходимо сделать так, чтобы изображение отображалось в браузере. Для установки иконки на сайт (отображения в браузере) необходимо прописать специальный код и поместить его в правильное место.
Html код иконки для сайта
Обратите внимание на тип картинки иконки, его нужно прописывать в «type».
Например, если у вас картинка иконки имеет формат GIF, тогда код будет выглядеть следующим образом:
gif" type="image/gif">
Данный Html код иконки для сайта нужно вставить в произвольном месте между тегами и в файл страницы, на которую нужно поставить иконку.
Если вам нужна в wordpress иконка сайта, то необходимо отредактировать файл header.php, в который вставляется этот же код.
Итак, вы теперь знаете, как установить иконку на сайт самостоятельно.
Как поменять иконку сайта? замена иконки сайта
Если вас интересует, как изменить иконку сайта, значит, она уже есть у вас на сайте. Смена иконки сайта осуществляется практически по той же схеме, что и добавление. Для замены иконки сайта первым делом также необходимо нарисовать новую картинку и сохранить ее в нужном формате. Далее сохраненное изображение добавляется на сайт в корневую папку. После этого необходимо найти файл, где уже есть прописанный html код иконки для сайта между тегами и проверить его правильность. Если в коде прописаны верный путь к новой картинке, а так же ее название и формат, то браузер будет отображать изображение на вкладках, сразу после сохранения файла и обновления страницы.
Итак, теперь вы знаете и как сменить иконку сайта на новую.
Статьи по теме:
Самостоятельное продвижение сайтов в Интернете
Как закрыть внешние ссылки от индексации
Как подобрать ключевые слова на сайт
Где взять контент для сайта
Какой URL добавить на страницу
а у меня исчезла иконка сама по себе что мне предпринять?
Проверьте, наличие картинки «иконки» в папке сайта, пропишите заново ее в коде страниц в header’е.
Спасибо за дельную статью
Не понятно. Файл нужно назвать: favicon.ico? — это если в корневой папке. А что тогда означает «type=»image/x-icon»>? В вашем примере, как был назван файл? x-icon, что-ли, который находится в папке image? Объясните мне пожалуйста чайнику. И еще. Мне нужно вставить в header.php на вордпресс, там можно вставить в любое место? Так как там на PHP нет тегов .
Николай, Да, файл обязательно нужно назвать favicon и перенесети в любую папку, можно в корень (docs), можно и в image. Если вы положите картинку в папку image, тогда пропишите правильный путь к ней, например href=»seokleo.ru/image/favicon.ico type=»image/x-icon» — означает тип картинки — иконки. Если у вас картинка формата: jpg, то type= «image/jpg», gif — type= «image/gif» и т.д. Чтобы в вордпрессе добавить иконку сайта, нужно внести код «иконки» в header.php, для этого нужно зайти в панель управления в раздел «внешний вид» — «Редактор» и выбрать файл header.php и там вставить данный код:
между тегами . Не забудьте сохранить файл.Спасибо! Теперь все понятно ))
Здравствуйте.
Что не правильно сделал?
На главной странице поставил:
Кэш почистил! Иконкинеть ;-(
Упс!
Код не прошёл.
Надеюсь админу он виден.
Уточню.Иконку видно сверху-в горизонтальной
линейке,а в браузерах и закладках её нет.
Алекс, здравствуйте! Иконка в поисковиках появилась?
маленькая поправочка…
в теге нужно указывать точное расширение иконки!
если например иконка имеет экстеншн gif
то в теге пишем
обратите внимание, в конце тега тоже пишем gif
Иначе, браузер всё равно покажет иконку. но в ftp-логах сервера постоянно будет висеть ошибка 404.
можете сами поэкспериментировать из любопытства… Создайте иконку gifб а в теге напишите в конце x-icon.
А потом посмотрите файл error_log…
спасибо за внимание.
добавлю:
Помогите !!!
favicon.ico залил в корневую папку
ПОСТАВИЛ
(НА ВСЕ СТРАНИЦЫ)
почистил ctrl+F5
и ничего .Да,при открытии папки favicon.ico изображения там нет,хотя сносил и ставил много раз.Иконку качал сразу в формате .ico
Люди что не так ?
Александр, вы залили иконку в корневую папку, те у вас по адресу http://yoursite.ru/favicon.ico — открывается картинка-иконка сайта, так? Если да, этот адрес нужно подставить в тег
Данный тег необходимо вставить в любое место в тег здесь должен быть кодЗдравствуйте!
А у меня не получается.Сделал все как у вас написано.
Вопросы есть:
1.Вставлять между тегами в любом месте?(пробовал
и в начале и в конце)
2.Формат картинки м.б. png? или толькоjpg,gif?
Юрий, здравствуйте! 1.Вставлять между тегами в любом месте?(пробовал и в начале и в конце) Вставлять код нужно в любом месте между тегами
, попобуйте найти закрывающий тег и вставить код прямо перед ним, чтобы был такой вид: ………. ………. 2.Формат картинки м.б. png? или толькоjpg,gif? Формат картинки иконки сайта может быть и png, и jpg, и gif, и ico — главное прописать тип файла в коде правильно: type="image/формат картинки"Получилось, спасибо. Не сразу понял, где на сервере расположена корневая папка. У меня эта папка находится в папке public_html, название соответствует имени сайта.
Положил в папку public_html. По адресу мой сайт/favicon.ico иконка открывается. Иконку видно в браузере на вкладках, в поисковой строке нет, в закладках нет, в поисковиках нет. В чем причина?
Дмитрий, а вы путь к картинке правильный написали? Если да, то скорее всего картинка просто пока не проиндекировалась. Робот дойдет — появится в поиске.
Здравствуйте, у меня такая проблема, я прописал данный код в сайте который еще не выкладывал на хостинг, открываю через яндекс хром, нет иконки, а через оперу есть. Других то сайтов иконки отображаются, что я не правильно сделал?
Вам нужно прописать код на сайте уже на хостинге. Браузер скорее всего просто увидел вашу иконку в папке и поэтому показывает ее. Чтобы она в яндексе появилась, нужно чтобы поисковик увидел ее и код, в котором прописан верный путь к картинке.
Спасибо за подробное описание, Получилось установить фавикончик
Нет у меня папки public_html… Сайт на WordPressе, а отображается иконка Joomla! в Хроме, но в Опера ни чего не отображается.
Как найти и изменить на свою иконку??????
Привет,admin ! А папки «image» и папка «images» — это одно и то же ?
И ещё…. Как в эту папку «images» перетащить файл 16х16 под именем favicon ?
Спасибо.
Здравствуйте, Сахалинский! Вы можете это сделать через ftp-клиент или через панель управления сайтом.
Спасибо, но вот я вроде все правильно сделал.. и иконку в браузере показывает, а яндекс вебмастер все равно ничего не хочет отображать, хотя другой сайт нормально отображается.
Здравствуйте. Поменяла значок сразу появился во вкладке сайта. Набираю в поисковике, мой сайт со старым значком. Что нужно сделать чтобы в поисковике тоже поменялся, или нужно просто какое то время?
Здравствуйте! да нужно немного подождать, пока поисковики картинку иконки не проиндексируют.
Всё получилось! Правда, пришлось помучаться с форматами. Начала с ico. Не определялся в лисе только в хроме. Потом gif сделал — в хроме нормально, в лисе его стало колбасить как анимированный — среднее между первым хромовским (там изображение немного менялось) и новым. Наконец, сделала png. И алилуйа! Везде одинаково и не маячит ))
А если иконка стояла уже год и прекрасно отображалась, а в один непонятный момент исчезла из индекса Яндекса- что это может означать?
Возможно вы переместили картинку в другую папку сайта. Проверьте наличие файла иконки на прежнем месте или смените путь к ней в коде.
Долго мучился. Хитрость в форматах оказалась. Все получилось как использовал png, в других не сработало. Спасибо за статью и разъяснения!
Поставил фавикон на сайт, он отображается в браузере, слева от названия ресурса, но не отображается в поисковиках. Какая причина этого, что я не так сделал?
Скорее всего поисковые системы еще не успели проиндексировать изменения.
Сделал все как сказали + прочитал все комменты. Вообщем картинка в формате favicon.ico — отображается только в фаерфоксе, а в хроме остается почему-то старая, даже после Ctrl+F5
Подождите немного, пока проиндексируется картинка.
Добрый день. сайт работает на Битриксе. Изначально стояла ихняя иконка, заменил иконку favicon.ico в корневой папке на свой логотип. Видна только в административной части. Подскажите где и что нужно прописать, чтобы новая иконка была видна везде.
Здравствуйте, Дмитрий! Если это битрикс, то для того, чтобы поставить иконку на сайт, вам нужно в разделе шаблон сайта прописать код. Прилагаю ссылку на изображение, как это выглядит в движке: https://seokleo.ru/wp-content/uploads/2014/05/как-установить-иконку-на-сайт.jpg
У меня сайт обновлен и выглядит все по другому, плюс стоит два шаблона. Т.е. я не смог найти как по вашей ссылке прописать код. Может быть еще где-то можно поменять?
Дмитрий, так в обоих шаблонах пропишите просто код.
Ок. сделал все как вы написали. но результата нет. Наверное, для верности надо на хостинге код прописать. Подскажите в какой папке это можно сделать?
А где вы меняли? Если в движке, он сам, по идее, должен был на сервере хостинга сохранить. Так же может быть, что картинка иконки сайта еще просто не проиндексировалась поисковиками. В браузерах на вкладках появилась? Если нет, напишите нам на почту [email protected], с пометкой «иконка для сайта» и мы поможем вам установить иконку на сайт.
Привет! Создала иконку, поместила в корневой каталог. Скажите пожалуйста самое главное, в какую страничку этот HTML-й код вписывать? Я вписала в index.html, прописала полный путь в href, — не работает.
Здравствуйте! Вам нужно прописать код в хедере, между тегами и . У вас на какой системе управления сайт?
сделал иконку в формате .ico на компе в браузере хром видать её ,а в поисковике яндекс нет,сделал давно время прошло порядочно.посмотрите что не так пожалуйста.
Скорее всего еще не проиндексировалась. Гугл видит картинку?
Иконка на сайте — это целая проблема! Очень долго обновляется favicon.ico в браузере firefox; иногда даже не помогает чистка кеша сайта
Здравствуйте. Обновил иконку сайта, она отображается в браузере, слева от названия, но не отображается в поисковиках. Поисковые системы долго индексируют изменения? Интересует Yandex
Здравствуйте. За неделю должны проиндексироваться изменения.
А если фавикон в той же папке что и индекс? то есть все в одной папке?
Файл куда угодно можно положить, в любую директорию, главное ссылку на файл верную указать.
Спасибо за полезную и интересную информацию!
Такой вопрос дорогие знатоки.
Я делаю сайт оптимизированный на мобильных приложениях, и мне нужно что бы когда человек добавляет ярлык сайта на мобильном телефоне, а именно на рабочей стол телефона, то при сохранение была четкая картинка, если ставлю фактуре то на рабочем столе она появляется в ужасном качестве...
Помогите с этим вопросом