Embedded Files
im moving to my html website!
i'll show you how to disguise a website as something else using a bookmarklet
note that i borrowed the code
1. first thing you wanna do is gather the code for the bookmarklet
**to get it, navigate to my bookmarklets page of my website and scroll to the triple duty disguise and get the code from there or here:
javascript:void function(){function e(){var e=document.querySelector("link[rel*='icon']")||document.createElement("link");e.type="image/x-icon",e.rel="shortcut icon",e.href="https://codingwebsite.edjiang1234.repl.co/grc.ico",document.title="Google Classroom",console.log(document.title),document.getElementsByTagName("head")[0].appendChild(e)}e(),setInterval(e,1e3)}();
2. then, for the hard part: collecting the favicon for the site
you first want to open developer tools
and navigate to the <head></head> element and click the little arrow to the left of it, which expands it.
if you are too lazy to gather the favicon, i have a pre collected list of google favicons that you can use. here they are:
Google Classroom: https://ssl.gstatic.com/classroom/favicon.png
BONUS!!! To remix the color of the Google classroom favicon, add an underscore ( _ ) after the keyword favicon and type the color. For example: for a blue version of the logo, it looks like this: https://ssl.gstatic.com/classroom/favicon_blue.png
**Note: not all colors are usable. Some colors, like red, will redirect to a 404 error. That's okay! Just try a different color.
Google Docs: https://ssl.gstatic.com/docs/documents/images/kix-favicon7.ico
Google Drive: https://ssl.gstatic.com/images/branding/product/1x/drive_2020q4_32dp.png
Google Gmail: https://ssl.gstatic.com/ui/v1/icons/mail/rfr/gmail.ico
Google Forms: https://ssl.gstatic.com/docs/spreadsheets/forms/favicon_qp2.png
Google Sheets: https://ssl.gstatic.com/docs/spreadsheets/favicon3.ico
Google Slides: https://ssl.gstatic.com/docs/presentations/images/favicon5.ico
Google Keep: https://ssl.gstatic.com/keep/keep_2020q4v2.ico
if there are any icons you want me to add i can add them here, just scroll to the bottom!
3. navigate to the <link> element and find the link to the favicon
two images are shown below to help you find it.
basically, to have a favicon on a website, it uses this <link> element. This links external sources to your website (do not confuse with the anchor [<a>] element). Copy the link found in the href, and it should take you to the favicon.
**note if the link starts with "//" (e.g. "//ssl.gstatic.com"), type "https:" before it then past the link.
4. paste the link found in the href attribute into your code
put the link right between the two quotation marks
5. add a title that you like in the document.title="" section
6. url-encode the special characters (go to bookmarklets.org/maker, paste the code in the red outlined section and drag the 'My Bookmarklet' blue underlined text to your bookmarks bar)
7. cheers!
your done! now use this bookmarklet to fool people and make websites look like something they are not.
Report abuse